DOM操作

什么是DOM?###

定義:文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。
DOM是瀏覽器提供的接口,想要操作DOM就要使用DOM。

什么是Node?###

節點(Node)是組成DOM的最小單位。DOM樹,就是由各種不同類型的節點組成。

Element和Node的區別?####

對于HTML文檔,節點(Node)主要有以下六種類型:

節點 名稱 含義
Document 文檔節點 整個文檔(window.document)
DocumentType 文檔類型節點 文檔類型(比如<!DOCTYPE html>)
Element 元素節點 HTML元素(比如<body>、<div>等)
Attribute 屬性節點 HTML元素屬性(比如class="right")
Text 文本節點 HTML文檔中出現的文本
DocumentFragment 文檔碎片節點 文檔的片段

So: Element繼承了Node類,也就是說Element是Node多種類型中的一種,也叫作ELEMENT_NODE
也就是說我們平時使用的html上的元素,即Element是類型為ELEMENT_NODE的Node。

獲取DOM####

 //獲取節點(不會搜索不在文檔中的元素)
var getnode1 = document.getElementById('test')
var getnodes1 = document.getElementsByClassName('test1 test2')

 //獲取多個節點(返回的HTML集合是動態的)
var getnodes2 = document.getElementByTagName('p')

//支持更高級節點查詢方法(只會返回第一個符合的元素)
var getnode2 = document.querySelector('div#test')

//返回與指定的選擇器組匹配的元素列表(按出現的順序排列)
var getnode3 = document.querySelectorAll("div.test, div.test2,div.test3")

創建DOM####

var createEle = document.createElement('div')
var createNode = document.createTextNode('hello world!')

查找DOM####

// 獲取父元素、父節點(空時返回null)
var parent = node.parentElement;
var parent = node.parentNode;

// 返回包含指定節點的子節點的集合,該集合為即時更新的集合
var childrens = node.childrenNodes;   

// 當前元素的第一個/最后一個子元素節點
var el = node.firstElementChild;
var el = node.lastElementChild;

// 下一個/上一個兄弟元素節點
var el = node.nextElementSibling;
var el = node.previousElementSibling;

修改DOM####

// 刪除一個子節點。返回刪除的節點(oldChild === child)
var oldChild = node.removeChild(child);

//將一個節點添加到指定父節點的子節點列表末尾。
var newChild = node.appendChild(child);

// 指定的節點替換當前節點的一個子節點(newChild 替換 oldChild)
// 返回被替換掉的節點( replacedNode === oldChild相等)
var replacedNode = node.replaceChild(newChild, oldChild);

// 在當前節點的某個子節點之前再插入一個子節點
var insertedElement = parentElement.insertBefore(newElement, referenceElement);

//方法返回一個布爾值,判斷當前節點是否有子節點。
element.hasChildNodes()

// textContent屬性返回當前節點和它的所有后代節點的文本內容(textContent會把后代的div吃掉)
element.textContent = 'hello world'

操作屬性####

// 獲取數組
ele.attributes;
// 獲取屬性
ele.getAttribute('class');
//設置屬性
ele.setAttribute('class', 'highlight');
// 判斷屬性
ele.hasAttribute('class');
//移除屬性
ele.removeAttribute('class');
// 是否有屬性設置
ele.hasAttributes();     
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容