DOM（一）

document object model （文档对象模型）

它是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档内容，结构和模式。

1.DOM中节点种类（三种）

<div title = "属性节点">测试Div</div>

1. 元素节点
2. 属性节点 title = “属性节点”
3. 文本节点 测试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()
【相同点】三个都是操作当前元素节点中某个属性的
【注】它和直接使用 .属性 获取属性值的方法有一定区别。
【区别】

1. class属性范围的区别，点操作是通过className，而set/getAttribute()是通过class。
2. set/getAttribute()是用户自定义属性支持
3. removeAttribute()可以将属性值直接删掉的，而.属性 只能将属性值改成空。

dom元素节点属性

childNodes 获取当前元素节点的所有子节点，包括两种节点类型即元素节点和文本节点。
【object NodeList 装有当前元素节点所有的子节点列表。】