JS-DOM

DOM：

Document Object Model （文档对象模型）

使用 JavaScript 能够去操作页面文档中的各元素的添加、修改、删除、克隆、查找等，或操作CSS

（1）JavaScript 能够改变页面中的所有 HTML 元素

（2）JavaScript 能够改变页面中的所有 HTML 属性

（3）JavaScript 能够改变页面中的所有 CSS 样式

（4）JavaScript 能够对页面中的所有事件做出反应

Document对象：

window.document 或 document 来引用

查找元素节点：

（1）document.getElementById() -- 根据元素的 id 属性查找

如果能够查找到，则返回查找到的DOM元素对象，如果不能查找到，则返回 null

（2）document.getElementsByTagName() -- 根据元素的标签名查找

返回 HTMLCollection 集合，如果根据标签能够查找到元素，则将所有查找到的元素保存到集合中，如果不能查找到，则集合长度为0

（3）document.getElementsByClassName() -- (ES5)根据类名查找元素

返回 HTMLCollection 集合，如果根据类名能够查找到元素，则将所有查找到的元素保存到集合中，如果不能查找到，则集合长度为0

（4）document.getElementsByName() -- 根据元素的 name 属性值查找

添加

创建元素节点：

var element = document.createElement(tagName)

设置属性：

element.setAttribute(attrName, attrValue) 或 element. = attrValue

添加到父元素内部

parentElement.appendChild(element);

如果 element 是页面中已存在的DOM元素，则该方法为移动元素

添加到父元素内部某子节点前

parentElement.insertBefore(newNode, oldNode);

如果 oldNode 不存在，则将 newNode 追加到末尾

元素内部文本：

（1）element.innerHTML-- 内部HTML文本

（2）element.innerText-- 内部纯文本

创建文本节点：var txtNode = document.createTextNode(text)

可以将文本节点添加到元素内部：element.appendChild(txtNode);

删除

父元素内部删除孩子节点

parentElement.removeChild(childNode)

克隆

var copy = node.cloneNode(boolean)

注意点：boolean 表示是否克隆元素后代，默认为 false（不克隆），如果需要克隆节点后代，则传递 true

查找(层级--属性)：

（1）node.parentNode -- 查找父节点

（2）node.childNodes -- 所有孩子节点

（3）node.children -- 所有孩子元素节点

（4）node.firstChild -- 第一个孩子

（5）node.lastChild -- 最后一个孩子

（6）node.previousSibling -- 前一个兄弟节点

（7）node.nextSibling -- 后一个兄弟节点

CSSOM

CSS-Object Model

获取：

（1）行内（内联）样式：

element.style

（2）所有样式：

window.getComputedStyle(element) -- 经过计算后的样式

-- IE9之前浏览器只支持：element.currentStyle

设置：

element.style. = attrValue;