DOM操作

DOM操作
DOM
DOM: 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展 标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构 中，用来表示文档中对象的标准模型就称为 DOM。
节点: 加载 HTML 页面时，web 浏览器生成一个树型结构，用来表示页面内部结构，称之为
DOM 树，DOM 将这种树型结构理解为由节点组成。
子节点
获取子节点
父节点 .children，children 属性返回保存子元素的集合，是一个
HTMLCollection 对象
父节点 .childNodes，childNodes 中保存着一个 NodeList 对象。NodeList 是一种
类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点
节点基本属性
nodeType: 用于表明节点的类型 标签 --1 属性 --2 文本—3
nodeName：获取标签节点的标签名。
nodeValue：获取文本节点的内容。
父节点
parentNode: 父节点
offsetParent: 距离自己最近的定位的父元素, 如果都没有定位就是body
其他节点
父元素. firstElementChild || 父元素.firstChild : 父元素第一个子元素
父元素. lastElementChild || 父元素.lastChild : 父元素最后一个子元素
元素.nextElementSibling || 元素.nextSibling : 下一个兄弟元素
元素.previousElementSibling || 元素.previousSibling : 上一个兄弟元素
节点操作
createElement: 创建节点, 该方法接受一个标签名字符串，返回一个标签对象的引用。
createTextNode: 创建文本节点
appendChild: 拼接子节点
insertBefore(): 该接受两个参数要插入的节点和作为参照的节点
remove(): 移除元素(本身)
removeChild(): 移除子元素
replaceChild() 方法接受的两个参数是： 要插入的节点和要替换的节点。
cloneNode() 方法拷贝节点并返回节点副本，接受一个参数是：布尔值，是否需要克隆所有后代。默认是 false，只复制标签，不复制内容；true 表示复制标签和内容。
获取元素
document.querySelector(selectors[, NSResolver])，该方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素
document.querySelectorAll(selectors[, NSResolver])，该方法接收一个 CSS 选择符，返回的是所有匹配的元素而不仅仅是一个元素。
getAttribute() 接受一个参数方法通过名称获取属性的值。
setAttribute() 接受两个参数，需要设置的属性，属性的值。