javascript的DOM对象

DOM

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

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

DOM节点

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

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

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

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

注释属于注释节点

整个文档是一个文档节点

<a href=http://www.baidu.com>百度</a>
节点对象.nodeType
节点对象.nodeName

DOM节点树

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

节点树

获取元素节点对象

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

获取所有节点

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

常用元素节点对象

document.documentElement
document.head
document.title
document.body

常用元素节点对象集合

document.all 
document.forms
document.images
document.links 
document.anchors有name属性的a链接的集合

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

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

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

for(var i=0;i<节点对象集合.length;i++){
节点对象集合[i]
 }
for(i in 节点对象集合){
 节点对象集合[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("新节点名","节点名")

创建元素节点对象

删除元素节点对象

父节点对象.removeChild("子节点对象")

删除节点

替换子节点对象

父节点对象.replaceChild("新节点","旧节点")

节点替换

喜欢的朋友点个关注，不迷路。每天和大家见面。