2. 程式人生 > >JavaScript學習——HTML DOM

JavaScript學習——HTML DOM

阿新 • • 發佈：2018-10-11
rop 提交 value 不同類 head src 點擊文本 dde property

JavaScript HTML DOM

通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。

HTML DOM (文檔對象模型)

當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造為對象的樹：

技術分享圖片

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

  • JavaScript 能夠改變頁面中的所有 HTML 元素
  • JavaScript 能夠改變頁面中的所有 HTML 屬性
  • JavaScript 能夠改變頁面中的所有 CSS 樣式
  • JavaScript 能夠對頁面中的所有事件做出反應

  • HTML DOM 對象 - 方法和屬性

    一些常用的 HTML DOM 方法：

    • getElementById(id) - 獲取帶有指定 id 的節點（元素）
    • appendChild(node) - 插入新的子節點（元素）
    • removeChild(node) - 刪除子節點（元素）

    一些常用的 HTML DOM 屬性：

    • innerHTML - 節點（元素）的文本值
    • parentNode - 節點（元素）的父節點
    • childNodes - 節點（元素）的子節點
    • attributes - 節點（元素）的屬性節點

一些 DOM 對象方法

常用方法：

方法描述
getElementById() 返回帶有指定 ID 的元素。
getElementsByTagName() 返回包含帶有指定標簽名稱的所有元素的節點列表（集合/節點數組）。
getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。
appendChild() 把新的子節點添加到指定節點。
removeChild() 刪除子節點。
replaceChild() 替換子節點。
insertBefore() 在指定的子節點前面插入新的子節點。
createAttribute() 創建屬性節點。
createElement() 創建元素節點。
createTextNode() 創建文本節點。
getAttribute() 返回指定的屬性值。
setAttribute() 把指定屬性設置或修改為指定的值。

innerHTML 屬性

獲取元素內容的最簡單方法是使用 innerHTML 屬性。

innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<p id="intro">Hello World!</p>
 
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
 
</body>
</html>

技術分享圖片

getElementById 是一個方法，而 innerHTML 是屬性。

innerHTML 屬性可用於獲取或改變任意 HTML 元素，包括 <html> 和 <body>。

nodeName 屬性規定節點的名稱。

  • nodeName 是只讀的
  • 元素節點的 nodeName 與標簽名相同
  • 屬性節點的 nodeName 與屬性名相同
  • 文本節點的 nodeName 始終是 #text
  • 文檔節點的 nodeName 始終是 #document

nodeName 始終包含 HTML 元素的大寫字母標簽名。

nodeValue 屬性

nodeValue 屬性規定節點的值。

  • 元素節點的 nodeValue 是 undefined 或 null
  • 文本節點的 nodeValue 是文本本身
  • 屬性節點的 nodeValue 是屬性值

查找 HTML 元素

通常，通過 JavaScript，需要操作 HTML 元素。

為了做到這件事情，首先找到該元素。有三種方法來做這件事：

  • 通過 id 找到 HTML 元素
  • 通過標簽名找到 HTML 元素
  • 通過類名找到 HTML 元素

獲取元素的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<p id="intro">Hello World!</p>
 
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
 
</body>
</html>

nodeType 屬性

nodeType 屬性返回節點的類型。nodeType 是只讀的。

比較重要的節點類型有：

元素類型NodeType
元素 1
屬性 2
文本 3
註釋 8
文檔 9

通過 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最簡單的方法，是通過使用元素的 id。

查找 id="intro" 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p id="intro">你好世界!</p>
<p>實例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本來自 id 為 intro 段落: " + x.innerHTML + "</p>");
</script>

</body>
</html>

你好世界!

實例展示了 getElementById 方法!

文本來自 id 為 intro 段落: 你好世界!

如果找到該元素，則該方法將以對象（在 x 中）的形式返回該元素。

如果未找到該元素，則 x 將包含 null。

