JavaScript基础（六） DOM模型

浏览数：24 / 时间：2015年06月08日

一、文档对象模型

　　DOM（ Document Object Model）文档对象模型，它提供了访问、动态修改文档的借口，W3C指定了DOM规范，主流浏览器都支持。DOM由3部分组成，分别是CoreDom、XML DOM和HTML DOM。

　　1、Core DOM:也称核心DOM变成，定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML和XML。

　　2、XML DOM：定义了一套标准的针对XML文档的对象。

　　3、HTML DOM：定义了一套标准的针对HTML文档的对象。

二、认识DOM节点树。

　　DOM以树形结构组织HTML文档，文档中每个标签或者元素都是一个节点，各个节点之间都存在着关系。

三、访问DOM节点。

　　1、使用getElement系列方法访问指定节点。

　　　　（1）getElementById()：返回对拥有指定id的对一个对象的引用。

<script type="text/javascript">
function getValue()
{
　　var x=document.getElementById("myHeader");  //点击标题，弹出标题的值。
　　alert(x.innerHTML);
}
</script>
<body>
<h1 id="myHeader" onclick="getValue()">这是标题</h1>
</body>
</html>

　　　　（2）getElementsByName()：返回带有指定名称的对象的集合。

<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("myInput");   //获取页面中名字为myInput文本框的个数。数量为3
  alert(x.length);
  }
</script>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名为 ‘myInput‘ 的元素有多少个？" />

　　　　（3）getElementsByTagName()：返回带有指定标签名的对象的集合。

<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");  //获取页面中标签名字为input的文本框。数量为4
  alert(x.length);
  }
</script>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements?" />