此文目的
本文主要是整理DOM相关的知识点，方便日后的查看和各位的查缺补漏。所以重在整理，并不会展开。目前还在持续整理中，打算在16日左右完结。
Node属性和方法
-
nodeType
Node.nodeType// 1为元素节点，2为属性节点，3为文本节点 -
nodeName与tagName
elementName = Element.tagName;//返回为大写标签名，如DIV,IMG。一般用tagName即可。 * Attr ------ Attr.name 属性名 * Element ------ Element.tagName 标签名 * Text ------ nodeName为‘#text’，tagName为undefined -
nodeValue
* Text ------ 文本内容 * Element ------ null
//返回的是NamedNodeMap，不是ARRY。NamedNodeMap是字符串形式的名/值对。无序，且可自动更新。
//获取参照mdn
var attr = element.attributes;
```- firstChild：表示某一节点的第一个节点
- lastChild：表示某一节点的最后一个子节点
- childNodes：表示所在节点的所有子节点
- parentNode：表示所在节点的父节点
- nextSibling：紧挨着当前节点的下一个节点
- previousSibling：紧挨着当前节点的上一个节点
-方法：
Node.hasChildNodes() // 如果包含子节点就返回trueDOM 创建
DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个nodeType属性用来表示当前元素的类型，它是一个整数：
- Element，元素
- Attribute，属性
- Text，文本
DOM节点创建最常用的便是document.createElement和document.createTextNode方法：
var el1 = document.createElement('div');
var node = document.createTextNode('hello world!');DOM 查询
getElementsByTagName等返回的实时的元素集合不需要预先获得所有的元素信息，而.querySelectorAll()会立刻收集所有的信息到一个静态的列表里，因而会[降低性能][2]。
可以用instanceof操作符检查节点的原型链：
```
myElement.firstChild.nodeType instanceof Text
```
元素查询的API返回的的结果是DOM节点或者DOM节点的列表。
//类似于css选择器: 选择classA下的classb元素
document.querySelector(".classA .classB");
// 返回选择的第一个元素.myEl
var el = myEl.querySelector("#foo > div.bar");
// 返回一个文档中a static NodeList，不是即时的
var els = myEl.querySelectorAll(".class");
//元素是否匹配选择器
myElement.matches('div.bar') === true
// 返回的是HTMLCollection，即时更新的。
var el = document.getElementById('ID');
var els = document.getElementsByClassName('CLASS');
var els = document.getElementsByTagName('标签名');
var els = document.getElementsByName('name属性');Element也提供了很多相对于元素的DOM导航方法：
// 获取父元素、父节点
var parent = ele.parentNode;
var parent = ele.parentElement;//非标准
// 获取子节点，子节点可以是任何一种节点，可以通过nodeType来判断
var nodes = ele.children;//元素节点
var nodes = ele.childNodes; //所有节点，包括文本，元素等。可配合nodeType == 1得到元素节点
// 当前元素的第一个/最后一个子元素节点
ele.firstElementChild;//第一个元素节点
ele.firstChild //第一个节点，一般是文本节点
ele.lastElementChild;//最后一个元素节点
ele.lastChild//最后一个节点
// 下一个/上一个兄弟节点
var el = ele.nextElementSibling;//元素节点
var el = ele.nextSibling;//包括文本节点
var el = ele.previousElementSibling;
var el = ele.previousSibling;
DOM 更改
append,replace,insertBefor的参数el如果已存在DOM中，都会先移除，再插入到新位置。
删除一个元素自身
myElement.parentNode.removeChild(myElement)// 添加、删除子元素.多次appendChild到一个父节点会引起浏览器多次重新渲染，此时可以将节点组合到fragment = document.createDocumentFragment()中。
ele.appendChild(el);//避免链式操作
ele.removeChild(el);//如果有返回值，则存在内存中。
// 替换子元素
//newChild如果存在dom中，则会被移除。replaceNode 为oldChild
replaceNode = parentNode.replaceChild(newChild, oldChild);
// 插入子元素
//newElement如果存在dom中，会先被移除再插入（不想移除可先复制）。
//referenceElement必须有，可为null，为null时，插入到parentElement最后
//return新增加的node（fragment不返回）
newElement = parentElement.insertBefore(newElement, referenceElement);
//没有insertAfter
parentElement.insertBefore(newElement,referenceElement.nextSibling)
//prepend，使用insertBefore代替。
ParentNode.prepend(nodesToPrepend); //IE支持不好
parentElement.insertBefore(newElement, theFirstChild);//jquery中prepend()也是用此方法
//克隆节点
//node需要被克隆的node
//deep为ture，则克隆所有子节点。deep不要省略，因为各版本浏览器默认值不同。
//深度克隆会克隆所有属性（除addEventListener和后续添加的click事件如：node.onclick = fn，但是会克隆写在dom中的onclick事件），容易导致id重复的问题。
var dupNode = node.cloneNode([deep]);
//document和iframe之间的克隆
var node = document.importNode(externalNode, deep);
修改class，属性和样式
修改属性
.getAttibute(), .setAttribute()和.removeAttribute()这三个方法。这些方法直接修改的是元素的HTML属性（与DOM属性相对），因此会使浏览器重新渲染。浏览器重新渲染不仅比只是设置DOM属性代价更高，而且还会产生不期望的后果。作为一个小原则，除非你真的想对HTML“持久化”那些改变，你就只用上面的方法修改与DOM属性不相关的HTML属性（比如colspan）
// 获取一个{name, value}的数组
var attrs = el.attributes;
// 获取、设置属性
var c = el.getAttribute('class');
el.setAttribute('class', 'highlight');
// 判断、移除属性
el.hasAttribute('class');
el.removeAttribute('class');
// 是否有属性设置
el.hasAttributes();
// Get an attribute value
const value = myElement.value
// Set an attribute as an element property
myElement.value = 'foo'
// Set multiple properties using Object.assign()
Object.assign(myElement, {
value: 'foo',
id: 'bar'
})
// Remove an attribute
myElement.value = null修改class
className和classList
myElement.classList.add('foo')
myElement.classList.remove('bar')
myElement.classList.toggle('baz')
el.className += ' class'修改样式
在JavaScript里要写成驼峰形式.如果我们想获得CSS规则的值，我们可以通过.style属性。然而，通过它只能拿到我们明确设置过的样式。想拿到计算后的样式值，我们可以用.window.getComputedStyle()。它可以拿到这个元素并返回一个CSSStyleDeclaration。这个返回值包括了这个元素自己的和继承自父元素的全部样式。
myElement.style.marginLeft = '2em'
window.getComputedStyle(myElement).getPropertyValue('margin-left')
// 动态添加样式规则
var style = document.createElement('style');
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';
document.head.appendChild(style);常见问题
-
innerHTML与outerHTML的区别？
DOM元素的innerHTML, outerHTML, innerText, outerText属性的区别也经常被面试官问到， 比如对于这样一个HTML元素：
<div id="main"> 我是测试文本<br/> </div>let el = document.querySelector("#main"); console.log("el.innerHTML: ",el.innerHTML); //我是测试文本<br> console.log("el.outerHTML: ",el.outerHTML); //<div id="main">我是测试文本<br></div> console.log("el.innerText: ",el.innerText); //我是测试文本 console.log("el.outerText: ",el.outerText); //我是测试文本 /* el.innerText = "哈哈"; */ el.outerText = "哈哈";- innerHTML：内部HTML；
- outerHTML：外部HTML；
- innerText：内部文本；
outerText：内部文本；
上述四个属性不仅可以读取，还可以赋值。outerText和innerText的区别在于outerText赋值时会把标签一起赋值掉，另外xxText赋值时HTML特殊字符会被转义。
https://jsfiddle.net/langlang...
-
jQuery的html()与innerHTML的区别？
jQuery的.html()会调用.innerHTML来操作，但同时也会catch异常，然后用.empty(), .append()来重新操作。 这是因为IE8中有些元素的.innerHTML是只读的。见：http://stackoverflow.com/ques...
-
NodeList 和 HTMLCollection区别。
NodeList是节点集合，包括任何节点类型。HTMLCollection是元素集合。NodeList有.forEach（），但IE不支持，所以一般转换成数组再调用//[Arry.from()][5] Array.from(myElements).forEach(doSth); Array.protoType.forEach.call(myElements,doSth); [].forEach.call(myElements,doSth)
参考文章：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。