document object model (文档对象模型)
它是中立于平台和语言的接口,它允许程序和脚本动态的访问和更新文档内容,结构和模式。
1.DOM中节点种类(三种)
<div title = "属性节点">测试Div</div>
- 元素节点
- 属性节点 title = “属性节点”
- 文本节点 测试Div
【注】在js中所有节点都是对象。
元素节点属性
(通过这个节点对象,访问他的一系列属性)
window.onload//在页面加载完成以后执行的函数
document.getElementById(id);//通过当前元素节点的id,获取对应元素节点。
tagName 获取元素节点的标签名
innerHTML 获取元素节点标签间的内容 解析标签。
HTML属性的属性
属性名 | 说明 |
---|---|
id | 元素节点的id名称 |
title | 元素节点的title属性值 |
style | CSS内联样式属性值 |
className | CSS元素的类 |
访问这些属性
1.元素节点.属性名
2.元素节点[属性名]
【注】在style样式中,background-color使用-链接的属性访问的时候,需要将-去掉,然后将后续单词的首字母大写。
document.getElementsByTagName()
参数:标签名
获取当前页面上所有符合该标签名标准的元素节点。
返回值:一个装有符合条件的元素节点的数组。
node.getElementsByTagName()
【注】从node节点开始,找出所有符合条件的元素节点。
获取第i个元素节点方法:
alert(aLis[i]);
alert(aLis.item(i));
document.getElementsByName()
【注】不支持从某个节点去查,只能从document去查元素节点。
name属性一般情况下,只有文本输入框的元素节点才有。
参数:name值
返回值:装有符合条件的元素节点的数组
node.getElementsByClassName();
参数:class
返回值:所有符合条件的元素节点组成的数组
获取所有node节点下,所有符合条件的元素节点。
【注】getElementsByClassName()在低版本IE浏览器不支持。封装函数,封装一个兼容的方法。
dom获取当前样式
1.getComputedStyle(元素样式)[获取样式类型];火狐/谷歌/safari支持
2.元素节点.currentStyle[获取样式类型];IE
dom的attribute方法
getAttribute()
setAttribute()
removeAttribute()
【相同点】三个都是操作当前元素节点中某个属性的
【注】它和直接使用 .属性 获取属性值的方法有一定区别。
【区别】
- class属性范围的区别,点操作是通过className,而set/getAttribute()是通过class。
- set/getAttribute()是用户自定义属性支持
- removeAttribute()可以将属性值直接删掉的,而.属性 只能将属性值改成空。
dom元素节点属性
childNodes 获取当前元素节点的所有子节点,包括两种节点类型即元素节点和文本节点。
【object NodeList 装有当前元素节点所有的子节点列表。】