DOM

定义

DOM(文档对象模型,Document Object Model),可以理解为样式和内容，结构的结合体,对文档内容进行抽象。

DOM 节点

nodeType 获取节点类型
nodeName 获取元素标签名称
nodeValue 获取文本和注释的内容

常用的节点

Element （元素节点）	1	ELEMENT_NODE
Attr （属性节点）	2	ATTRIBUTE_NODE
Text （文本节点）	3	TEXT_NODE
Comment （注释节点）	8	COMMENT_NODE
Document （文档类型节点）	9	DOCUMENT_NODE
DocumentType （文档类型节点）	10	DOCUMENT_TYPE_NODE
DocumentFragment （文档片段节点）	11	DOCUMENT_FRAGMENT_NODE

根结点 document

nodeType:9 nodeName: #document

元素节点 Element

document.documentElement: html
document.head: head
document.body: body

nodeType:1 nodeName: 大写元素标签

文本节点 Text

nodeType:3 nodeName: #text

注释节点 Comment

nodeType:8 nodeName: #comment

父节点

parentNode 获取父节点,一般用这个 parentElement ie 支持，功能类似

document.documentElement.parentNode; // => the document node
document.documentElement.parentElement; // => null

子节点

childNodes: 子节点，包括文本节点，返回集合nodelist
firstChild: 第一个子节点
lastChild: 最后一个子节点
children: 元素的子节点
firstElementChild: 第一个子元素节点
lastElementChild: 最后一个子元素节点

兄弟节点

previousSibling ：前一个兄弟节点
nextSibling ：下一个兄弟节点
previousElementSibling ：前一个兄弟元素节点
nextElementSibling ：后一个兄弟元素节点

创建节点

createElement: 创建一个元素节点
createTextNode: 创建一个文本节点
document.createDocumentFrame ：创建文档片段
document.createAttribute ：创建节点属性
document.adoptNode ：从外部文档中获取一个节点
document.importNode ：拷贝外部文档的一个节点
node.cloneNode ：克隆节点
node.textContent: 获取或设置元素节点的文本内容
node.innerHTML ：获取或设置元素的HTML内容

插入节点

node.appendChild() ：添加一个节点作为父元素的最后一个子元素
node.insertBefore() ：在指定的同级节点前将节点插入父元素
node.replaceChild() ：用一个新节点替换现有节点

删除节点

node.removeChild() ：删除子节点
node.remove() ：删除节点

视口位置

window: 浏览器中打开的窗口

document: 属于 window，是 html 文档

window.screen.width：显示器屏幕的宽度 window.screen.height：显示器屏幕的高度 window.screen.availHeight：浏览器窗口在屏幕上可占用的垂直空间，即最大高度 window.screen.availWidth：返回浏览器窗口可占用的水平宽度 window.screenTop：浏览器窗口在屏幕上的可占用空间上边距离屏幕上边界的距离 window.screenLeft：返回浏览器可用空间左边距离屏幕（系统桌面）左边界的距离

window.outerHeight: 浏览器高度 window.innerHeight: 浏览器高度-工具栏高度(ie9 以上) window.outerWidth: 浏览器宽度 widnow.innerWidth: 浏览器宽度-侧边栏宽度，镶边等边框(ie9 以上)

document.documentElement.clientHeight:浏览器高度-滚动条高度 document.body.clientHeight: 浏览器高度-滚动条高度-html 元素的边框-body 的边框和滚动条

offsetHeight/offsetWidth: 元素的像素高度/宽度，包含边框，内边距，滚动条 clientHeight/clientWidth：元素可见区的高度/宽度，不包含滚动条 scrollHeight 和 scrollWidth：元素整个的高度/宽度

offsetLeft/offsetTop: 元素左上角相对于 offsetParent 的左边界的偏移值 clientLeft/clientTop: border 的宽度 scrollLeft/scrollTop: 滚动的高度和宽度 offsetParent: 包含父级定位元素，如果没有则为根元素，display 为 none 或者 fixed 时，返回 null

window.pageYOffset/document.documentElement.scrollTop: html 页面的滚动高度 window.pageXOffset/document.documentElement.scrollLeft: html 页面的滚动宽度