原生js操作dom节点的学习笔记

今天学习了如何用原生js写dom元素（节点），下面是结合所学文档W3C整理的笔记：

1.添加节点
创建节点：使用createElement创建元素，使用createTextNode创建文本节点
首先是一段html代码，下面的例子都引用这个。

Js部分：

//创建一个新的元素
var para=document.createElement("p");
//创建一个文本节点
var node=document.createTextNode("hello，reader");
//向元素追加这个文本节点
para.appendChild(node);
//找到一个已有元素
var element=document.getElementById("div1");
//向已有的元素追加这个新元素
element.appendChild(para);

效果图：

2.插入节点
appendChild，insertBefore，insertBefore接受两个参数，第一个是插入的节点，第二个是参照的节点
such as：insertBefore（a,b），a会插在b的前面

3.替换元素replaceChild()和删除节点removeChild()

//替换元素
var replaceChild=documnet.body.replaceChild(createNode,div1);
//删除节点
var parent=document.getElementById("div1");
var child=document.getElementById("p2");
child.parentNode.removeChild(child);

效果图：

4.节点的属性
firstChild:第一个子节点
lastChild:最后一个子节点
childNodes:子节点集合，获取其中子节点可以someNode.childNodes[index]或者someNode.childNodes.item(index)
nextSibling:下一个兄弟节点
previousSibling：上一个兄弟节点
parentNode：父节点

5.注意：childNodes.length存在跨浏览器问题。
Such as：

aaa
bbb
ccc
ddd
在ie中，ul.childNodes.length不会计算li之间的换行空格，从而得到数值为4
在firefox、chrome,safari中，会有包含li之间的空白符的5个文本节点，因此ul.childNodes.length为9
若要解决跨浏览器问题，可以将li之间的换行去掉，改成一行书写格式。