JavaScript的DOM操作

琛ｈ。發(fā)布于2019-08-20 17:16 / 3113人閱讀

摘要：的操作什么是文檔對象模型是和文檔的編程接口。向元素添加新的子節(jié)點，作為最后一個子節(jié)點。移除子節(jié)點方法創(chuàng)建節(jié)點的拷貝，并返回該副本。方法克隆所有屬性以及它們的值。返回指定屬性值。返回元素的高度。

JavaScript的DOM操作 什么是 DOM?

文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。DOM 將文檔解析為一個由節(jié)點和對象（包含屬性和方法的對象）組成的結(jié)構(gòu)集合。
為簡單起見，在API參考文檔中的語法實例通常會使用element(s) 指代節(jié)點，使用nodeList（s）或 element(s)來指代節(jié)點數(shù)組，使用 attribute(s)來指代屬性節(jié)點。

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

文檔是一個文檔。

所有的HTML元素都是元素節(jié)點。

所有 HTML 屬性都是屬性節(jié)點。

文本插入到 HTML 元素是文本節(jié)點。

DOM 創(chuàng)建

document.createElement 創(chuàng)建元素節(jié)點

document.createAttribute 創(chuàng)建一個屬性節(jié)點

document.createTextNode 創(chuàng)建文本節(jié)點

DOM 查詢

querySelector //返回匹配的第一個元素

querySelectorAll //返回匹配的元素集合

document.getElementById

document.getElementsByClassName

document.getElementsByTagName

element.parentNode //父節(jié)點

element.firstChild //第一個子元素節(jié)點

element.lastChild //最后一個子元素節(jié)點

element.previousSibling //上一個元素節(jié)點

element.nextSibling //下一個元素節(jié)點

DOM 更改

element.insertBefore() //在指定的已有的子節(jié)點之前插入新節(jié)點。

element.appendChild() //向元素添加新的子節(jié)點，作為最后一個子節(jié)點。

element.removeChild() //移除子節(jié)點

element.cloneNode(deep)


cloneNode() 方法創(chuàng)建節(jié)點的拷貝，并返回該副本。

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

如果需要克隆所有后代，把 deep 參數(shù)設(shè)置 true，否則設(shè)置為 false。

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

屬性操作

element.attributes //返回元素屬性的 NamedNodeMap。

element.getAttribute() //返回指定屬性值。

element.hasAttribute() //元素是否擁有指定屬性。

element.setAttribute() //設(shè)置屬性值。

element.removeAttribute() //移除屬性。

element.textContent //設(shè)置或返回文本內(nèi)容。

element.innerHTML //設(shè)置或返回元素的內(nèi)容。

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 操作應(yīng)用

點擊切換效果：

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


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

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

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

更新：

silkshadow的github

參考文檔

HTML DOM 對象