Dom操作总结

Dom基本操作包括创建、增加、删除、改动、查询等，下面进行系统的总结。

---

1.创建

1. createElement() ：传入标签名创建一个dom

2. createTextNode() ：创建一个文本节点

var p = document.createElement("p");
var div = document.createElement("div");
document.body.appendChild(p);
document.body.appendChild(div);

3. createDocumentFragment()：创建插入一段dom

优点：可以减少页面的重绘与回流问题，能批量的插入dom。
添加到body之前，都没有真正的加入到dom tree里面，避免了重绘与回流。

  
第一个子节点

同时插入p，div

4. cloneNode()：克隆节点，true支持深克隆（克隆所有子节点），false只克隆第一个节点。

  
第一个子节点

2.增加

1.appendChild()：追加到父元素的结尾，作为最后一个子元素

let app = document.getElementById("app");
let p = document.createElement("p");
p.innerText = "我是插入的节点";
app.appendChild(p);

结果

2.insertBefore(insertNode,endNode)：将insertNode插入到endNode之前

let app = document.getElementById("app");
let p = document.createElement("p");
p.innerText = "我是插入的节点";
let div2 = document.getElementById("two");
app.insertBefore(p,div2);

结果

3.insertAdjacentElement():有四个取值

beforebegin、afterend、afterbegin、beforeend 插入位置如下
[站外图片上传中...(image-c3f7b-1558948875466)]

3.删除

1.removeChild():删除指定节点

let app = document.getElementById("app");
let div2 = document.getElementById("two");
let p = document.createElement("p");
p.innerText = "我是插入的节点";
app.appendChild(p);
app.removeChild(div2);

删除第二个子节点

2.replaceChild(newNode,oldNode)：替换节点

let app = document.getElementById("app");
let div2 = document.getElementById("two");
let p = document.createElement("p");
p.innerText = "我是新替换的节点";
app.replaceChild(p,div2);

替换第二个子节点

4.改

1.setAttribute(property, value): 修改property属性的值

2.innerHTML:获取内容，包括标签

3.innerText:获取文本内容，不包括标签

4.value：input,select,textarea的内容

---

5.查询

不推荐使用：

1.document.getElementById(id):根据id获取元素

2.document.getElementsByTagName(tagName):根据标签的类型获取元素

3.document.getElementsByClassName(className):根据class获取元素

4.document.getElementsByName(name):根据name获取元素

5.document.getElementsByTagNameNS():没用过

---

推荐使用：

6.document.querySelector(css选择器)：根据css选择器来获取dom，如果有多个，返回第一个

7.document.querySelectorAll(css选择器)：返回所有满足条件的元素

8.document.querySelector('#app').children：获取app的子元素

所有子元素

9.document.querySelector('#app').childNodes：.获取app所有子节点，不仅返回了dom子元素，还返回了文本子元素

所有子元素节点

10.获取父节点parentNode和parentElement

11.获取兄弟节点previousSibling、previousElementSibling、nextSibling、nextElementSibling（推荐使用带Element的）

12.获取首尾节点firstChild、firstElementChild、lastChild、lastElementChild

---

6.属性

1.setAttribute：设置dom的属性 => A.setAttribute(name,value)
2.getAttribute： 获取dom的属性 => A.getAttribute('id') 获取dom A的属性id
3.removeAttribut ` 移除属性: => A.removeAttribute(id) 移除id属性