DOM的基本操作

DOM的概念：DOM是”Document Object Model”的首字母缩写，即文档对象模型。用来描绘一个层次化的节点树，允许开发人员获取、添加、移除和修改页面 的某一部分元素。

DOM的基本操作

1.查询、创建、添加、删除、克隆、替换（方法）

getElementById（）//获取特定 ID 元素的节点 - - 最优

getElementsByTagName（）//获取相同元素的节点列表，返回类数组，使用[ 0 ]来获取

getElementsByClassName（）获取相同类名的节点列表（IE8及以下不支持），返回类数组

querySelector（）//通过选择器获取元素，如果获取多个值返回第一个

querySelectorAll（）//通过选择器获取元素，可以同时获取多个，并将返回值创建类数组

document.createElement（元素节点）//创建一个元素节点，参数是创建的元素，追加给文档

父节点.appendChild（子节点）//把子节点插入到父节点的内部最后的位置

父节点.insertBefore（新的节点，存在节点）//在父节点内，把新的元素节点插入到已经存在的元素节点前面

父节点.removeChild（子节点）//删除父节点内部的子节点（remove方法：删除元素自身）

元素节点.cloneNode（true）//克隆（复制）元素节点，如果参数为 true，连同元素节点子元素一起克隆

父节点.replaceChild（新节点，被替换的节点）//替换子节点

元素属性的操作

1.利用方法操作

getAttribute（）//获取特定元素节点属性的值，包括自定义属性和默认属性

setAttribute（）//设置特定元素节点属性的值，包括自定义属性和默认属性

removeAttribute（）//移除特定元素节点属性，包括自定义属性和默认属性

2.dataset 属性操作

HTML5中我们可以使用 data- 前缀设置我们需要的自定义属性，来进行一些数据的存放，这里的 data- 前缀就被称为 data 属性，数量不受限制，在控制和渲染数据的时候提供了非常强大的控制；

3.对象方式操作：点符号和中括号

读写元素内部的结构内容

innerHTML：读写元素节点里的内容（包括元素），从节点起始位置到终止位置全部内容，包括内部的元素；

outerHTML：读写元素节点里的内容（包括元素），除了包含innerHTML全部内容外，还包含元素节点本身；

innerText：读写某个元素节点的文本内容；

读写 css 样式的值

1.获取 css 属性值，仅读取，没有单位

offsetWidth/offsetHeight：获取盒模型的尺寸

offsetLeft/offsetTop：获取元素相对可视区的位置，无论是否有定位，都可以获取

offsetParent：获取元素的定位父级

2.获取任意的 css 属性值

getComputedStyle - 标准浏览器 -

currentStyle - 非标准浏览器 -

3.设置 CSS样式

逐个设置

cssText 设置

style 设置

选择器设置

DOM元素类型 - 高级DOM操作

节点可以分为元素节点、属性节点和文本节点 . . . ，他们分别用不同的数字代表类型 例如：元素（1） 属性（2） 文本（3） 注释（8）

每个节点又有三个非常有用的属性，分别为：nodeName、nodeType、nodeValue

childNodes 获取当前元素节点的所有子节点，这里面包含空白节点，但在IE9以前，IE浏览器都会自动忽略空白节点

childNodes与children的区别：children不考虑空白节点，而childNodes考虑空白节点，而且他们都是类数组。

parentNode 获取当前节点的父节点

了解节点高级选取

高级选取：第一个子节点，最后一个子节点，上一个兄弟节点，下一个兄弟节点（包含空白和不包含空白等分成8个属性）

firstChild：第一个子节点（包含空白）

firstElementChild：第一个子节点（不包含包含空白）

previousSibling：上一个兄弟节点（包含包含空白节点）

previousElementSibling：上一个兄弟节点（不包含包含空白）

lastChild：最后一个子节点（包含空白）

lastElementChild：最后一个子节点（不包含包含空白）

nextSibling：下一个兄弟节点（包含包含空白）

nextElementSibling：下一个兄弟节点（不包含包含空白）