** 通過 HTML DOM,可訪問 JavaScript HTML 文檔的所有元素。**
HTML DOM 樹
Paste_Image.png
DOM樹很重要,特別是其中各節點之間的關系。因為有時候我們需要通過父節點尋找子節點等。
本文將會講到以下內容:
通過可編程的對象模型,JavaScript 獲得了足夠的能力來創建動態的 HTML。
- JavaScript 能夠改變頁面中的所有 HTML 元素
- JavaScript 能夠改變頁面中的所有 HTML 屬性
- JavaScript 能夠改變頁面中的所有 CSS 樣式
- JavaScript 能夠對頁面中的所有事件做出反應
JavaScript 能夠改變頁面中的所有 HTML 元素
首先,我們要知道如何查找HTML元素,通常有三種方法:
- id
- tag
- classs
就是分別通過id,tag,class的名字查找HTML元素。
通過ID查找HTML元素
<html>
<body>
<p id = "intro">hello world</p>
<p>display <b>getElementById</b> method </p>
<script>
var x = document.getElementById("intro");
document.write('<p>id = "intro" text in it is :' + x.innerHTML + '</p>');
</script>
</body>
</html>
通過tag查找HTML元素
<html>
<body>
<p> hello world</p>
<div id="main">
<p>hello world </p>
<p>display the <b>getElementBYTagName</b> method</p>
</div>
<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.write('id is "main" first text is :' + y[0].innerHTML);
</script>
</body>
</html>
JavaScript 改變 HTML 元素的內容。
改變 HTML 輸出流
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
<html>
<body>
<p id ="123">hello world</p>
<script>
document.getElementById("123").innerHTML="new html";
</script>
</body>
</html>
改變 HTML 屬性
<html>
<body>
<img id="image" src="C:\Users\chi\Pictures\The.Grandmaster[00_32_58][20160719-184823-0].BMP" />
<script>
document.getElementById("image").src="C:\Users\chi\Pictures\123.jpg";
</script>
<p>原始圖片是郁金香(eg_tulip.jpg),但是已被修改為盧浦大橋(shanghai_lupu_bridge.jpg)。</p>
</body>
</html>
改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。
<html>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="yellow";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>上面的段落已被一段腳本修改。</p>
</body>
</html>
<html>
<body>
<p id= "a">hello world</p>
<button type="button" onclick = "document.getElementById('a').style.color='blue'">change color</button>
</body>
</html>
** JavaScript 有能力對 HTML 事件做出反應**
HTML 事件的例子:
- 當用戶點擊鼠標時
- 當網頁已加載時
- 當圖像已加載時
- 當鼠標移動到元素上時
- 當輸入字段被改變時
- 當提交 HTML 表單時
- 當用戶觸發按鍵時
<html>
<body>
<h1 onclick="this.innerHTML='謝謝!'">請點擊該文本</h1>
</body>
</html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="謝謝!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">請點擊該文本</h1>
</body>
</html>
<html>
<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>
添加和刪除節點(HTML 元素)
<html>
<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);
最后您必須向一個已有的元素追加這個新元素。
這段代碼找到一個已有的元素:
var element=document.getElementById("div1");
這段代碼向這個已有的元素追加新元素:
element.appendChild(para);
刪除已有的 HTML 元素
如需刪除 HTML 元素,您必須首先獲得該元素的父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
總結
在我們的 JavaScript 教程的 HTML DOM 部分,您已經學到了:
- 如何改變 HTML 元素的內容 (innerHTML)
- 如何改變 HTML 元素的樣式 (CSS)
- 如何對 HTML DOM 事件作出反應
- 如何添加或刪除 HTML 元素