html dom節點操作(取得/修改/新增或刪除)_javascript技巧

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取得鄰近的下一個兄弟節點

nodede .previousSibling取得相鄰的上一個兄弟節點

2.4 . 取得父節點node.parentNode