通過標簽名查找 HTML 元素

查找 id="main" 的元素，然後查找 id="main" 元素中的所有 <p> 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>實例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write(‘id="main"元素中的第一個段落為：‘ + y[0].innerHTML+"<br>");
document.write(‘id="main"元素中的第二個段落為：‘ + y[1].innerHTML);
</script>

</body>
</html>

你好世界!

DOM 是非常有用的。

實例展示了 getElementsByTagName 方法

id="main"元素中的第一個段落為： DOM 是非常有用的。
id="main"元素中的第二個段落為：實例展示了 getElementsByTagName 方法

通過類名找到 HTML 元素

通過 getElementsByClassName 函數來查找 class="intro" 的元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p class="intro">你好世界!</p>
<p>展示 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本來自 class 為 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>註意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>

你好世界!

展示 getElementsByClassName 方法!

文本來自 class 為 intro 段落: 你好世界!

註意：Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

HTML DOM - 改變 HTML

HTML DOM 允許 JavaScript 改變 HTML 元素的內容。

改變 HTML 輸出流

JavaScript 能夠創建動態的 HTML 內容：

在 JavaScript 中，document.write() 可用於直接向 HTML 輸出流寫內容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

修改 HTML 內容的最簡單的方法是使用 innerHTML 屬性。

如需改變 HTML 元素的內容，請使用這個語法：

document.getElementById(id).innerHTML=新的 HTML

改變了 <p>元素的內容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通過腳本修改文本。</p>

</body>
</html>

新文本!

以上段落通過腳本修改文本。

改變了 <h1> 元素的內容：

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="新標題";
</script>

</body>
</html>

實例：

    • 上面的 HTML 文檔含有 id="header" 的 <h1> 元素
    • 我們使用 HTML DOM 來獲得 id="header" 的元素
    • JavaScript 更改此元素的內容 (innerHTML)

改變 HTML 屬性

如需改變 HTML 元素的屬性，請使用這個語法：

document.getElementById(id).attribute=新屬性值 改變了 <img> 元素的 src 屬性： 
<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>
  • 上面的 HTML 文檔含有 id="image" 的 <img> 元素
  • 我們使用 HTML DOM 來獲得 id="image" 的元素
  • JavaScript 更改此元素的屬性（把 "smiley.gif" 改為 "landscape.jpg"）

改變 HTML 樣式

如需改變 HTML 元素的樣式，請使用這個語法：

document.getElementById(id).style.property=新樣式 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通過腳本修改。</p>

</body>
</html>

Hello World!

Hello World!

以上段落通過腳本修改。

使用事件

HTML DOM 允許我們通過觸發事件來執行代碼。

比如以下事件：

  • 元素被點擊。
  • 頁面加載完成。
  • 輸入框被修改。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<h1 id="id1">我的標題 1</h1>
<button type="button" onclick="document.getElementById(‘id1‘).style.color=‘red‘">
點我!</button>

</body>
</html>

技術分享圖片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p id="p1">在這個世界裏我們的多麽的渺小</p>
<input type="button" value="隱藏文本" onclick="document.getElementById(‘p1‘).style.visibility=‘hidden‘" />
<input type="button" value="顯示文本" onclick="document.getElementById(‘p1‘).style.visibility=‘visible‘" />

</body>
</html>

技術分享圖片技術分享圖片

HTML DOM 事件

HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應。

可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。

如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代碼：

onclick=JavaScript

HTML 事件的例子：

  • 當用戶點擊鼠標時
  • 當網頁已加載時
  • 當圖像已加載時
  • 當鼠標移動到元素上時
  • 當輸入字段被改變時
  • 當提交 HTML 表單時
  • 當用戶觸發按鍵時
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<h1 onclick="this.innerHTML=‘mtimeyu‘">點擊文本!</h1>

</body>
</html>

技術分享圖片技術分享圖片

