快捷導(dǎo)航

html dom節(jié)點(diǎn)操作(獲取/修改/添加或刪除)

更新時(shí)間：2014年01月23日 15:06:50 作者：

DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)，下面為大家介紹下html dom節(jié)點(diǎn)操作，感興趣的朋友可以參考下

HTML DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。在 HTML DOM 中，所有事物都是節(jié)點(diǎn)。DOM 是被視為節(jié)點(diǎn)樹的 HTML。

根據(jù) W3C 的 HTML DOM 標(biāo)準(zhǔn)，HTML 文檔中的所有內(nèi)容都是節(jié)點(diǎn)：

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)
每個(gè) HTML 元素是元素節(jié)點(diǎn)
HTML 元素內(nèi)的文本是文本節(jié)點(diǎn)
每個(gè) HTML 屬性是屬性節(jié)點(diǎn)
注釋是注釋節(jié)點(diǎn)

HTML DOM 將 HTML 文檔視作樹結(jié)構(gòu)。這種結(jié)構(gòu)被稱為節(jié)點(diǎn)樹：
HTML DOM Tree 實(shí)例

http://www.w3school.com.cn/i/ct_htmltree.gif

通過 HTML DOM，樹中的所有節(jié)點(diǎn)均可通過 JavaScript 進(jìn)行訪問。所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除節(jié)點(diǎn)。

所有 HTML 元素被定義為對(duì)象，而編程接口則是對(duì)象方法和對(duì)象屬性。

一：獲取元素節(jié)點(diǎn)方法：

1.var node = document.getElementById("nodeId");

2.var nodelist = document.getElementsByClassName("nodeclassname");

3.var nodelist = document.getElementsByTagName("nodetagname");

二：獲取到元素節(jié)點(diǎn)以后我們可以對(duì)他進(jìn)行的操作：1.對(duì)自身的操作。2.對(duì)子節(jié)點(diǎn)的操作。3.對(duì)兄弟節(jié)點(diǎn)的操作。4.對(duì)父節(jié)點(diǎn)的操作

2.1. 刪除自身：node.parentNode.removeChild(node);

2.2.判斷是否有子節(jié)點(diǎn)：var boolean = node.hasChildNodes();

獲取子節(jié)點(diǎn)列表：var childList = node.childNodes;

獲取節(jié)點(diǎn)元素類型：var nodetype = node.nodeType; var nodename = node.nodeName;

刪除子節(jié)點(diǎn)。node.removeChild(childNode);

在子節(jié)點(diǎn)尾部插入一個(gè)子節(jié)點(diǎn):node.appendChild(childNode);

在子節(jié)點(diǎn)收不插入一個(gè)子節(jié)點(diǎn):node.insertBefore(childNode);

用A節(jié)點(diǎn)替換B節(jié)點(diǎn)：node.replaceChild(A,B);

2.3.node.nextSibling獲取相鄰的下一個(gè)兄弟節(jié)點(diǎn)

node.previousSibling獲取相鄰的上一個(gè)兄弟節(jié)點(diǎn)

2.4 . 獲取父節(jié)點(diǎn)node.parentNode

您可能感興趣的文章: