首頁 > 開發者 > 網站開發

HTML DOM學習之二

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：efi   名稱   擷取   doc   define   最簡   htm   rip   other   

1.HTML DOM屬性：

**innerHTML 屬性-擷取元素內容的最簡單方法是使用innerHTML 屬性，innerHTML 屬性對於擷取或替換HTML元素的內容很有用

<html>

<body>

<p id="intro">Hello world!</p>

<script>

var txt=document.getElementById("intro").innerHTML;

document.write(txt);

</script>

</body>

</html>

 

2.nodeName屬性規定節點的名稱：

**nodeName是唯讀；

**元素節點的nodeName與標籤名相同；

**屬性節點的nodeName與屬性名稱相同；

**文本節點的nodeName始終是#text

**文檔節點的nodeName始終是#document

 

3.nodeValue屬性：

**元素節點的nodeValue是undefine或null；

**文本節點的nodeValue是文本本身；

**屬性節點的nodeValue是屬性值；

<html>

<body>

<p id="intro">Hello world!</p>

<script type="text/javascript">

x=document.getElementById("intro");

document.write(x.firstChild.nodeValue);

</script>

</body>

</html>

 

4.訪問HTML元素（節點）：

**通過使用getElementById()方法：返回帶有指定ID的元素

document.getElementById("intro");

文法：node.getElementById("id");

 

**通過使用getElementsByTagName()方法：返回帶有指定標籤名的所有元素

document.getElementByTagName("p");

document.getElementById("main").getElemetstByTagName("p");

文法：node.getElementsByTagName("tagname");

 

**通過使用getElementByClassName()方法：返回帶有相同類名的所有HTML元素

 

5.HTML DOM 修改：改變HTML內容，改變CSS樣式，改變HTML 屬性，建立新的HTML元素，刪除已有的HTML元素，改變事件（處理常式）

 

**建立HTML內容：改變元素內容最簡單的方法就是使用innerHTML 屬性

<html>

<body>

<p id="p1">Hello World!</p>

<script>

document.getElementById("p1").innerHTML="New text!";

</script>

</body>

</html>

 

**改變HTML樣式：通過HTML DOM，能夠訪問HTML元素的樣式對象；

<html>

<body>

<p id="p2">Hello World!</p>

<script>

document.getElementById("p2").style.color="blue";

</script>

</body>

</html>

 

**建立新的HTML元素：必須首先建立該元素（元素節點），然後把它追加到已有元素上

<div id="d1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph</p>

</div>

<script>

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

var node=document.creatTextNode("This is new.");

para.appendChild(node);

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

element.appendChild(para);

</script>

 

6.修改HTML內容：改變元素內容的最簡單的方法就是使用innerHTML 屬性；

<html>

<body>

<p id="p1">Hello World!</p>

<script>

document.getElementById("p1").innerHTML="New text!";

</script>

</body>

</html>

 

7.改變HTML樣式：通過HTML DOM，能夠訪問HTML對象的樣式對象；

<html>

<body>

<p id="p2">Hello World!</p>

<script>

document.getElementById("p2").style.color="blue";

</script>

</body>

</html>

 

8.使用事件：HTML DOM允許您在事件發生時執行代碼；當HTML元素“有事件發生”時，瀏覽器就會建置事件：

**在元素上點擊

**載入頁面

**改變輸入欄位

<html>

<body>

<input type="button" onclick="document.body.style.backgroundColor=‘lavender‘;" value="Change background color"/>

</body>

</html>

 

<html>

<body>

<script>

function ChangeBackground(){

document.body.style.backgroundColor="lavender";

}

</script>

<input type="button" onclick="ChangeBackground()" value="Change background color"/>

</body>

</html>

 

HTML DOM學習之二

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More