节点分成两种:文本节点,元素节点,大部分情况,我们只要元素节点。可以通过nodeType判断节点的类型,nodeType==3 是文本节点,nodeType==1 是元素节点。下面是节点的几种操作。
1、创建节点:createElement()
接受一个参数,为要创建的标签名。
var oXi=document.createElement('li');
2、增加节点:appendChild()、insertBefore()
appendChild()接受一个参数,即要增加的节点;
insertBefore()接受两个参数,第一个是要插入的节点,第二个是参照节点,返回要添加的元素节点
oXi.innerHTML='西瓜';
oList.appendChild(oXi);//用于向children列表的末尾添加一个节点
oBl.innerHTML='菠萝';
oList.insertBefore(oBl,oAl);//向指定位置添加一个节点,如果不是在末尾插入节点,而是想放在特定的位置上,用这个方法
创建节点要和增加节点配合使用,创建节点只是生成了节点,但还没有加入到页面中,通过增加节点appendChild添加后才会出现到页面中。
appendChild() 方法还可以添加已经存在的元素,会将元素从原来的位置移到新的位置
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
3、删除节点:removeChild()
接受一个参数,为要删除的节点。通过父节点找到并删除子节点。
<div id="div1">
<p id="p1">这是一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);//父节点.removeChild(子节点)
</script>
4、复制节点:cloneNode()
用于复制节点, 接受一个布尔值参数, true 表示深复制(复制节点及其所有子节点), false 表示浅复制(复制节点本身,不复制子节点)
var oList=document.getElementById('list'); //获得ul
var aUls= oList.cloneNode(true); //深复制
var aUlq = oList.cloneNode(false); //浅复制
5、替换节点:replaceChild()
用于替换节点,接受两个参数,第一参数是要插入的节点,第二个是要替换的节点,返回被替换的节点。
oList.replaceChild(aaa,aLi[1]);
6、查找节点
1)childNodes 返回指定节点的子节点集合,包括文本节点和元素节点,通过不用这种方法获取子节点,而用children;
2)children 返回指定节点的子节点集合,只包括元素节点;
备注:可以使用 length 属性来确定子节点的数量,然后遍历所有的子节点并提取需要的信息;
3)parentNode 返回指定节点的父节点,如果没有父节点则返回null;
4)firstChild 返回指定节点的首个子节点,IE兼容;firstElementChild 返回指定节点的首个子节点,非IE兼容;
5)lastChild 返回指定节点的尾节点,IE兼容; lastElementChild 返回指定节点的尾节点,非IE兼容;
4)nextSibling 返回指定节点的下一个兄弟节点,IE兼容;nextElementSibling 返回指定节点的下一个兄弟节点,非IE兼容;如果没有下一个兄弟节点则返回null;
5)previousSibling 返回指定节点的上一个兄弟节点,IE兼容;previousElementSibling 返回指定节点的上一个兄弟节点,非IE兼容;如果没有上一个兄弟节点则返回null;
封装获取兄弟节点兼容性问题的方法:(首尾节点方法同)
function nextsibling(ele){
if(ele.nextElementSibling){
return ele.nextElementSibling;
}
else{
return ele.nextSibling;
}
}
nextsibling(aLi[1]).style.background='red';//方法调用
function previoussibling(ele){
if(ele.previousElementSibling){
return ele.previousElementSibling;
}
else{
return ele.previousSibling;
}
}