DOM简介:

说明: DOM(Document Object Model)文档对象模型,当网页被加载到WEB浏览器时,DOM树就自动被创建.它代表被加载到浏览器窗口里的当前网页,通过DOM树可以快速定位DOM对象中的元素或节点.

注意: 如下内容并非专属于Js,而是DOM核心,也就是支持DOM的任何一种程序设计语言都可以使用它们,而且用途并不局限于处理网页,它们可以用来处理任何一种标记语言如XML文档


节点分类:

元素节点

说明: 文档内的标签元素都属于元素节点,没有被包含在其它元素里的唯一元素是元素,它是我们节点数的根元素节点

属性节点

说明: 元素或多或少有一些属性,属性的作用是对元素做出更具体的描述,属性节点总是被放在起始标签里,所以属性节点总是被包含在元素节点中,并非所有的元素都包含着属性,但是所有的属性都被包含在元素里

文本节点

说明: 文本节点总是被包含在元素节点内部,但并非所有的元素节点都包含有文本节点


获取节点:

方法名称 方法说明
body 返回body元素对象
getElementById(id) 返回当前对象下指定id属性值对应的元素节点对象,
getElementsByTagName(name) 返回当前对象下的name元素的对象数组,name可以是通配符*,将返回当前对象下的所有元素节点 
var shopping = document.getElementById('purchases')
var items = shopping.getElementsByTagName('*')
for(var i=0; i' + items[i].innerText)
}


节点属性:

属性名称 属性说明
childNodes 表示给定元素节点下的所有子元素节点组成的数组(不包含本元素),包含元素节点,文本节点,属性节点
firstChild 返回给定元素下的第一个子元素节点,可能是元素节点,属性节点,文本节点
lastChild 返回给定元素下的最后个子元素节点,可能是元素节点,属性节点,文本节点
nodeType 返回给定元素节点类型,返回1表示元素节点,返回2表示属性节点,返回3表示文本节点
nodeName 返回节点大写名称
nodeValue 表示节点的值,元素节点为null,属性节点为属性值,文本节点为文本值
方法名称 方法说明
onclick 返回或设置鼠标点击处理事件
onmouseover 返回或设置鼠标悬停处理事件
onmouseleave 返回或设置鼠标离开处理事件
getAttribute(attr) 返回元素对象的属性attr对应的属性值,如果没有值则返回null
setAttribute(attr, value) 设置元素对象的属性attr对应的属性值为value 
// 获取p元素对象数组
var pArr = document.getElementsByTagName('p')
for(var i=0; i 
  
 
  
注意: 网上有时候会看到通过element.attr来获取或设置元素对象的属性,但是它并不是支持所有的元素,所以强烈推荐大家使用getAttribute(attr)和setAttribute(attr, value)代替它.