DOM

DOM 是指文档对象模型 (Document Object Model) 是 HTML 和 XML 文档的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式—程序可以对结构树进行访问，以改变文档的结构，样式和内容。
DOM 提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web 页面和脚本或编程语言连接起来了。

innerText 和 innerHTML 的区别

innerText 是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容。
innerHTML 属性作用和 innerText 类似，但是不是返回元素的文本内容，而是返回元素的 HTML 结构，在写入的时候也会自动构建 DOM。

elem.children 和 elem.childNodes 的区别

elem.children 只返回 HTML 元素节点。
elem.childNodes 返回所有子节点。

查询元素的几种常见方法

getElementById()：返回匹配指定 ID 属性的元素节点。如果没有发现匹配的节点，则返回 null。
getElementsByClassName()：返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有 class 名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。
getElementsByTagName()：返回所有指定标签的元素（搜索范围包括本身）。返回值是一个 HTMLCollection 对象，也就是说，搜索结果是一个动态集合，任何元素的变化都会实时反映在返回的集合中。
getElementsByName()：用于选择拥有name属性的 HTML 元素，比如
form、img、frame、embed 和 object，返回一个 NodeList 格式的对象，不会实时反映元素的变化。
ES5 的元素选择方法：

querySelector()：返回匹配指定的 CSS 选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null。
querySelectorAll()：返回匹配指定的 CSS 选择器的所有节点，返回的是 NodeList 类型的对象。NodeList 对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

元素的创建以及属性增加和删除

createElement()：用来生成 HTML 元素节点。
createTextNode()：用来生成文本节点，参数为所要生成的文本节点的内容。
createDocumentFragment()：生成一个 DocumentFragment 对象。
getAttribute()：用于获取元素的 attribute 值。
createAttribute()：生成一个新的属性对象节点，并返回它。
setAttribute()：用于设置元素属性。
removeAttribute()：用于删除元素属性。

页面元素添加子元素及删除页面元素下的子元素

appendChild()：在元素末尾添加元素。
insertBefore()：在某个元素之前插入元素。
replaceChild()：替换指定元素。
removeChild()：用来删除元素。

element.classList 方法判断一个元素的 class 列表中是包含某个 class，以及添加，删除一个class

element.classList 属性用于返回一个元素的 className 集合，并且该属性拥有add，remove，toggle，contains方法。

add()：表示往类名列表中新增一个类名；如果之前类名存在，则添加忽略。
remove()：表示往类名列表中移除该类名。
toggle()：若类名列表中有此类名，移除之，并返回 false；如果没有，则添加该类名，并返回 true。
contains()：表示往类名列表中是否包含该类名。

【注】版权归 Lucifer 所有，转载请联系作者。

DOM