JS---DOM概述
DOM
DOM：文档对象模型document object model
DOM三层模型：
DOM1；将HTML文档封装成对象
DOM2：将XML文档封装成对象
DOM3：将XML文档封装成对象
DOM树：将HTML中的标签按照层级关系封装成节点对象
DOM的出现使静态的HTML页面的标签变为动态的可操作的节点对象
DHTML：动态的HTML，是HTML、CSS、DOM、JavaScript四种技术的综合体
HTML：封装页面数据
CSS：设置标签中的数据样式
DOM：将标签封装成对象
JavaScript：将三者进行融合，通过程序设计方式完成动态效果的操作
标记型文档一加载进内存，内存中就产生了相应的DOM树，由此产生的弊端就是，文档国大时，消耗资源。对于大型文档，可用SAX方式解析。
HTML文档中的层次关系，DOM树的层次结构
document HTML文档对象
|——head
|——title
|——base
|——meta
|——link
|——body
|——form
|——input
|——select
|——textarea
|——div
|——table
|——tbody 默认都有，不写也有
|——tr
|——td
|——th
|——a
……
将HTML文档及其中的标签都封装成对象，方便操作。
节点都有的属性：nodeName nodeType nodeValue
注意区分DOM代码中对象的属性和HTML、CSS代码中的属性写法上的不同
节点类型
标签型节点：nodeType为1，容器型节点的nodeValue为空null 没有值
文本型节点：名字#text 类型为3
注释型节点：#comment 类型为8
文档型节点：#document 类型为9
属性型节点：类型为2 属性可通过对象的attributes集合属性获取
节点关系
父节点：每个节点有且只有一个父节点 通过节点parentNode属性获取
子节点：可以有多个 通过节点childNodes属性获取子节点集合（数组）
兄弟节点：分上一个和下一个，通过previousSibling和nextSibling属性获取
注意页面中标签之间的空行也是文本节点，浏览器解析时可能出现也可能没有这个节点
获取节点的方法：
1、getElementById(HTML标签中定义的id值)
获取文档中指定id对应的标签对象，注意保证id值唯一；
如果多个标签id相同，获取的是id对应的第一个对象
<script type=”text/javascript”>
var divObj = document.getElementById(“divid”);
divObj.style.backgroundColor=”blue”;注意DOM代码与CSS代码的不同
</script>
<html>
<div id=”divid” style=”background-color:red”>div内部数据</div>
style属性中的内容为CSS代码，注意区分DOM中的相同属性名称
</html>
2、getElementsByName(HTML标签中定义的name值)
获取文档中所有与name值相同的标签对象，封装为数组返回
3、getElementsByTagName(HTML标签名)
获取文档中与指定标签名相同的所有对象，返回数组
容器型标签中都有该方法，如div、table、p