從事件處理器調用一個函數

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="mtimeyu!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">點擊文本!</h1>
</body>
</html>

技術分享圖片技術分享圖片

HTML 事件屬性 如需向 HTML 元素分配 事件，可以使用事件屬性。 
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>mtimeyu</title> 
</head>
<body>

<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p>
<button onclick="displayDate()">點這裏</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

技術分享圖片

使用 HTML DOM 來分配事件

HTML DOM 使用 JavaScript 來向 HTML 元素分配事件：

向 button 元素分配 onclick 事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<head>
</head>
<body>

<p>點擊按鈕執行 <em>displayDate()</em> 函數.</p>
<button id="myBtn">點這裏</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

技術分享圖片

onload 和 onunload 事件

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用於檢測訪問者的瀏覽器類型和瀏覽器版本，並基於這些信息來加載網頁的正確版本。

onload 和 onunload 事件可用於處理 cookie。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>彈窗-提示瀏覽器 cookie 是否可用。</p>
	
</body>
</html>

技術分享圖片

onchange 事件

onchange 事件常結合對輸入字段的驗證來使用。

下面使用 onchange 的例子。當用戶改變輸入字段的內容時，會調用 upperCase() 函數。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

輸入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>當你離開輸入框後，函數將被觸發，將小寫字母轉為大寫字母。</p>

</body>
</html>

技術分享圖片

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用於在用戶的鼠標移至 HTML 元素上方或移出元素時觸發函數。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 構成了鼠標點擊事件的所有部分。首先當點擊鼠標按鈕時，會觸發 onmousedown 事件，當釋放鼠標按鈕時，會觸發 onmouseup 事件，最後，當完成鼠標點擊時，會觸發 onclick 事件。

HTML DOM EventListener

addEventListener() 方法

在用戶點擊按鈕時觸發監聽事件：
document.getElementById("myBtn").addEventListener("click", displayDate);


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p>該實例使用 addEventListener() 方法在按鈕中添加點擊事件。 </p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

技術分享圖片

addEventListener() 方法用於向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。

你可以向一個元素添加多個事件句柄。

你可以向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。

你可以向任何 DOM 對象添加事件監聽，不僅僅是 HTML 元素。如： window 對象。

addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。

當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以添加事件監聽。

你可以使用 removeEventListener() 方法來移除事件的監聽。

element.addEventListener(event, function, useCapture);

第一個參數是事件的類型 (如 "click" 或 "mousedown").

第二個參數是事件觸發後調用的函數。

第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。

不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。 當用戶點擊元素時彈出 "Hello World!" : 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p>該實例使用 addEventListener() 方法在用戶點擊按鈕時執行函數。</p>
<button id="myBtn">點我</button>
<script>
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}
</script>

</body>
</html>

技術分享圖片

addEventListener() 方法允許向同一個元素添加多個事件，且不會覆蓋已存在的事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p>該實例使用 addEventListener() 方法向同個按鈕中添加兩個點擊事件。</p>
<button id="myBtn">點我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函數已執行!")
}
</script>

</body>
</html>

技術分享圖片技術分享圖片

可以向同個元素添加不同類型的事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<p>實例使用 addEventListener() 方法在同一個按鈕中添加多個事件。</p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
    document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
    document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
    document.getElementById("demo").innerHTML += "Moused out!<br>"
}
</script>

</body>
</html>

事件冒泡或事件捕獲？

事件傳遞有兩種方式：冒泡與捕獲。

事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？

在 冒泡 中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點擊事件先觸發，然後會觸發 <div> 元素的點擊事件。

在 捕獲 中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然後再觸發 <p> 元素的點擊事件。

addEventListener() 方法可以指定 "useCapture" 參數來設置傳遞類型：

默認值為 false, 即冒泡傳遞，當值為 true 時, 事件使用捕獲傳遞。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>實例演示了在添加不同事件監聽時，冒泡與捕獲的不同。</p>
<div id="myDiv">
	<p id="myP">點擊段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
	<p id="myP2">點擊段落，我是捕獲。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你點擊了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你點擊了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你點擊了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你點擊了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<head>
