16.DOM节点操作

目录

前言：

一、节点概述

二、节点层级

1. 父级节点：parentNode 

2. 子节点：

3. 兄弟节点

三、创建和添加节点

1. 创建节点  document.creatElement('')

2. 添加节点  node.appendChild(child) 

1. 添加节点元素 node.appendChild(child) node指父级，child指子级 是在后面追加元素

2. 添加节点元素 node.insertBefore(child,指定元素)

四、删除节点

五、复制节点  node.cloneNode()

六、三种动态创建元素的区别

---

前言：

利用节点层级关系获取元素：逻辑性强，简单，兼容性差

---

一、节点概述

一般节点至少拥有nodeType（节点类型）、nodeName（节点名字）、nodeValue（节点值）这三个基本属性

• 元素节点 nodeType 为 1

• 属性节点 nodeType 为 2

• 文本节点 nodeType 为 3

实际开发中，节点操作主要是获取的元素节点

---

二、节点层级

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

1. 父级节点：parentNode 

得到的是距离元素最近的父级节点，如果找不到父节点就返回为空null

2. 子节点：

•    childNodes  得到所有的子节点，包括元素节点、文本节点等（不推荐使用）

•    children 获取所有的子元素节点 ，是实际开发中常用的

•    firstChild  获取的是第一个子节点，不管是文本节点还是元素节点 （不推荐使用）

•    lastChild   获取的是最后一个子节点，不管是文本节点还是元素节点 （不推荐使用）

•    firstElementChild  获取第一个子元素节点，有兼容性问题 ie9以上才支持

•    lastElementChild  获取最后一个子元素节点，有兼容性问题 ie9以上才支持

注意：

实际开发中，经常使用children先获取所有的子元素，这个返回的是一个伪数组，利用索引号来获取某一个值

ol.children[0]   第一个子元素

ol.children[ol.children.length - 1]  最后一个子元素

3. 兄弟节点

• 1）nextSibling  得到的是下一个兄弟节点，包含元素节点、文本节点等

• 2）previousSibling  得到的是上一个兄弟节点，包含元素节点、文本节点等

• 3）nextElementSibling  得到下一个兄弟元素节点，有兼容性问题 ie9以上才支持

• 4）previousElementSibling   得到上一个兄弟元素节点 ，有兼容性问题 ie9以上才支持

解决兼容性办法，封装一个兼容性的函数

function getNextElementSibling(element) {

   var el = element;

   while(el = el.nextSibling) {

       if(el.nodeType === 1) ｛

           return el;

       ｝

   }

   return null;

}

---

三、创建和添加节点

1. 创建节点  document.creatElement('')

2. 添加节点  node.appendChild(child) 

node指的是父级，child指的是子级 .后面追加元素，类似于数组中的push

        var li = document.createElement('li');

1. 添加节点元素 node.appendChild(child) node指父级，child指子级 是在后面追加元素

        var ul = document.querySelector('ul');

        ul.appendChild(li);

2. 添加节点元素 node.insertBefore(child,指定元素)

        var lili = document.createElement('li');

        ul.insertBefore(lili, ul.children[0]);

---

四、删除节点

node.removeChild(child) 删除父节点中的某一个子节点元素

---

五、复制节点  node.cloneNode()

1、node.cloneNode();括号里为空或者false,是浅拷贝，只复制标签，不复制里面的内容

2、node.cloneNode(true);括号里为true,是深拷贝，复制标签并不复制里面的内容

var ul = document.querySelector('ul');

var lili = ul.children[0].cloneNode(true);

ul.appendChild(lili);

---

六、三种动态创建元素的区别

1）document.write() 如果页面文档流加载完毕，在调用这句话会导致页面重绘

2）innerHTML 创建多个元素效率更高（不采用拼接字符串的方法，而是采用数组形式拼接），结构稍微复杂

3）document.creatElement() 创建多个元素效率稍微低一些，但是结构清晰

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