Java Script基礎（六） DOM模型

時間 2019-11-24

標籤 java script 基礎 dom 模型欄目 Java 简体版

原文原文鏈接

1、文檔對象模型javascript

　　DOM（ Document Object Model）文檔對象模型，它提供了訪問、動態修改文檔的藉口，W3C指定了DOM規範，主流瀏覽器都支持。DOM由3部分組成，分別是CoreDom、XML DOM和HTML DOM。html

　　一、Core DOM:也稱核心DOM變成，定義了一套標準的針對任何結構化文檔的對象，包括HTML、XHTML和XML。java

　　二、XML DOM：定義了一套標準的針對XML文檔的對象。node

　　三、HTML DOM：定義了一套標準的針對HTML文檔的對象。瀏覽器

2、認識DOM節點樹。app

　　DOM以樹形結構組織HTML文檔，文檔中每一個標籤或者元素都是一個節點，各個節點之間都存在着關係。dom

3、訪問DOM節點。spa

　　一、使用getElement系列方法訪問指定節點。firefox

　　　　（1）getElementById()：返回對擁有指定id的對一個對象的引用。code

<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?" />