js-DOM元素節點操作、屬性節點操作

阿新 • • 發佈：2021-01-15

DOM節點操作

DOM節點包含元素節點，屬性節點，註釋節點，文字節點。

DOM節點操作

IE低版本也支援

獲取節點集合

1   獲取節點集合（偽陣列），可以使用下標遍歷，不能使用陣列方法。
document.getElementsByClassName('.box')類名
document.getElementsByTagName('p' 
)  標籤名
document.getElementsByTagName('name')name值
2	獲取單個標籤
document.body body標籤
document.documentElement html標籤
document.getElementById('id') 通過id

以下屬性IE低版本不支援

document.querySelector('css選擇器')，通過css選擇器例如，
document.querySelectorAll('css選擇器') ，偽陣列

獲取兄弟節點，或兄弟元素節點

有返回節點，沒有返回值為null。

1   獲取下一個節點
node. 
nextSibling; 
2	獲取下一個元素節點
node.nextElementSibling
3	獲取上一個節點
node.previousSibling; 
4	獲取上一個元素節點
node.previousElementSibling

子節點操作

1	node元素節點下的第一個子節點
node.firstChild
2	node元素節點下的第一個子元素節點
node.firstElementChild
3	node元素節點下的所有子元素節點
node.children
4	node元素節點下的所有子節點
node.childNodes

獲取父節點

1	獲取node的父元素節點
node. 
parentElement;
2	獲取node的父元素節點，包含空格換行等；
 node.parentNode;

增加元素節點

建立元素節點

var elem= document.createElement('標籤名');建立元素節點
var text= document.createTextNode('文字')；建立文字節點

把建立的元素節點插入到node元素節點中。把文字節點插入到新建立的元素節點中

elem.appendChild(text);
在元素的最末尾新增節點
node.appendChild(elem);
在元素的最前面插入節點 
node.insertBefore(elem);

刪除元素節點。

node.removeChild('要刪除的元素節點')；
node.remove()；刪除自身

替換節點

在node節點，把 li 替換成 p。

parentNode.replaceChild(新節點,舊節點)
ul.replaceChild(p,li)

複製節點

引數預設沒有，只複製標籤；

如果為true，複製標籤及其內容；

 var p1= p.cloneNode(true);

屬性節點操作

原生屬性

在這裡插入圖片描述

獲取原生屬性，直接元素.style.屬性。

			li.style.color='red';
            li.style.backgroundColor='blue';

2.獲取類名。
className 獲取類名

console.log(li.className);

在這裡插入圖片描述

在這裡插入圖片描述
classList獲取類名列表，得到一個數組，通過下標可以遍歷對應類名

 console.log(li.classList);

自定義屬性

在這裡插入圖片描述

H5新增屬性

通過dataSet新增自定義屬性；
一般以data-開頭的屬性名，為程式設計師之間預設的格式，認為這是一個自定義屬性。
程式碼如下
在這裡插入圖片描述
效果

獲取屬性的值其他方法

isId 檢查屬性是否為元素的 ID 屬性：

document.getElementById("demo").attributes[0].isId;

輸出結果：

true

attributes   獲取node屬性的集合：是一個偽陣列，可以通過下標獲取。

node.attributes;

getAttribute方法，返回指定元素的屬性值

 console.log(li.getAttribute('data-index'));

getAttributeNode() 方法，返回屬性節點

     console.log(li.getAttributeNode('data-index'));

在這裡插入圖片描述
setAttribute（‘屬性名’，屬性值）

    console.log(li.setAttribute('color','red'));

建立屬性節點並賦值。

1	建立class屬性
var atr=document.createAttribute("class");

2	給class新增屬性值為democlass
	atr.nodeValue="democlass";
3  給h1標籤設定屬性節點。
	var h=document.getElementsByTagName("H1")[0];
	h.setAttributeNode(atr); 
	delete 元素.dataset.key