DOM 是Document Object Model( 文档对象模型 )的缩写。
DOM是把html里面的各种数据当作对象进行操作的一种思路。
1.节点概念
DOM把所有的html都转换为节点 整个文档 是一个节点 元素 是节点 元素属性 是节点 元素内容 是节点 注释 也是节点
2.获取节点
1）通过id获取元素节点：document.getElementById
在设计html的时候，一个元素对应的id应该是唯一的。
<html> <div id="d1">hello HTML DOM</div> <script> var div1 = document.getElementById("d1"); document.write(div1); </script> </html>2）通过标签名称获取元素节点：getElementsByTagName
<html> <div >hello javascript</div> <div >hello BOM</div> <div >hello DOM</div> <br> <script> var divs = document.getElementsByTagName("div"); for(i=0;i<divs.length;i++){ document.write(divs[i]); document.write("<br>"); } </script> </html>for in 不能遍历dom对象。 遍历dom对象会把方法什么也遍历出来 。 for in 只能遍历普通的数组和 json。
3）通过类名获取元素节点：getElementsByClassName
4）通过表单元素的name获取元素节点：getElementsByName
5）获取属性节点：attributes
首先通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue。
如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as[“id”]取出名称是id的属性。 as[“id”].nodeValue
6）获取内容节点：childNodes
首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。 然后借助nodeName和nodeValue把内容节点的名称和值打印出来。
3.节点的属性
1）节点名称：nodeName
2）节点值：nodeValue
3）节点类型：nodeType
4）元素的文本内容：innerHTML
5）元素上的属性：id、value、className
4.样式 一个元素节点的style属性即对应的css 例如：改变背景色
<div id="d1" style="background-color:pink">Hello HTML DOM</div> <button onclick="change()">改变div的背景色</button> <script> function change(){ var d1 = document.getElementById("d1"); d1.style.backgroundColor="green"; } </script>5.节点关系
1）父节点
2）同胞节点
3）子节点
