經過 DOM

時間 2019-12-09

標籤經過 dom 欄目 HTML 简体版

原文原文鏈接

經過 DOM，您可訪問 HTML 文檔中的每一個節點。javascript

查找並訪問節點

你可經過若干種方法來查找您但願操做的元素：html

經過使用 getElementById() 和 getElementsByTagName() 方法
經過使用一個元素節點的 parentNode、firstChild 以及 lastChild 屬性

getElementById() 和 getElementsByTagName()

getElementById() 和 getElementsByTagName() 這兩種方法，可查找整個 HTML 文檔中的任何 HTML 元素。java

這兩種方法會忽略文檔的結構。假如您但願查找文檔中全部的 元素，getElementsByTagName() 會把它們所有找到，無論 元素處於文檔中的哪一個層次。同時，getElementById() 方法也會返回正確的元素，不論它被隱藏在文檔結構中的什麼位置。node

這兩種方法會像您提供任何你所須要的 HTML 元素，不論它們在文檔中所處的位置！測試

getElementById() 可經過指定的 ID 來返回元素：this

getElementById() 語法

document.getElementById("ID");

註釋：getElementById() 沒法工做在 XML 中。在 XML 文檔中，您必須經過擁有類型 id 的屬性來進行搜索，而此類型必須在 XML DTD 中進行聲明。spa

getElementsByTagName() 方法會使用指定的標籤名返回全部的元素（做爲一個節點列表），這些元素是您在使用此方法時所處的元素的後代。指針

getElementsByTagName() 可被用於任何的 HTML 元素：code

getElementsByTagName() 語法

document.getElementsByTagName("標籤名稱");

或者：htm

document.getElementById('ID').getElementsByTagName("標籤名稱");

實例 1

下面這個例子會返回文檔中全部 元素的一個節點列表：

document.getElementsByTagName("p");

實例 2

下面這個例子會返回全部 元素的一個節點列表，且這些 元素必須是 id 爲 "maindiv" 的元素的後代：

document.getElementById('maindiv').getElementsByTagName("p");

節點列表（nodeList）

當咱們使用節點列表時，一般要把此列表保存在一個變量中，就像這樣：

var x=document.getElementsByTagName("p");

如今，變量 x 包含着頁面中全部 元素的一個列表，而且咱們能夠經過它們的索引號來訪問這些 元素。

註釋：索引號從 0 開始。

您能夠經過使用 length 屬性來循環遍歷節點列表：

var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++)
  { 
  // do something with each paragraph
  }

您也能夠經過索引號來訪問某個具體的元素。

要訪問第三個 元素，您能夠這麼寫：

var y=x[2];

parentNode、firstChild以及lastChild

這三個屬性 parentNode、firstChild 以及 lastChild 可遵循文檔的結構，在文檔中進行「短距離的旅行」。

請看下面這個 HTML 片斷：

<table>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>Alaska</td>
  </tr>
</table>

在上面的HTML代碼中，第一個 <td> 是 <tr> 元素的首個子元素（firstChild），而最後一個 <td> 是 <tr>元素的最後一個子元素（lastChild）。

此外，<tr> 是每一個 <td>元素的父節點（parentNode）。

對 firstChild 最廣泛的用法是訪問某個元素的文本：

var x=[a paragraph];
var text=x.firstChild.nodeValue;

parentNode 屬性常被用來改變文檔的結構。假設您但願從文檔中刪除帶有 id 爲 "maindiv" 的節點：

var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);

首先，您須要找到帶有指定 id 的節點，而後移至其父節點並執行 removeChild() 方法。

根節點

有兩種特殊的文檔屬性可用來訪問根節點：

document.documentElement
document.body

第一個屬性可返回存在於 XML 以及 HTML 文檔中的文檔根節點。

第二個屬性是對 HTML 頁面的特殊擴展，提供了對 <body> 標籤的直接訪問。

nodeName、nodeValue 以及 nodeType 包含有關於節點的信息。

節點信息

每一個節點都擁有包含着關於節點某些信息的屬性。這些屬性是：

nodeName（節點名稱）
nodeValue（節點值）
nodeType（節點類型）

nodeName

nodeName 屬性含有某個節點的名稱。

元素節點的 nodeName 是標籤名稱
屬性節點的 nodeName 是屬性名稱
文本節點的 nodeName 永遠是 #text
文檔節點的 nodeName 永遠是 #document

註釋：nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的

nodeValue

對於文本節點，nodeValue 屬性包含文本。

對於屬性節點，nodeValue 屬性包含屬性值。

nodeValue 屬性對於文檔節點和元素節點是不可用的。

nodeType

nodeType 屬性可返回節點的類型。

最重要的節點類型是：

一個 HTML DOM 的實例

下面這個例子向咱們展現了當一個用戶在文檔中點擊時，HTML 文檔的背景顏色如何被改變。

<html>

<head>
<script type="text/javascript">
function ChangeColor()
{
document.body.bgColor="yellow"
}
</script>
</head>

<body onclick="ChangeColor()">
Click on this document!
</body>

</html>

Event 對象

測試點擊了鼠標的哪一個鍵鼠標光標的座標

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
if (event.button==2)
{
alert("您點擊了鼠標右鍵！")
}
else
{
alert("您點擊了鼠標左鍵！")
}
}
</script>
</head>

<body onmousedown="whichButton(event)">
<p>請在文檔中點擊。一個消息框會提示出你點擊了哪一個鼠標按鍵。</p>
</body>

</html>

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX       <--event.screenX   event.screenY  取相對於全屏的座標XY-->
y=event.clientY
alert("X 座標: " + x + ", Y 座標: " + y)
}
</script>
</head>

<body onmousedown="show_coords(event)">

<p>請在文檔中點擊。一個消息框會提示出鼠標指針的 x 和 y 座標。</p>

</body>
</html>

相對於屏幕取座標點

<html>
<head>

<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}

</script>
</head>
<body onmousedown="coordinates(event)">

<p>
在文檔中點擊某個位置。消息框會提示出指針相對於屏幕的 x 和 y 座標。
</p>

</body>
</html>

<html>
<head>
<script type="text/javascript">
function isKeyPressed(event)
{
  if (event.shiftKey==1)
    {
    alert("The shift key was pressed!")
    }
  else
    {
    alert("The shift key was NOT pressed!")
    }
  }
</script>
</head>

<body onmousedown="isKeyPressed(event)">

<p>在文檔中點擊某個位置。消息框會告訴你是否按下了 shift 鍵。</p>

</body>
</html>

<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
   targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>

<body onmousedown="whichElement(event)">
<p>在文檔中點擊某個位置。消息框會提示出您所點擊的標籤的名稱。</p>

<h3>這是標題</h3>
<p>這是段落。</p>
<img src="../i/eg_mouse2.jpg" tppabs="http://www.w3school.com.cn/i/eg_mouse2.jpg" />
</body>

</html>

<html>
<head>
<script type="text/javascript">
function getEventType(event)
  { 
  alert(event.type);
  }
</script>
</head>

<body onmousedown="getEventType(event)">

<p>在文檔中點擊某個位置。消息框會提示出被觸發的事件的類型。</p>

</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。