2.3 新增与删除HTML元素（节点）

2.3.1 什么是节点？

• 网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。
  
• HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
  

2.3.2 节点的层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

• parentNode属性可返回某节点的父节点，注意是最近的一个父节点
  
• 如果指定的节点没有父节点则返回null
  

子节点

parentNode.childNodes返回包括指定节点的子节点的集合，该集合为即时更新的集合

注意：返回值里面包括了所有的子节点，包括元素节点，文本节点等。如果想到获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes

firstChild返回第一个子节点，找不到就返回null，同样，也是包含所有的节点

lastChild返回最后一个子节点吗，找不到则返回null，同样，也是包含所有的节点

firstElementChild返回第一个子元素节点，找不到则返回null

lastElementChild返回最后一个子元素节点，找不到则返回null

注意：后面两个方法有兼容性问题，IE9以上才支持

2.3.3 兄弟节点

nextSibling返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包括所有节点

previousSiblin返回当前元素的上一个兄弟节点，找不到则返回null，同样，也是包括所有节点

nextElementSibling返回当前元素下一个兄弟元素节点，找不到则返回null

previousElementSibling返回当前元素上一个兄弟节点找不到就返回null

2.3.4 创建节点

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在是根据我们的需求动态生成的，所有我们也称为动态创建元素节点

2.3.5 添加节点

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素

添加节点 node.appendChild(child)  node 父级  child子级
// 后面追加元素，类似数组中的push
var ul = document.querySelector('ul');
ul.appendChild(li);
// 添加节点  node.insertBefore(child,指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);

2.3.6 删除节点

node.removeChild() 方法从DOM中删除一个子节点，返回删除的节点

// 1.获取元素
var ul = document.querySelector('ul');
// 2.删除元素  node.removeChild(child);
ul.removeChild(ul.children[0]);

2.3.7 克隆节点

node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意：

• 如果括号参数为空或者为false，则是浅拷贝，即只是克隆复制节点本身，不克隆里面的子节点
  
• 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点
  

node.cloneNode(); //浅拷贝，不复制内容，只复制标签
node.cloneNode(true); //深拷贝，复制内容、复制标签

2.3.8 三种创建元素的区别

• document.write()
  
• element.innerHTML
  
• document.createElement()
  

区别

document.write是直接将内容写在页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器，innerHTML效率要比creatElement高

三、javascript之表格对象

在网页中我们可能会经常看到用表格做出来的东西，我们有时候可能要对表格进行操作，当然我们可以通过DOM获得表格对象后对其子节点进行操作，但是大家可能都知道有一种简单方法，那就是DOM中的文档对象，也就是获得表格对象后进而获得某个行对象或者某个单元格对象。

3.1 HTML DOM Table 对象

3.1.1 Table 对象

• Table 对象代表一个 HTML 表格。
  
• 在 HTML 文档中 <table> 标签每出现一次，一个 Table 对象就会被创建。
  

3.1.2 Table 对象集合

W3C： W3C 标准。

3.1.3 Table 对象方法

HTML DOM td/th 对象

td 对象

td 对象代表了 HTML 中数据单元。

在 HTML 表格中每个 <td> 标签都会创建一个 td 对象。

th 对象

th 对象代表了 HTML 标准中的表头单元。

HTML 中每个 <th> 标签都会创建一个 th 对象。

td/th 对象属性

HTML DOM tr 对象

tr 对象

tr 对象代表了 HTML 表格的行。

HTML文档中出现一个 <tr> 标签，就会创建一个tr对象。

tr 对象集合

W3C： W3C 标签。

tr 对象属性

tr 对象方法

案例：全选框实现

思路：拿到全选标签获取checked属性，再拿到所有除全选之外的子复选框标签，当全选选中的时候，所有子复选框选中。为每一个子复选框设置点击事件，当一个子复选框不选的时候，就把控制全选checked状态的变量改为false。

            //封装根据id获取的方法
      function $(sid) {
        return document.getElementById(sid);
      }
            //全选
      function myAll() {
        var qx = $("allCheckBox");//拿到全选框标签
        var cs = document.getElementsByName("cartCheckBox");//所有子复选框
        for (var i = 0; i < cs.length; i++) {
          cs[i].checked = qx.checked;//子复选框的checked跟着全选走
        }
      }
      //完善全选一个复选框不选全选就不选
      function selectSingle() {
        var qx = $("allCheckBox"); //拿到全选框标签
        var cs = document.getElementsByName("cartCheckBox");//所有子复选框
        //假设全选是选中的
        var f = true;
        for (var i = 0; i < cs.length; i++) {
          if (cs[i].checked == false) {//判断
            f = false;
            break;
          }
        }
        //跟着假设走
        qx.checked = f;
      }