DOM

HTML 文档对象模型(HTML Document Object Model)定义了所有 HTML 元素的对象和属性，以及访问和处理它们的方法

HTML DOM 就是关于如何获取、修改、添加或删除 HTML 元素的标准

DOM节点

根据 DOM，HTML 文档中的每个成分都是一个节点

每个 HTML 标签是一个元素节点

每一个 HTML 属性是一个属性节点

包含在 HTML 元素中的文本是文本节点

注释属于注释节点

整个文档是一个文档节点

百度节点对象.nodeType节点对象.nodeName

DOM节点树

HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止

节点树

获取元素节点对象

document.getElementById("ID")//根据id 获取节点document.getElementsByTagName("标签名称")//根据标签 获取节点document.getElementsByClassName("类名");//根据类获取节点document.getElementsByName("name属性值")//根据属性 获取节点document.getElementById('ID').getElementsByTagName("标签名称");//根据标签获取节点

获取所有节点

获取常用元素对象和对象集合

常用元素节点对象

document.documentElementdocument.headdocument.titledocument.body

常用元素节点对象集合

document.all document.formsdocument.imagesdocument.links document.anchors有name属性的a链接的集合

获取父、子和同胞节点对象

节点对象.parentNode节点对象.childNodes节点对象.firstChild节点对象.lastChild节点对象.previousSibling节点对象.nextSibling节点对象.elements

获取父、子和同胞节点对象

for(var i=0;i

获取元素节点对象标签名

元素对象.tagName

元素对象.nodeName

示例:document.getElementById("demo").tagName

获取及设置元素节点对象属性

获取元素对象属性：

方法1：元素对象.属性名

方法2：元素对象.getAttribute('属性名')

设置元素对象属性：

方法1：元素对象.属性名='属性值'

方法2：元素对象.setAttribute('属性名','属性值')

属性设置和获取

获取及设置元素节点对象内容

元素对象.innerHTML

元素对象.outerHTML

元素对象.textContent

表单元素对象.value

内容获取和设置

获取及设置元素节点对象样式

元素对象.className="类名"

因为属性名class在JS中为关键字，所在此处写做className

元素对象.style.css属性名="属性值"

如果css属性名带有短横线 "-" ,则须做以下处理

如：background-color要写成backgroundColor

样式的设置和修改

创建元素节点对象

document.createElement("标签名称")

节点对象.appendChild("子节点名")

节点对象.insertBefore("新节点名