1認識DOM
文檔對象模型DOM(Document Object Model)定義訪問和處理HTML文檔的標準方法。DOM 將HTML文檔呈現爲帶有元素、屬性和文本的樹結構(節點樹)。
先來看看下面代碼:
將HTML代碼分解爲DOM節點層次圖:
HTML文檔可以說由節點構成的集合,三種常見的DOM節點:
1. 元素節點:上圖中<html>、<body>、<p>等都是元素節點,即標籤。
2. 文本節點:向用戶展示的內容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節點:元素屬性,如<a>標籤的鏈接屬性href="http://www.imooc.com"。
看下面代碼:
<a href="http://www.imooc.com">JavaScript DOM</a>
2通過ID獲取元素
3innerHTML 屬性
4改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢?
語法:
Object.style.property=new style;
注意:Object是獲取的元素對象,如通過document.getElementById("id")獲取的元素。
基本屬性表(property):
注意:該表只是一小部分CSS樣式屬性,其它樣式也可以通過該方法設置和修改。
看看下面的代碼:
改變 <p> 元素的樣式,將顏色改爲紅色,字號改爲20,背景顏色改爲藍:
<p id="pcon">Hello World!</p> <script> var mychar = document.getElementById("pcon"); mychar.style.color="red"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue"; </script>
結果: