Dom節(jié)點操作常用方法
1.訪問/獲取節(jié)點
返回對擁有指定id的第一個對象進行訪問
document.getElementById(id);
返回帶有指定名稱的節(jié)點集合 注意拼寫:Elements
document.getElementsByName(name);
返回帶有指定標簽名的對象集合 注意拼寫:Elements
document.getElementsByTagName(tagname);
返回帶有指定class名稱的對象集合 注意拼寫:Elements
document.getElementsByClassName(classname)
2.創(chuàng)建節(jié)點/屬性
創(chuàng)建一個節(jié)點
document.createElement(eName);
對某個節(jié)點創(chuàng)建屬性
document.createAttribute(attrName);
創(chuàng)建文本節(jié)點
document.createTextNode(text);
3.添加節(jié)點
在某個節(jié)點前插入節(jié)點
document.insertBefore(newNode,referenceNode);
給某個節(jié)點添加子節(jié)點
parentNode.appendChild(newNode);
4.復(fù)制節(jié)點
復(fù)制某個節(jié)點 參數(shù):是否復(fù)制原節(jié)點的所有屬性
cloneNode(true | false);
5.刪除節(jié)點
刪除某個節(jié)點的子節(jié)點 node是要刪除的節(jié)點
parentNode.removeChild(node);
注意:為了保證兼容性,要判斷元素節(jié)點的節(jié)點類型(nodeType),若nodeType==1,再執(zhí)行刪除操作。通過這個方法,就可以在 IE和 Mozilla 完成正確的操作。
nodeType 屬性可返回節(jié)點的類型.最重要的節(jié)點類型是:
元素類型 節(jié)點類型
元素element 1
屬性attr 2
文本text 3
注釋comments 8
文檔document 9
6.修改文本節(jié)點
將data加到文本節(jié)點后面
appendData(data);
將從start處刪除length個字符
deleteData(start,length);
在start處插入字符,start的開始值是0;
insertData(start,data);
在start處用data替換length個字符
replaceData(start,length,data);
在offset處分割文本節(jié)點
splitData(offset);
從start處提取length個字符
substringData(start,length);
7.屬性操作
通過屬性名稱獲取某個節(jié)點屬性的值
getAttribute(name)
修改某個節(jié)點屬性的值
setAttribute(name,value);
刪除某個屬性
removeAttribute(name);
8.查找節(jié)點
如果節(jié)點為已知節(jié)點的第一個子節(jié)點就可以使用這個方法。此方法可以遞歸進行使用
parentObj.firstChild; parentObj.firstChild.firstChild
獲得一個節(jié)點的最后一個節(jié)點,與firstChild一樣也可以進行遞歸使用
parentObj.lastChild; parentObj.lastChild.lastChild
獲得節(jié)點的所有子節(jié)點,然后通過循環(huán)和索引找到目標節(jié)點
parentObj.childNodes;
9.獲取相鄰的節(jié)點
獲取已知節(jié)點的相鄰的上一個節(jié)點
curtNode.previousSibling;
獲取已知節(jié)點的下一個節(jié)點
curtNode.nextSlbling;
10.獲取父節(jié)點
得到已知節(jié)點的父節(jié)點
childNode.parentNode;
11.替換節(jié)點
replace(newNode,oldNode);
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/98145.html
Dom節(jié)點操作常用方法 1.訪問/獲取節(jié)點返回對擁有指定id的第一個對象進行訪問 document.getElementById(id); 返回帶有指定名稱的節(jié)點集合 注意拼寫:Elements document.getElementsByName(name); 返回帶有指定標簽名的對象集合 注意拼寫:Elements document.getElementsByTagName(...
摘要:在瀏覽器中,對象是繼承自類型的一個實例,表示整個頁面。它這種情況稱為文檔碎片,還無法顯示在瀏覽器的畫面中。創(chuàng)建一個文本節(jié)點并添加到新元素中的代碼如下總結(jié)文檔對象模型,是針對和文檔的一個應(yīng)用程序編程接口,描繪了一個層次化的節(jié)點樹。 DOM 是什么 文檔對象模型,是針對 HTML 和 XML 文檔的一個 API (應(yīng)用程序編程接口), 描繪了一個層次化的節(jié)點樹。 D: document 當...
摘要:在瀏覽器中,對象是繼承自類型的一個實例,表示整個頁面。它這種情況稱為文檔碎片,還無法顯示在瀏覽器的畫面中。創(chuàng)建一個文本節(jié)點并添加到新元素中的代碼如下總結(jié)文檔對象模型,是針對和文檔的一個應(yīng)用程序編程接口,描繪了一個層次化的節(jié)點樹。 DOM 是什么 文檔對象模型,是針對 HTML 和 XML 文檔的一個 API (應(yīng)用程序編程接口), 描繪了一個層次化的節(jié)點樹。 D: document 當...
摘要:主要介紹不常用的類型這里介紹我們的其他類型包括以下幾個類型類型類型類型類型類型類型類型文本節(jié)點由類型表示特征值為為為節(jié)點包含的文本是一個不支持沒有子節(jié)點我們可以通過訪問節(jié)點包含的文本方法將添加到節(jié)點末尾從指定位置開始刪除個字符從指定 主要介紹不常用的DOM類型 這里介紹我們的其他類型,包括以下幾個類型: Text類型 Comment類型 CDATASection類型 Document...
摘要:文本整理了操作的一些常用的,根據(jù)其作用整理成為創(chuàng)建,修改,查詢等多種類型的,主要用于復(fù)習(xí)基礎(chǔ)知識,加深對原生的認識。方法主要是用于添加大量節(jié)點到文檔中時會使用到。 文本整理了javascript操作DOM的一些常用的api,根據(jù)其作用整理成為創(chuàng)建,修改,查詢等多種類型的api,主要用于復(fù)習(xí)基礎(chǔ)知識,加深對原生js的認識。 基本概念 在講解操作DOM的api之前,首先我們來復(fù)習(xí)一下一些基...
閱讀 2323·2021-11-22 12:01
閱讀 2000·2021-11-12 10:34
閱讀 4526·2021-09-22 15:47
閱讀 2837·2019-08-30 15:56
閱讀 2870·2019-08-30 15:53
閱讀 2411·2019-08-30 13:53
閱讀 3387·2019-08-29 15:35
閱讀 3131·2019-08-29 12:27