淺談JavaScript如何操作html DOM

** 通過 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 元素
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容