## 怎样添加、移除、移动、复制、创建和查找节点 (好多年前用的这些，自行百度) <br> #### 创建新节点 ~~~ document.createDocumentFragment()    //创建一个DOM片段 document.createElement()   //创建一个具体的元素 document.createTextNode()   //创建一个文本节点 ~~~ #### 添加、移除、替换、插入 ~~~ document.appendChild()      //添加 document.removeChild()      //移除 document.replaceChild()      //替换 document.insertBefore()      //插入 ~~~ #### 查找 ~~~javascript document.getElementsByTagName()    // 通过标签名称 document.getElementsByName()     // 通过元素的Name属性的值 document.getElementById()        // 通过元素Id，唯一性 document.querySelector() // 可以通过选择器获取元素 document.querySelectorAll() // 可以通过选择器获取多个元素 ~~~ <br> ## 下面这个ul，如何点击每一列的时候alert其index? ~~~ <ul id="test"> <li>这是第一条</li> <li>这是第二条</li> <li>这是第三条</li> </ul> ~~~ #### 方法1：推荐 ~~~ var ul = document.getElementById('test'); var lis = ul.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { lis[i].index = i; lis[i].onclick = function () { console.log(this.index); }; } ~~~ #### 方法2： ~~~ var ul = document.getElementById('test'); var lis = ul.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) { lis[i].onclick = (function (n) { return function () { console.log(n); } }(i)); } ~~~ <br> ## 当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？ <br> #### 直接在DOM里绑定事件 ~~~ <div onclick="test()"></div> ~~~ #### 在JS里通过onclick绑定 ~~~ xxx.onclick = test ~~~ #### 通过事件添加进行绑定 ~~~ xxx .addEventListener(‘click’, test) ~~~ <br>