JavaScript DOM節點操作總結

2021-09-11 15:07:08 字數 2866 閱讀 7571

節點型別主要有三種：元素節點，屬性節點和文字節點。

而對dom的主要也就是圍繞元素節點和屬性節點的增刪改查。下面就分別從對元素節點的操作和對屬性節點的操作來介紹。

在對dom進行增刪改之前，首先要找到對應的元素。具體的查詢方法如下：

getelementbyid()             // 得到單個節點


getelementsbytagname() // 得到節點陣列 nodelist


getelementsbyname() // 得到節點陣列 nodelist
同時還可以利用元素節點的屬性獲取它的父子節點和文字節點：

子節點

node.childnodes   //獲取子節點列表nodelist; 注意換行在瀏覽器中被算作了text節點，如果用這種方式獲取節點列表，需要進行過濾


node.firstchild //返回第乙個子節點


node.lastchild //返回最後乙個子節點
父節點

node.parentnode      // 返回父節點


node.ownerdocument //返回祖先節點（整個document）
同胞節點

node.previoussibling       // 返回前乙個節點，如果沒有則返回null


node.nextsibling // 返回後乙個節點
新增節點首先要建立節點，然後將新建的節點插入dom中，所以下面分別介紹建立節點和插入節點的方法，複製節點的方法也在建立節點中進行介紹。

建立節點

createelement()        // 按照指定的標籤名建立乙個新的元素節點
建立**片段（為避免頻繁重新整理dom，可以先創造**片段，完成所有節點操作之後統一新增到dom中）

createdocumentfragment()
複製節點

clonednode = node.clonenode(boolean)  // 只有乙個引數，傳入乙個布林值，true表示複製該節點下的所有子節點；false表示只複製該節點
插入節點

/*插入node*/


parentnode.insertbefore(newnode, targetnode); //將newnode插入targetnode之前


/*插入html***/


node.insertadjacenthtml('beforebegin', html); //在該元素之前插入**


node.insertadjacenthtml('afterbegin', html); //在該元素的第乙個子元素之前插入**


node.insertadjacenthtml('beforeend', html); //在該元素的最後乙個子元素之後插入**


node.insertadjacenthtml('afterend', html); //在該元素之後插入**
替換節點

parentnode.replace(newnode, targetnode);        //使用newnode替換targetnode
移除節點

parentnode.removechild(childnode);   // 移除目標節點


node.parentnode.removechild(node); //在不清楚父節點的情況下使用
操作屬性節點，就是對dom樣式進行增刪改查。對於行內樣式、內聯樣式、外部樣式有不同的操作方法；各種方法獲得的樣式也有可讀可寫和唯讀之分。

node.style.color          // 可讀可寫
node.style.csstext          //獲取node行內樣式字串


node.style.length //獲取行內樣式個數


node.style.item(0) //獲取指定位置的樣式
html5為元素提供了乙個新的屬性：classlist 來實現對元素樣式表的增刪改查。操作如下：

node.classlist.add(value);         //為元素新增指定的類


node.classlist.contains(value); // 判斷元素是否含有指定的類，如果存在返回true


node.classlist.remove(value); // 刪除指定的類


node.classlist.toggle(value); // 有就刪除，沒有就新增指定類


node.getattribute('id')        // 獲取


node.setattribute('id') // 設定


node.removeattribute() // 移除


node.attributes // 獲取dom全部特性
getcomputedstyle是window的方法。它能夠獲取當前元素所有最終使用的css屬性值，但是是唯讀的。它有兩個引數，第乙個為傳入的節點，第二個可以傳入:hover, :blur等獲取其偽類樣式，如果沒有則傳入null。

然而ie並不支援getcomputedstyle方法，可以使用currentstyle來保持相容性：

window.getcomputedstyle ? window.getcomputedstyle(node, null) : node.currentstyle

javascript DOM 獲取節點

1.獲取元素節點 1.1 通過元素節點的id屬性獲取 語法 document.getelementbyid 元素id屬性的值 例如 1.2 根據元素的名稱獲取,獲取的是所有為該名稱的元素節點組成的陣列，可以用陣列的方法操作該節點陣列 語法 document.getelementsbytagname ...

javascript DOM節點 元素

子級 父級.children 一組元素 父級 子級.parentnode this 兄弟節點 下乙個兄弟節點相容 obj.nextelementsibling obj.nextsibling 上乙個兄弟節點 var opre obj.previouselementsibling obj.previo...

JavaScript DOM節點樹操作總結

前言 開啟乙個頁面，載入完html檔案後，瀏覽器首先做的就是解析html 並開始繪製節點樹，也就是說，我們刪除標籤元素，新增標籤元素，改變標籤元素的大小，改變標籤元素的內容，其實就是在刪除dom節點，新增dom節點，改變dom節點的大小，也就是說在dom節點樹上進行操作。這是乙個很簡單的節點樹，相當...