DOM简介:
说明: DOM(Document Object Model)文档对象模型,当网页被加载到WEB浏览器时,DOM树就自动被创建.它代表被加载到浏览器窗口里的当前网页,通过DOM树可以快速定位DOM对象中的元素或节点.
注意: 如下内容并非专属于Js,而是DOM核心,也就是支持DOM的任何一种程序设计语言都可以使用它们,而且用途并不局限于处理网页,它们可以用来处理任何一种标记语言如XML文档
节点分类:
元素节点
说明: 文档内的标签元素都属于元素节点,没有被包含在其它元素里的唯一元素是<HTML>元素,它是我们节点数的根元素节点
属性节点
说明: 元素或多或少有一些属性,属性的作用是对元素做出更具体的描述,属性节点总是被放在起始标签里,所以属性节点总是被包含在元素节点中,并非所有的元素都包含着属性,但是所有的属性都被包含在元素里
文本节点
说明: 文本节点总是被包含在元素节点内部,但并非所有的元素节点都包含有文本节点
获取节点:
| 方法名称 | 方法说明 |
| body | 返回body元素对象 |
| getElementById(id) | 返回当前对象下指定id属性值对应的元素节点对象, |
| getElementsByTagName(name) | 返回当前对象下的name元素的对象数组,name可以是通配符*,将返回当前对象下的所有元素节点 |
var shopping = document.getElementById(‘purchases‘)
var items = shopping.getElementsByTagName(‘*‘)
for(var i=0; i<items.length; i++){
console.log(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<pArr.length; i++){
// 获取对应元素对象title属性值
var title = pArr[i].getAttribute(‘title‘)
// 如果存在就替换元素对象title属性值
if(title){
alert(title)
pArr[i].setAttribute(‘title‘, ‘limanman: ‘+title)
alert(pArr[i].getAttribute(‘title‘))
}
}
注意: 网上有时候会看到通过element.attr来获取或设置元素对象的属性,但是它并不是支持所有的元素,所以强烈推荐大家使用getAttribute(attr)和setAttribute(attr, value)代替它.
时间： 2024-10-14 06:20:44