HTML DOM 是關於如何獲取、修改、添加或刪除HTML 元素的標準。在HTML DOM 中,所有事物都是節點。 DOM 是被視為節點樹的HTML。
根據W3C 的HTML DOM 標準,HTML 文檔中的所有內容都是節點:
整個文檔是一個文檔節點
每個HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個HTML 屬性是屬性節點
註釋是註釋節點
HTML DOM 將HTML 文檔視作樹結構。這種結構被稱為節點樹:
HTML DOM Tree 實例
http://www.w3school.com.cn/i/ct_htmltree.gif
通過HTML DOM,樹中的所有節點均可通過JavaScript 進行訪問。所有HTML 元素(節點)均可被修改,也可以創建或刪除節點。
所有HTML 元素被定義為對象,而編程接口則是對象方法和對象屬性。
一:獲取元素節點方法:
1.var node = document.getElementById("nodeId");
2.var nodelist = document.getElementsByClassName("nodeclassname");
3.var nodelist = document.getElementsByTagName("nodetagname");
二:獲取到元素節點以後我們可以對他進行的操作:1.對自身的操作。 2.對子節點的操作。 3.對兄弟節點的操作。 4.對父節點的操作
2.1. 刪除自身:node.parentNode.removeChild(node);
2.2.判斷是否有子節點:var boolean = node.hasChildNodes();
獲取子節點列表:var childList = node.childNodes;
獲取節點元素類型:var nodetype = node.nodeType; var nodename = node.nodeName;
刪除子節點。 node.removeChild(childNode);
在子節點尾部插入一個子節點:node.appendChild(childNode);
在子節點收不插入一個子節點:node.insertBefore(childNode);
用A節點替換B節點:node.replaceChild(A,B);
2.3.node.nextSibling獲取相鄰的下一個兄弟節點
node.previousSibling獲取相鄰的上一個兄弟節點
2.4 . 獲取父節點node.parentNode