<style>
#myDIV {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠標在桔紅色的框內移動時會顯示隨機數。
  <p>點擊按鈕移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">點我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

HTML DOM 元素 (節點)

向文檔中添加和移除元素(節點)。

創建新的 HTML 元素 (節點) - appendChild()

要創建新的 HTML 元素 (節點)需要先創建一個元素，然後在已存在的元素中添加它。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

技術分享圖片

實例解析

以下代碼是用於創建 <p> 元素:

var para = document.createElement("p");

為 <p> 元素添加文本節點：

var node = document.createTextNode("這是一個新的段落。");

將文本節點添加到 <p> 元素中：

para.appendChild(node);

最後，在一個已存在的元素中添加 p 元素。

查找已存在的元素：

var element = document.getElementById("div1");

添加到已存在的元素中:

element.appendChild(para);

創建新的 HTML 元素 (節點) - insertBefore()

使用了 appendChild() 方法，它用於添加新元素到尾部。

如果需要將新元素添加到開始位置，可以使用 insertBefore() 方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

</body>
</html>

技術分享圖片

移除已存在的元素

要移除一個元素，你需要知道該元素的父元素。

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

解析

HTML 文檔中 <div> 元素包含兩個子節點 (兩個 <p> 元素):

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>

查找 id="div1" 的元素:

var parent = document.getElementById("div1");

查找 id="p1" 的 <p> 元素:

var child = document.getElementById("p1");

從父元素中移除子節點：

parent.removeChild(child);

如果能夠在不引用父元素的情況下刪除某個元素，就太好了。
不過很遺憾。DOM 需要清楚需要刪除的元素，以及它的父元素。

以下代碼是已知要查找的子元素，然後查找其父元素，再刪除這個子元素（刪除節點必須知道父節點）：

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

替換 HTML 元素 - replaceChild()

