JavaScript的DOM操做

時間 2019-11-07

原文原文鏈接

JavaScript的DOM操做

什麼是 DOM?

文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結構化的表述，並定義了一種方式能夠使從程序中對該結構進行訪問，從而改變文檔的結構，樣式和內容。DOM 將文檔解析爲一個由節點和對象（包含屬性和方法的對象）組成的結構集合。html

爲簡單起見，在API參考文檔中的語法實例一般會使用element(s) 指代節點，使用nodeList（s）或 element(s)來指代節點數組，使用 attribute(s)來指代屬性節點。node

在 HTML DOM (Document Object Model) 中 , 每個元素都是節點:git

文檔是一個文檔。github
全部的HTML元素都是元素節點。編程
全部 HTML 屬性都是屬性節點。數組
文本插入到 HTML 元素是文本節點。app

DOM 建立

document.createElement 建立元素節點dom
document.createAttribute 建立一個屬性節點this
document.createTextNode 建立文本節點code

DOM 查詢

querySelector //返回匹配的第一個元素
querySelectorAll //返回匹配的元素集合
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
element.parentNode //父節點
element.firstChild //第一個子元素節點
element.lastChild //最後一個子元素節點
element.previousSibling //上一個元素節點
element.nextSibling //下一個元素節點

DOM 更改

element.insertBefore() //在指定的已有的子節點以前插入新節點。
element.appendChild() //向元素添加新的子節點，做爲最後一個子節點。
element.removeChild() //移除子節點
element.cloneNode(deep)

cloneNode() 方法建立節點的拷貝，並返回該副本。

cloneNode() 方法克隆全部屬性以及它們的值。

若是須要克隆全部後代，把 deep 參數設置 true，不然設置爲 false。

element.replaceChild(newnode,oldnode) //替換元素中的子節點。

屬性操做

element.attributes //返回元素屬性的 NamedNodeMap。
element.getAttribute() //返回指定屬性值。
element.hasAttribute() //元素是否擁有指定屬性。
element.setAttribute() //設置屬性值。
element.removeAttribute() //移除屬性。
element.textContent //設置或返回文本內容。
element.innerHTML //設置或返回元素的內容。
document.body.classList.add("a","b");
document.body.classList.remove("a");
document.body.classList.contains('myclass');
document.body.classList.toggle('classtest');
element.clientHeight //返回元素的可見高度。
element.clientWidth //返回元素的可見寬度。
element.offsetHeight //返回元素的高度。
element.offsetWidth 返回元素的寬度。

DOM 操做應用

點擊切換效果：

//html:
div.panels>div.panel*5


//js
var panels = document.querySelectorAll('.panel');   //獲取panel的NodeList

panels.forEach(panel=>{panel.addEventListener('click',toggelClass)});  //監聽點擊事件

function toggelClass(){
  let siblings = [].filter.call(this.parentNode.children,child=>child!==this);   //獲取兄弟元素
  siblings.forEach(item=>item.classList.remove('open'));
  this.classList.add('open');
}