DOM 那些属性

最近在做一个可以编辑的 div，用到了很多 DOM 的操作，发现自己对 DOM 了解太薄弱了。决定把这一块梳理一下，见下图：

总结一下：

• Node 类型是我们操作 DOM 元素的父类。
• 根据 nodeType 的不同，对应不同的类型。常见如:
  • nodeType=9 document 类型
  • nodeType=1 Element 类型
  • nodeType=3 Text类型
• Element元素可以有子元素，但是 Text类型 是没有子元素的，也就是 Text类型 元素最里层了。

选择元素

常用的选择元素的语法：

• document.getElementById 、document.getElementsByTagName 、document.getElementsByName 三个方法都是 document 对象的方法。
• querySelector、 querySelectorAll 既可以 document 对象使用，也可以 Element 类型的对象使用。

const wrapDom = document.getElementById('wrap')
//只会获取 wrapDom 下面的 class 是 inner-p 第一个元素
const listNodes = wrapDom.querySelector('.inner-p')
//只会获取 wrapDom 下面的 p 元素
const listNodes = wrapDom.querySelectorAll('p')

• getElement 返回的结果是 HTMLCollection 类型； query 返回的结果是 NodeList 类型

• HTMLCollection是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新；document.querySelectorAll 会返回一个静态 NodeList，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。不要混淆，parent.childNodes 返回的 NodeList 是动态的。MDN 例子

操作元素

创建

创建文本节点 document.createTextNode(“data”)

const txt = document.createTextNode(“text node”)

创建 Element document.createElement(“tagName”)

const div = document.createElement(“div”)

创建 Fragment document.createDocumentFragment()

var fragment = document.createDocumentFragment();

复制节点 oneNode.cloneNode(deep); deep 表示是否深层复制 oneNode 节点。

var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);

插入

appendChild 在 parentNode 最后添加子元素

parentNode.appendChild(aChild)

insertBefore 在 referenceNode 前面插入新的元素 newNode

let insertedNode = parentNode.insertBefore(newNode, referenceNode)

删除

父元素删除某个子元素：

parentNode.removeChild(removeNode) // parentNode是需要删除元素的容器，removeNode是要删除的元素

父元素清空元素：

parentNode.innerHTML = ""

替换

replaceChild 将 oldChild 元素替换为 newChild

let oldChild = parentNode.replaceChild(newChild, oldChild);

字符串转 DOM

innerHTML

let html = '文本<span>元素</span>';
let placeholder = document.createElement('div');
placeholder.innerHTML = html;
let nodes = placeholder.childNodes;

DOMParser

const nodes = new DOMParser().parseFromString(html, 'text/html').body.childNodes;

更多：www.zhangxinxu.com/wordpress/2…

innerText 和 textContent 的区别

www.zhangxinxu.com/wordpress/2…

outerHTML 和 innerHTML 的区别

<div class="testOuter">
  <span>span content</span>
</div>

对上面的例子，testOuter 元素的 outerHTML 和 innerHTML 分别对应：

outerHTML 的值： <div class="testOuter"><span>span content</span></div>

innerHTML 的值：<span>span content</span>