您的位置:首页 > Web前端 > JavaScript

javascript节点的汇总

2011-12-13 23:45 155 查看
1 有时候在页面中有个div标签 但是我想在div标签后插入多个标签 那么正常的情况下 是不能一次性插入的 比如说在div标签后 这样插入肯定不行的 div.appendChild(div1,div2,div3);这样是不行的 但是我们可以写个简单的函数来一次性添加多个元素:
function append(node){
for(var i=1;i<arguments.length;i++){
node.appendChild(arguments[i]);
}
return node;
}
调用的方式如下:
append(document.body,div1,div2,div3);

上面的简单的函数就可以在body里面一次性加入多个元素标签。上面的arguments是每个函数都有的 就是保存函数中的所有变量 类似于数组 但是不是数组 .2 我们都知道DOM节点有appendChild removeChild insertBefor replaceChild等待方法 当然一次性删除多个子节点的方法 函数也和上面的类似;
function delNode(){
for(var i=0;i<arguments.length;i++){
arguments[i].parentNode.removeChlid(arguments[i]);
}
}
调用方式如下: delNode(div1,div2,div3) ;


3 有insertBefore这个方法 但是怎么没有insertAfter方法呢 没有关系 我们可以简单的写个函数 简单的分析下:加入页面有两个标签:<div id="tugenhua"></div><div id="bozhu"></div>那么如果我想在tugenhua的后面插入个div标签的话 那该怎么办呢!我们都知道在tugenhua后面插入个div标签 也意味着在bozhu前面插入一个是一样的道理!这是第一点 第二点要判断的是 那么如果tugenhau后面没有兄弟节点的话 也就是说tugenhua是最后一个标签的话 那么我想在tugenhua这个ID后面插入一个标签的话 可以在此父元素后面追加一个元素就可以了!原理就上面两点!总结下 1 在一个标签的后面插入一个标签的话 也就意味在此标签的下个兄弟节点前面插入一个元素标签 2 如果此标签没有下个兄弟节点的话 也就是说 他是文档最后一个节点话 那么我可以转到父类 然后再父类最后添加一个标签!下面函数如下:
<div id="op" class="op"></div>
<p></p>
<script>
var div1 = document.createElement("div");
var op = document.getElementById("op");
function insertAfter(node,newNode){
//如果当前的 节点 有下个兄弟节点的话  那么让他插入到下个兄弟节点的前面去
//如果当前的节点没有下个兄弟节点 那么让他先到父节点 父节点再最后增加一个子节点
var pn = op.parentNode;
if(node.nextSibling){
pn.insertBefore(newNode,node.nextSibling);
}else{
pn.appendChild(newNode);
}
return newNode;
}
insertAfter(op,div1);
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息