JavaScript的文档对象模型（DOM）

文档对象模型(DOM)

DOM -Document Object Model，它是W3C国际组织的一套Web标准。它以树形结构表示文档
(HTML、XML等)，定义了遍历、检查和修改各节点的属性和方法。
W3C组织将DOM分为以下几种不同版本
Core DOM:定义任意结构文档的标准对象集合
XMLDOM:定义了针对XML文件的标准对象集合
HTML DOM:定义了针对HTML文件的标准对象集合
DOM CSS:定义了在程序中操作CSS样式的接口
DOM Events:给DOM对象添加事件处理
HTML DOM

HTMLDOM定义了访问和操作HTML文档的标准方法，它把HTML文档呈现为带有元素、属性和文本的树形结构，定义了访问HTML文档对象的属性、方法和事件。
HTML文档中的每个成分都是一个节点。
整个文档是一个文档节点
√每个HTML标签是一个元素节点
√包含在HTML元素中的文本是文本节点√每一个HTML属性是一个属性节点注释属于注释节点
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。

DOM(Document Object Model):文档对象模型可以干什么?
(1)获取一个元累(2)称除一个元素(3)创建一个元素
(4)同员面里泰加一个元意(5)给元素绑定一些事件(6)收取元素的属性
(7)航元素港加一些cs样式
DOM的核心对象就是document对象
document对象是浏览器内置对象的一个对象，里面存储着专门用来操作元素的各种方法

获取节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)
所包含的元素的标签名称永远是大写的
元素节点的nodeName是标签名称
属性节点的nodeName是属性名称
文本节点的nodeName永远是#text
文档节点的nodeName永远是#document

通过以下代码来获取标签

	<div id="div1">
			这是div1
		</div>
		<div id="div2">
			这是div2
		</div>
		<ul>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
			<li>列表项4</li>
		</ul>
		<span class="a">
		      	这是一个span标签
		      </span>
		<p class="sp"></p>

		<input type="button" id="c" value="开始" />
		<script type="text/javascript">
			document.getElementById("c").onclick = function() {
				//                    var div1=document.getElementById("div1")
				//                        div1.innerHTML="更改后的div1"
				//                       var div2=document.getElementById("div2")
				//                       div2.innerHTML="更改后的div2"
				
				//     //通过标签名来获取标签
				     var divs=document.getElementsByTagName("div")
				             console.log(divs)
				             for(var i=0;i<divs.length;i++){
				             	console.log(divs[i])
				             	divs[i].innerHTML="更新后的DIV"

				             }
				             
			}
		</script>