HTML DOM 基本知識總結
1.HTML DOM 訪問
- 通過使用 getElementById() 方法 語法：node.getElementById("id");
- 通過使用 getElementsByTagName() 方法 語法:node.getElementsByTagName("tagname");
- 通過使用 getElementsByClassName() 方法 語法:document.getElementsByClassName("className");
b.nodeName 屬性獲取元素內容的最簡單方法是使用 innerHTML 屬性。innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。
nodeName 屬性規定節點的名稱。nodeName 是隻讀的, 元素節點的 nodeName 與標籤名相同, 屬性節點的 nodeName 與屬性名相同, 文本節點的 nodeName 始終是 #text, 文檔節點的 nodeName 始終是 #document。
c.nodeValue 屬性
nodeValue 屬性規定節點的值。元素節點的 nodeValue 是 undefined 或 null,文本節點的 nodeValue 是文本本身,屬性節點的 nodeValue 是屬性值。
d.nodeType 屬性
nodeType 屬性返回節點的類型。nodeType 是隻讀的。
3.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() 把指定屬性設置或修改爲指定的值。
4.HTML DOM 修改
document.getElementById("id").innerHTML="New text!";
document.getElementById("id").style.color="blue";
document.getElementById("id").style.fontFamily="Arial";
document.getElementById("id").style.fontSize="larger";
document.body.style.backgroundColor='black'
5.HTML DOM 導航
x=document.getElementsByTagName("tagName");
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}