什么是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();