JS DOM知识总结 全！！
1 DOM 介绍
**MDN 文档对象模型手册：**https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。
2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。
2 Node 节点
2.1 五大节点类型
document 文档节点 nodeType:9
element 元素节点 nodeType:1 nodeName 获取元素的标签名
attribute 属性节点 nodeType:2
text 文本节点 nodeType:3
comment 注释节点 nodeType:8
2.2 节点的属性
nodeName 获取节点的名字
nodeValue 获取节点的值
nodeType 获取节点的类型，用数字表示
3 获取元素
① 通过 ID 名
document.getElementById('ID名');
总结：
- 方法返回一个元素对象。
- 如果没有满足条件的元素返回 null。
② 通过标签名
// 从文档中获取
document.getElementsByTagName('标签名');
// 从元素的后代中获取
element.getElementsByTagName('标签名');
总结：
- 方法返回一个 HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是元素对象。
- 如果没有满足条件的元素，返回空的集合。
③ 通过类名（了解，IE8 + 支持）
// 从文档中获取
document.getElementByClassName('类名');
// 从元素的后代中获取
element.getElementsByClassName('类名');
总结：
- 方法返回一个 HTMLCollection 类型的对象，这是一个伪数组对象，里面的成员是元素对象。
- 如果没有满足条件的元素，返回空的集合。
④ 通过 name 属性值 （了解）
// 从文档中获取
document.getElementsByName('name属性的值');
总结：
- 方法返回一个 NodeList 类型的对象，与 HTMLCollection 相似，也是伪数组，里面的元素是元素对象。
- 如果没有满足条件的元素，返回空集合。
⑤ 使用选择器获取元素 (推荐)
// 从文档中获取
document.querySelector('选择器')；
document.querySelectorAll('选择器');
// 从元素的后代中获取
element.querySelector('选择器');
element.querySelectorAll('选择器');
总结：
- querySelector() 方法返回一个元素对象，如果满足条件的元素有多个只取第一个，如果没有满足条件的元素返回 null。
- querySeleorAll() 方法返回 NodeList 集合，如果没有满足条件的元素返回空集合。
⑥ 获取所有的元素
document.all
总结： 获取文档中所有的元素，是个 HTMLCollection 类型的集合
**注意：**使用 document.all 可以判断IE还是非IE，这是一个语法糖。
if (document.all) { document.write('我是IE浏览器！'); } else { document.write('我不是IE'); }
4 文档结构（元素关系）
4.1 节点树
childNodes 获取所有子节点的集合，是个 NodeList 类型的对象
firstChild 获取第一个子节点
lastChild 获取最后一个子节点
previousSibling 获取紧邻在前面的兄弟节点
nextSibling 获取紧邻在后面的兄弟节点
parentNode 获取父节点
4.2 元素树
children 获取所有子元素的集合，是个 HTMLCollection 类型的数据
firstElementChild 获取第一个子元素
lastElementChild 获取最后一个子元素
previousElementSibling 获取紧邻在前面的兄弟元素
nextElementSibling 获取紧邻在后面的兄弟元素
parentElement 获取父元素
5 元素的属性操作
5.1 读写内置属性
元素.属性名;
5.2 读写自定义属性
元素.getAttribute('属性名') 读取属性的值，如果不存在概述返回 nulll
元素.setAttribute('属性名', '值') 设置属性的值，如果属性不存在会添加该属性
注意：
- getAttribute() 和 setAttribute() 可以操作写在标签上的所有属性，不论内置的还是自定义的。
- 如果要操作的属性是内置，使用
.属性名的方式；如果要操作的属性是自定义的再使用 getAttribute() 和 setAttribute()。
5.3 data-* 形式的自定义属性
HTML5标准建议标签中的自定义属性都是 data-message 、data-group-name 这样的形式，此种形式的自定义属性，DOM 提供了快捷的操作方式：
元素.dataset.属性名; // 可读可写
imgEle.dataset.message; // 对应的是 data-messag 属性
imgEle.dataset.gorupName; // 对应的是 data-group-name 属性
6 元素的样式操作
6.1 读写行内样式
元素.style.属性名;
注意：
- 该方式只能读取设置在行内的样式，设置也是把样式设置到行内。
- 如果CSS属性名中有
-会自动映射为小驼峰的形式，如果backgorund-color映射为backgroundColor
6.2 读取计算样式
getComputedStyle(元素).属性名;
/**
* 封装读取计算样式的函数
*/
function getStyle(ele, attr) {
// 判断
if (window.getComputedStyle) {
// IE9 + 以及其他非 IE
return getComputedStyle(ele)[attr];
} else if (ele.currentStyle) {
// IE8 以及以下
return ele.currentStyle[attr];
}
}
**注意：**该方式只能读取。
6.3 通过设置元素的类名操作样式
① className
元素.className; // 可读可写
注意： dom 对象中的 className 属性与 标签中的 class 属性对应。
② classList
元素.classList; // 得到描述元素类名的对象，是所有类名组成的集合，是个伪数组
// classList 对象具有以下三个方法：
元素.classList.add('类名'); // 给元素添加一个类名
元素.classList.remove('类名'); // 删除一个类名
元素.classList.toggle('类名'); // 类名切换（如果元素有该类名就删除，没有该类名就添加）
7 读写元素的文本内容（可读可写）
innerHTML 读写元素中所有的内容（包括内部的html标签）
outerHTML 读写元素自己在内的所有代码内容（包括自己的标签代码）
innerText 读写元素内的文内容（不包括html标签）（只保留换行）
textContent 读写元素内的文内容（不包括html标签），保留原格式（缩进和换行）
8 读取元素的尺寸（只读）
offsetWidth 盒子的宽度（内容宽+左右内边距+左右边框宽）
offsetHeight 盒子的高度（内容高+上下内边距+上下边框宽）
clientWidth 宽度（内容宽+左右内边距）
clientHeight 高度（内容高+上下内边距）
scrollWidth 如果内容没有溢出与clientWidth一致，如果内容溢会加上溢出的内容的宽度
scrollHeight 如果内容没有溢出与clientHeight一致，如果内容溢会加上溢出的内容的高度
getBoundingClientRect() 返回一个对象，对象中有 width 和 height 属性，获取盒子的尺寸，与 offsetWidth/offsetHeight 是一致的
如何获取视口的尺寸？
// 第一种方式 会包括滚动条本身的宽度
window.innerWidth;
window.innerHeight;
// 第二种方式 不会包括滚动条本身的宽度，推荐
document.documentElement.clientWidth
document.documentElement.clientHeight
9 读取元素的位置 （只读）
offsetLeft 元素在第一个定位的祖先元素上的位置，没有定位的祖先元素，参照整个页面
offsetTop 元素在第一个定位的祖先元素上的位置，没有定位的祖先元素，参照整个页面
clientLeft 元素左边框的宽度
clientTop 元素上边框的宽度
getBoundingClientRect() 返回一个对象，对象中有如下属性读取元素的位置
left 元素在视口上的位置，水平坐标
top 元素在视口上的位置，垂直坐标
x 同 left
y 同 top
right 元素右下角的水平坐标
bottom 元素右下角的垂直坐标
10 读写元素中内容的位置（可读可写）
scrollLeft 值变大，内容向左滚动（滚动滑块向右）
scrollTop 值变大，内容向上滚动（滚动滑块向下）
11 节点（元素）的创建添加删除替换克隆
11.1 创建元素节点
document.createElement('标签名'); // 返回创建好的元素
**注意：**新创建的元素并不在文档结构中！
11.2 添加子节点
① 在最后面添加子节点
父元素.appendChild(新节点);
② 指定位置添加子节点
父元素.insertBefore(新节点, 旧节点);
注意： 新的节点会在旧节点的前面！
11.3 删除子节点
父元素.removeChild(要删除的节点);
11.4 替换子节点
父元素.replaceChild(新节点, 旧节点);
11.5 节点克隆
元素.cloneNode(true)
注意： 方法的参数默认是false，只克隆自己，后代和内容不克隆； 设置参数为 true，自己和后代内容都克隆。
12 documnt 对象
属性：
lastModified 获取文档最后一次修改时间，只读
cookie 读写cookie信息，可读可写
all 获取文档中所有的元素，HTMLCollection，只读
documentElement 获取html元素，只读
body 获取body元素，只读
head 获取head元素，只读
title 读写页面标题，可读可写
方法：
write() 把内容写入文档
13 documentFragment 对象
13.1 创建 documentFragment 对象
document.createDocumentFragment();
14.2 documentFragment 对象的特点
1）documentFragment 也是一类节点， nodeType 是 11，并不是元素对象，它通常作为其他节点的一个临时的容器。
2）documentFragment 不是真实 DOM 树的一部分，它的变化不会触发 DOM 树的重新渲染，且不会导致性能等问题。
14.3 documentFragment 对象的应用
1）如果连续给一个元素添加多个子元素，可以先把子元素添加到 documentFragment 对象中，最后把 documentFragment 对象添加到父元素中，减少浏览器渲染次数。
2）利用 documentFragment 实现对一组元素进行倒序排列。
15 HTML DOM
15.1 表单相关元素
① form 元素
submit() 调用该方法，让表单提交
reset() 调用该方法，让表单重置
② 文本输入框和文本域（input 和 textarea）
blur() 失去焦点
focus() 获取焦点
select() 选中里面的文本
③ select 元素
属性：
length 下拉选项的数量（可读可写）
options 获取所有下拉选项的集合
selectedIndex 获取所选的下拉选项的索引
value 获取所选的下拉选项的value值
方法：
add() 添加一个下拉选项，参数是option元素
remove() 删除一个下拉选项，参数是要删除的下拉选项的索引
blur() 失去焦点
focus() 获取焦点
注意：
new Option()可以创建一个 option 元素，Option()构造函数的第一个参数指定下拉选项的文本内容，第二个参数指定下拉选项的value值。
15.2 表格相关元素
① table 元素
属性：
rows 获取表格中所有行元素的集合
cells 获取表格中所有单元格元素的集合
方法：
insertRow() 插入一行
deleteRow() 删除一行
② tableRow 元素（tr 元素）
属性：
cells 获取本行内所有的单元格元素的集合
rowIndex 本行的索引
方法：
insertCell() 插入一个单元格
deleteCell() 删除一个单元格
③ tableCell 元素 （td 或 th）
属性：
cellIndex 获取本单元格在行内的索引
15.3 快速创建 img 元素
new Image(); // 相当于 document.createElement('img')