1. DOM的概念和作用

       DOM 是 JavaScript操作网页的api接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript对象，从而可以用脚本进行各种操作（比如增删内容）。
       浏览器会根据 DOM 模型，将结构化文档（比如 HTML和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。
       DOM只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于DOM 操作的语言。

2.节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。
浏览器原生提供document节点，代表的是整个文档。

3.DOM选择器：（查询、创建、添加，修改，删除)

①返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null：

document.getElementById：

②返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素（兼容问题，低版本ie）,如果没有发现匹配的节点，则返回空数组[ ]：

document.getElementsByClassName：

③搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组的对象（HTMLCollection实例）：

document.getElementsByTagName：

④接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null;
例：var el1 = document.querySelector(’.myclass’)：

document.querySelector：（ES5新增选择器）

⑤与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点;
例：elementList = document.querySelectorAll(’.myclass’)：

document.querySelectorAll:（ES5新增选择器）

4.DOM的基本操作

①.添加

document.createElement：

用来生成元素节点，并返回该节点;
createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点;

var newDiv = document.createElement('div');

②.插入

把newDiv添加到oDiv内部的最后面

oDiv.appendChild(newDiv);

例：

// 创建
var span = document.createElement("span");
console.log(span);
// 插入到将来的父元素
var oBox = document.getElementById("box");
oBox.appendChild(span);
sapn.innerHTML = "这是一个span";

Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括和元素。
如果将innerHTML属性设为空，等于删除所有它包含的所有节点。

③.替换

box.replaceChild(newNode,oldNode);

④.删除

var el = document.getElementById('mydiv');
el.remove();
box.removeChild(oldNode);

5.DOM节点类型(元素和文本)

①所有节点的数据类型，必然是对象；

②DOM 的最小组成单位叫做节点（node）；

③文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子：

Element：网页的各种HTML标签（比如< body >、< a >等）；
Text：标签之间或标签包含的文本（创建Text）；
注释也是节点；
通过 nodeType属性可以查看类型：
如果节点是一个元素节点，nodeType 属性返回 1。
如果节点是属性节点, nodeType 属性返回 2。
如果节点是一个文本节点，nodeType 属性返回 3。
如果节点是一个注释节点，nodeType 属性返回 8
文档碎片 document.createDocumentFragment() 作为容器使用，可以避免频繁操作dom。

6.DOM属性节点

① Element.className：

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。

// HTML 代码 < div class ="one two three" id = "myDiv" >< /div>
var div = document.getElementById('myDiv');
div.className
// "one two three"

② Element.style：

每个元素节点都有style用来读写该元素的行内样式信息，不过，连词号需要变成骆驼拼写法。
Element.style返回的只是行内样式，并不是该元素的全部样式。通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。
元素的全部样式要通过window.getComputedStyle()得到。

var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';
divStyle.backgroundColor // red
divStyle.border // 1px solid black
divStyle.height // 100px
divStyle.width // 100px

③ 获取属性和设置属性（自定义属性）

Element.getAttribute方法接受一个字符串作为参数，返回同名属性的值。如果没有该属性，则返回null。

var mydiv = document.getElementById('mydiv');
var id = mydiv.getAttribute('id');

Element.setAttribute方法用于为当前节点设置属性。
如果属性已经存在，将更新属性值，否则将添加该属性。该方法没有返回值。

// HTML代码为
var b = document.querySelector('button');
b.setAttribute('name', 'myButton');
b.setAttribute('disabled', true);
// Element.removeAttribute方法移除指定属性。该方法没有返回值。
document.getElementById('div1').removeAttribute('id')

④
outerHTML：

outerHTML包括整个标签，而不仅限于标签内部的内容；

innerText：

innerText只获取元素内的文本内容，html标签将被忽略。

⑤ 获取孩子节点childNodes和children：

Element.children属性返回一个类似数组的对象（HTMLCollection实例），包括当前元素节点的所有子元素。如果当前元素没有子元素，则返回的对象包含零个成员；
Node.childNodes属性与Element.children属性的区别是，Element.children只包括元素类型的子节点，不包括其他类型的子节点。而childNodes属性包含空白节点。

7.DOM高级操作

①
Element.firstElementChild：

返回当前元素的第一个元素子节点；

Element.lastElementChild：

返回最后一个元素子节点。
如果没有元素子节点，这两个属性返回null。

② 兄弟节点：
nextElementSibling：

下一个节点；

previousElementSibling：

上一个节点。

Element.nextElementSibling：

返回当前元素节点的后一个同级元素节点，如果没有则返回null。

Element.previousElementSibling：

返回当前元素节点的前一个同级元素节点，如果没有则返回null。
（分别对应的还有 firstChild，lastChild，nextSibling ，previousSibling方法不过这些个方法都能获取到文本节点）

③ 元素的全部样式要通过window.getComputedStyle()得到。

行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。但是，网页元素最终的样式是综合各种规则计算出来的。因此，如果想得到元素实际的样式，只读取行内样式是不够的，需要得到浏览器最终计算出来的样式规则。
window.getComputedStyle方法，就用来返回浏览器计算后得到的最终规则。它接受一个节点对象作为参数，返回一个 CSSStyle 实例，包含了指定节点的最终样式信息。所谓“最终样式信息”，指的是各种 CSS 规则叠加后的结果。

var div = document.querySelector('div');
var styleObj = window.getComputedStyle(div);// 只能获取样式，不能设置
styleObj.backgroundColor
// 上面代码中，得到的背景色就是div元素真正的背景色

兼容性问题：
低版本ie 使用box.currentStyle 获取全部样式。

④insertBefore:

box.insertBefore(newNode, existNode)    // 插入节点
// 在box的子节点existNode前面插入一个新节点
document.createTextNode()               // 创建文本节点
var t = document.createTextNode('你好');
box.appendChild(t) ;
// 在box尾部添加一个文本节点

⑤ offsetWidth 和 offsetHeight：

Element.offsetHeight属性返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border；
Element.offsetWidth属性表示元素的 CSS 水平宽度（单位像素），其他都与Element.offsetHeight一致。
这两个属性都是只读属性，如果元素的 CSS 设为不可见（比如display: none;），则返回0。

⑥Element.offsetParent:

该属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。

<div style="position: absolute;">
  <p>
    <span>Hello</span>
  </p>
</div>
// 上面代码中，span元素的offsetParent属性就是div元素。

该属性主要用于确定子元素位置偏移的计算基准，Element.offsetTop和Element.offsetLeft就是offsetParent元素计算的。

⑦ offsetLeft 和 offsetTop：

Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移； Element.offsetTop返回垂直位移，单位为像素；
通常，这两个值是指相对于父节点的位移。

huangfuyk.

发布了70 篇原创文章 · 获赞 279 · 访问量 5万+

私信关注

JS中DOM元素的操作等基础知识笔记

目录