HTML DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。在 HTML DOM 中,所有事物都是節(jié)點。DOM 是被視為節(jié)點樹的 HTML。
根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn),HTML 文檔中的所有內(nèi)容都是節(jié)點:
整個文檔是一個文檔節(jié)點
每個 HTML 元素是元素節(jié)點
HTML 元素內(nèi)的文本是文本節(jié)點
每個 HTML 屬性是屬性節(jié)點
注釋是注釋節(jié)點
HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點樹:
HTML DOM Tree 實例
通過 HTML DOM,樹中的所有節(jié)點均可通過 JavaScript 進(jìn)行訪問。所有 HTML 元素(節(jié)點)均可被修改,也可以創(chuàng)建或刪除節(jié)點。
所有 HTML 元素被定義為對象,而編程接口則是對象方法和對象屬性。
一:獲取元素節(jié)點方法:
1.var node = document.getElementById("nodeId");
2.var nodelist = document.getElementsByClassName("nodeclassname");
3.var nodelist = document.getElementsByTagName("nodetagname");
二:獲取到元素節(jié)點以后我們可以對他進(jìn)行的操作:1.對自身的操作。2.對子節(jié)點的操作。3.對兄弟節(jié)點的操作。4.對父節(jié)點的操作
2.1. 刪除自身:node.parentNode.removeChild(node);
2.2.判斷是否有子節(jié)點:var boolean = node.hasChildNodes();
獲取子節(jié)點列表:var childList = node.childNodes;
獲取節(jié)點元素類型:var nodetype = node.nodeType; var nodename = node.nodeName;
刪除子節(jié)點。node.removeChild(childNode);
在子節(jié)點尾部插入一個子節(jié)點:node.appendChild(childNode);
在子節(jié)點收不插入一個子節(jié)點:node.insertBefore(childNode);
用A節(jié)點替換B節(jié)點:node.replaceChild(A,B);
2.3.node.nextSibling獲取相鄰的下一個兄弟節(jié)點
node.previousSibling獲取相鄰的上一個兄弟節(jié)點
2.4 . 獲取父節(jié)點node.parentNode
新聞熱點
疑難解答
圖片精選