DOM

原生插入结点
生成子元素并赋予id，修改css，删除一些节点等等类似简单问题

一、DOM结构

两个节点之间可能存在哪些关系？以及如何在节点之间任意移动？

DOM中两个节点存在的关系无非3种：父子 同辈 包含
下面详细来讲解

属性

1 父级属性

获取父节点：

 node.parentNode   
 node.parentElement

两者的区别在于后者只能获取元素

获取子节点：

childNodes，children 
firstChild，lastChild，firstElementChild，lastElementChild

2 同辈属性

nextSibling，previousSibling ，
nextElementSibling，previousElementSibling

备注：Element Travel API 给DOM添加的属性
childElementCount，firstElementChild，lastElementChild, nextElementSibling， previousElementSibling ，他们与之前的方法之间的区别是多了Element，保证只返回元素节点，而之前的方法普通的文本节点及注释节点也会返回，之前的方法在非IE浏览器中还会把元素间的空白符当文本节点返回。

方法

1 包含方法

<div id="myDiv">
    <ul id="myUl">
        <li id="myLi"></li>
        <li></li>
    </ul>
</div>

hasChildNodes()

myDiv.hasChildNodes() //true

contains()

myDiv.contains(myLi) //true

2 关系方法

compareDocumentPosition()

000000 0 两个节点相同
000001 1 两个节点不在同一个文档（即有一个节点不在当前文档）
000010 2 参数节点在当前节点的前面
000100 4 参数节点在当前节点的后面
001000 8 参数节点包含当前节点
010000 16 当前节点包含参数节点
100000 32 浏览器的私有用途

<div id="myDiv">
    <ul id="myUl">
        <li id="myLi1"></li>
        <li id="myLi2"></li>
    </ul>
</div>
<script>
//20=16+4，因为myUl节点被myDiv节点包含，也位于myDiv节点的后面
console.log(myDiv.compareDocumentPosition(myUl));

//10=8+2，因为myDiv节点包含myUl节点，也位于myUl节点的前面
console.log(myUl.compareDocumentPosition(myDiv));

//0，两个节点相同
console.log(myDiv.compareDocumentPosition(myDiv));

//4，myLi2在myLi1节点的后面
console.log(myLi1.compareDocumentPosition(myLi2));

//2，myLi1在myLi2节点的前面
console.log(myLi2.compareDocumentPosition(myLi1));
</script>

isSameNode() isEqualNode()

这两个方法都接受一个节点参数，并在传入节点与引用节点相同或相等时返回true

所谓相同(same)，指的是两个节点引用的是同一个对象

所谓相等(equal)，指的是两个节点是相同的类型，具有相等的属性(nodeName、nodeValue等等)，而且它们的attributes和childNodes属性也相等(相同位置包含相同的值)

[注意]firefox不支持isSameNode()方法，而IE8-浏览器两个方法都不支持

<script>
var div1 = document.createElement('div');
div1.setAttribute("title","test");
var div2 = document.createElement('div');
div2.setAttribute("title","test");
console.log(div1.isSameNode(div1));//true
console.log(div1.isEqualNode(div2));//true
console.log(div1.isSameNode(div2));//false
</script>

深入理解DOM节点

一、DOM操作

怎样添加、移除、移动、复制、创建和查找节点？

（1）创建新节点

      createDocumentFragment()    //创建一个DOM片段

      createElement()   //创建一个具体的元素

      createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore()

（3）查找

      getElementsByTagName()    //通过标签名称

      getElementsByName()    //通过元素的Name属性的值

      getElementById()    //通过元素Id，唯一性

备注：getElementsByName() 在IE中会得到一个数组，其中包括id等于name值的)