可以使用 replaceChild() 方法來替換 HTML DOM 中的元素。

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("這是一個新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTML DOM 集合(Collection)

HTMLCollection 對象

getElementsByTagName() 方法返回 HTMLCollection 對象。

HTMLCollection 對象類似 HTML 元素的一個數組。

以下代碼獲取文檔所有的 <p> 元素：

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

集合中的元素可以通過索引(以 0 為起始位置)來訪問。

訪問第二個 <p> 元素可以是以下代碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello mtimeyu!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "第二個段落的內容為:<span style=‘color:red;‘> " + myCollection[1].innerHTML + ‘</span>‘;
</script>

</body>
</html>

技術分享圖片

HTMLCollection 對象 length 屬性

HTMLCollection 對象的 length 屬性定義了集合中元素的數量。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello mtimeyu!</p>

<p id="demo"></p>

<script>
var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = "文檔包含" + myCollection.length + " 個段落。";
</script>

</body>
</html>

技術分享圖片

解析

獲取 <p> 元素的集合：

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

顯示集合元素個數：

document.getElementById("demo").innerHTML = myCollection.length;

修改所有 <p> 元素的背景顏色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello mtimeyu!</p>

<p>點擊按鈕修改 p 元素的背景顏色。</p>

<button onclick="myFunction()">點我</button>

<script>
function myFunction() {
    var myCollection = document.getElementsByTagName("p");
    var i;
    for (i = 0; i < myCollection.length; i++) {
        myCollection[i].style.color = "red";
    }
}
</script>

</body>
</html>

技術分享圖片

HTMLCollection 不是一個數組！

HTMLCollection 看起來可能是一個數組，但其實不是。

可以像數組一樣，使用索引來獲取元素。

HTMLCollection 無法使用數組的方法： valueOf(), pop(), push(), 或 join() 。

JavaScript HTML DOM 節點列表

NodeList 對象是一個從文檔中獲取的節點列表 (集合) 。

NodeList 對象類似 HTMLCollection 對象。

所有瀏覽器的 childNodes 屬性返回的是 NodeList 對象。

大部分瀏覽器的 querySelectorAll() 返回 NodeList 對象。

以下代碼選取了文檔中所有的 <p> 節點：

var myNodeList = document.querySelectorAll("p");

NodeList 中的元素可以通過索引(以 0 為起始位置)來訪問。

訪問第二個 <p> 元素可以是以下代碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello mtimeyu!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "第二個段落的內容為:<span style=‘color:red;‘> " + myNodelist[1].innerHTML + ‘</span>‘;
</script>

</body>
</html>

技術分享圖片

NodeList 對象 length 屬性

NodeList 對象 length 屬性定義了節點列表中元素的數量。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mtimeyu</title>
</head>
<body>

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello mtimeyu!</p>

<p id="demo"></p>

<script>
var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = "文檔包含 " + myNodelist.length + " 個段落。";
</script>

</body>
</html>

技術分享圖片

解析

獲取 <p> 元素的集合：

var myNodelist = document.querySelectorAll("p");

顯示節點列表的元素個數：

document.getElementById("demo").innerHTML = myNodelist.length;

HTMLCollection 與 NodeList 的區別

HTMLCollection 是 HTML 元素的集合。

NodeList 是一個文檔節點的集合。

NodeList 與 HTMLCollection 有很多類似的地方。

NodeList 與 HTMLCollection 都與數組對象有點類似，可以使用索引 (0, 1, 2, 3, 4, ...) 來獲取元素。

NodeList 與 HTMLCollection 都有 length 屬性。

HTMLCollection 元素可以通過 name，id 或索引來獲取。

NodeList 只能通過索引來獲取。

只有 NodeList 對象有包含屬性節點和文本節點。

節點列表不是一個數組！

節點列表看起來可能是一個數組，但其實不是。

但可以像數組一樣，使用索引來獲取元素。

節點列表無法使用數組的方法： valueOf(), pop(), push(), 或 join() 。

JavaScript學習——HTML DOM

相關推薦

JavaScript學習——HTML DOM

rop 提交 value 不同類 head src 點擊文本 dde property JavaScript HTML DOM 通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。 HTML DOM (文檔對象模型) 當網頁被加載時，瀏覽器會創建

JavaScript之HTML DOM Event

當滑鼠在button上點選時，會在button上觸發一個click事件。但是button是div的一個子元素， 在button裡點選相當於在div裡點選，是否click事件也會觸發在div上？如果click事件也觸發在div上， 會不會共用同一個事件物件？如果click事件也觸發在div上，誰的

JavaScript中HTML DOM focus()與onblur() setSelectionRange()用法

fun span html dom 一段 todolist lur body onclick 光標位置 今天在寫一個todolist待辦事項項目，需要單擊編輯待辦事項的內容，百度搜了一下這幾個方法的用法，總結一下 focus()方法：獲得鍵盤焦點，單擊之後就調用綁定的js方

Javascript與HTML DOM

首先來說一說HTML DOM： HTML DOM（文件物件模型）Document Object Model For HTML HTML DOM中定義了用於HTML的一系列標準的物件，以及訪問和處理HTML文件的標準方法。 通過DOM，可以訪問所有的HTML的元素（應該就是標籤），

javascript 操作 HTML DOM

出處:http://blog.csdn.net/qij2256/archive/2007/04/20/1572890.aspx 主要概述一些有用的基礎的DOM的方法以及怎樣用使用javascript使用它們。 可以實現比如動態地新建控制移動HTML元素。 Document 物件的常用方法 1、getElem

深入學習Html DOM樹的操作

你對HTML DOM樹的概念是否瞭解， 這裡和大家分享一下，DOM是文件物件模型(Document Object Model），是基於瀏覽器程式設計的一套API介面，W3C出臺的推薦標準，每個瀏覽器都有一些細微的差別，單純的 Javascript要結合DOM才能做DHTML程式設計，才能做出漂亮的效果、

學習筆記-JavaScript HTML DOM

表單 刪除 innerhtml 對象模型 ava img intro 元素 onload HTML DOM （文檔對象模型） 當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。 HTML DOM 模型被構造為對象的樹。 Java

web前端學習（四）JavaScript學習筆記部分（7）-- JavaScript DOM物件控制HTML元素詳解

1、方法 getElementsByName() 獲取name 可以獲取一個數組型別資料（引數加引號） getElementsByTagName() 獲取元素   getAttribute()

JavaScript HTML DOM

文檔 pre tel mod 實例 最簡 nts model images 通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。 HTML DOM （文檔對象模型） 當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object

JavaScript HTML DOM 元素（節點）

enc javascrip item pan 效果 demo 移動元素 成功 append 在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性 ： 1. nodeName : 節點的名稱 2. nodeValue ：節點的值 3. no

JavaScript HTML DOM - 改變CSS

head char document ctype .cn body pre 語法 logs 改變 HTML 樣式 //語法document.getElementById(id).style.property=new style <p id="p2">He

JavaScript HTML DOM 事件

pan 代碼 inner date load ntb 用戶 按鈕 scrip 對事件做出反應 我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。 如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代

javascript--- HTML DOM

web post 動態頁面 編程 結構化 認知 部分 方法 -- 看了這個題目，不知聰明的讀者會有什麽樣的感覺？這篇文章將要講javascript和DOM的關系呢？還是要講javascript的DOM?在這裏我首先就講明文章的主旨有兩點：什麽

JavaScript學習——DOM對象

attr text htm win 節點 方法 func function style 1、DOM操作 Document：整個html文件都稱之為一個document文檔 Element：所有的標簽都是Element元素 Attribute：標簽裏面的屬性 Text：標簽

html dom與javascript的關系 -我們用JavaScript對網頁（HTML）進行的所有操作都是通過DOM進行的

兩種 得來 來講 都對 標記 組織 程序員 tro sdn 一，什麽是DOM (參考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什麽 DOM全稱為The Document Object Model，應該理解為是一個

JavaScript HTML DOM增刪改查

刪除 scrip color 沒有 id屬性 tag reat 添加 val 首先 js 可以修改HTML中的所有元素和屬性，它還可以改變CSS樣式，並且可以監聽到所有事件並作出響應，這篇筆記呢 主要記錄如何對HTML元素進行增刪改查。 1 查找DOM 第一種方式是我

JavaScript HTML DOM事件

splay nbsp onload style blog div 提交 cookies cti HTML DOM 使javaScript有能力對HTML事件作出反應。 HTML事件的例子： 當用戶點擊鼠標時 當網頁已加載時 當圖像已加載時 當鼠標移動到元素上時 當輸入字段

javascript學習筆記：DOM節點概述

理解 obj title truct sin 文本 utf-8 html 解析 0x01： DOM是javascript操作網頁的接口，全稱為文檔對象模型(Document Object Model)。它的作用是將網頁轉為一個javascript對象，從而可以使用javas

javascript學習筆記：DOM節點關系和操作

seq 文本節點 文檔 use true 添加節點 check iss pen 0x01：前面的話 DOM可以將任何HTML描繪成一個由多層節點構成的結構。節點分為12種不同類型，每種類型分別表示文檔中不同的信息及標記。每個節點都擁有各自的特點、數據和方法，也與其他節點存在

javascript基礎學習系列-DOM盒子模型常用屬性

ica ace img 根據 盒子模型常用屬性 平面 html firefox sta 最近在學習DOM盒子模型，各種屬性看著眼花繚亂，下面根據三個系列來分別介紹一下： client系列 clientWidth ：width+(padding-left)+(paddin