Dom節點操作常用方法

lemanli 發布于2019-08-23 12:13 / 3635人閱讀

Dom節點操作常用方法

1.訪問/獲取節點
返回對擁有指定id的第一個對象進行訪問

document.getElementById(id);

返回帶有指定名稱的節點集合　　注意拼寫:Elements

document.getElementsByName(name);

　　　　
返回帶有指定標簽名的對象集合　注意拼寫：Elements

document.getElementsByTagName(tagname);

　　
返回帶有指定class名稱的對象集合注意拼寫：Elements

document.getElementsByClassName(classname)

2.創建節點/屬性
創建一個節點

document.createElement(eName);

　
對某個節點創建屬性

document.createAttribute(attrName);

創建文本節點

document.createTextNode(text);

3.添加節點
在某個節點前插入節點

document.insertBefore(newNode,referenceNode);

　
給某個節點添加子節點

parentNode.appendChild(newNode);

4.復制節點
復制某個節點參數：是否復制原節點的所有屬性

cloneNode(true | false);

5.刪除節點
刪除某個節點的子節點 node是要刪除的節點

parentNode.removeChild(node)；

注意：為了保證兼容性，要判斷元素節點的節點類型(nodeType)，若nodeType==1，再執行刪除操作。通過這個方法，就可以在 IE和 Mozilla 完成正確的操作。

nodeType 屬性可返回節點的類型.最重要的節點類型是：
元素類型節點類型
元素element 1
屬性attr 2
文本text 3
注釋comments 8
文檔document 9

6.修改文本節點

將data加到文本節點后面

appendData(data)；

將從start處刪除length個字符

deleteData(start,length);

在start處插入字符,start的開始值是0;

insertData(start,data);

在start處用data替換length個字符

replaceData(start,length,data);

在offset處分割文本節點

splitData(offset);

從start處提取length個字符

substringData(start,length);

7.屬性操作
通過屬性名稱獲取某個節點屬性的值

getAttribute(name)

修改某個節點屬性的值

setAttribute(name,value);

刪除某個屬性

removeAttribute(name)；

8.查找節點
如果節點為已知節點的第一個子節點就可以使用這個方法。此方法可以遞歸進行使用

parentObj.firstChild;　　
parentObj.firstChild.firstChild

獲得一個節點的最后一個節點，與firstChild一樣也可以進行遞歸使用

parentObj.lastChild;　　
parentObj.lastChild.lastChild

獲得節點的所有子節點，然后通過循環和索引找到目標節點

parentObj.childNodes;

9.獲取相鄰的節點
獲取已知節點的相鄰的上一個節點

curtNode.previousSibling;

獲取已知節點的下一個節點

curtNode.nextSlbling；

10.獲取父節點
得到已知節點的父節點

childNode.parentNode;

11.替換節點

replace(newNode,oldNode)；

GPU云服務器云服務器 js中操作dom節點 Dom操作 dom方法 dom對象操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98145.html

Dom節點操作常用方法

Dom節點操作常用方法 1.訪問/獲取節點返回對擁有指定id的第一個對象進行訪問 document.getElementById(id); 返回帶有指定名稱的節點集合　　注意拼寫:Elements document.getElementsByName(name); 　　　　返回帶有指定標簽名的對象集合　注意拼寫：Elements document.getElementsByTagName(...

pepperwang 2019-08-26 12:19 評論0 收藏0
DOM 小總結

摘要：在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。它這種情況稱為文檔碎片，還無法顯示在瀏覽器的畫面中。創建一個文本節點并添加到新元素中的代碼如下總結文檔對象模型，是針對和文檔的一個應用程序編程接口，描繪了一個層次化的節點樹。 DOM 是什么文檔對象模型，是針對 HTML 和 XML 文檔的一個 API (應用程序編程接口)，描繪了一個層次化的節點樹。 D: document 當...

hyuan 2019-08-21 14:16 評論0 收藏0
DOM 小總結

摘要：在瀏覽器中，對象是繼承自類型的一個實例，表示整個頁面。它這種情況稱為文檔碎片，還無法顯示在瀏覽器的畫面中。創建一個文本節點并添加到新元素中的代碼如下總結文檔對象模型，是針對和文檔的一個應用程序編程接口，描繪了一個層次化的節點樹。 DOM 是什么文檔對象模型，是針對 HTML 和 XML 文檔的一個 API (應用程序編程接口)，描繪了一個層次化的節點樹。 D: document 當...

yzd 2019-08-01 15:35 評論0 收藏0
JavaScript高程第十章:DOM(中)

摘要：主要介紹不常用的類型這里介紹我們的其他類型包括以下幾個類型類型類型類型類型類型類型類型文本節點由類型表示特征值為為為節點包含的文本是一個不支持沒有子節點我們可以通過訪問節點包含的文本方法將添加到節點末尾從指定位置開始刪除個字符從指定主要介紹不常用的DOM類型這里介紹我們的其他類型,包括以下幾個類型: Text類型 Comment類型 CDATASection類型 Document...

suosuopuo 2019-08-22 10:40 評論0 收藏0
JS總結篇--[總結]JS操作DOM常用API詳解

摘要：文本整理了操作的一些常用的，根據其作用整理成為創建，修改，查詢等多種類型的，主要用于復習基礎知識，加深對原生的認識。方法主要是用于添加大量節點到文檔中時會使用到。文本整理了javascript操作DOM的一些常用的api，根據其作用整理成為創建，修改，查詢等多種類型的api，主要用于復習基礎知識，加深對原生js的認識。基本概念在講解操作DOM的api之前，首先我們來復習一下一些基...

malakashi 2019-08-20 16:52 評論0 收藏0