JavaScript的DOM操作

琛ｈ。發布于2019-08-20 17:16 / 3099人閱讀

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

JavaScript的DOM操作 什么是 DOM?

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

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

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

文檔是一個文檔。

所有的HTML元素都是元素節點。

所有 HTML 屬性都是屬性節點。

文本插入到 HTML 元素是文本節點。

DOM 創建

document.createElement 創建元素節點

document.createAttribute 創建一個屬性節點

document.createTextNode 創建文本節點

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");
}

更新：

silkshadow的github

參考文檔

HTML DOM 對象

云服務器 GPU云服務器 javascript_dom操作 javascript的dom對象 javascript的dom編程 Dom操作

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83445.html

001-讀書筆記-JavaScript高級程序設計 JavaScript簡介

摘要：由于計算機的國際化，組織的標準牽涉到很多其他國家，因此組織決定改名表明其國際性。規范由萬維網聯盟制定。級標準級標準是不存在的，級一般指的是最初支持的。這篇筆記的內容對應的是《JavaScript高級程序設計(第三版)》中的第一章。 1.ECMA 和 ECMA-262 ECMA 是歐洲計算機制造商協會的縮寫，全程是 European Computer Manufacturers Ass...

masturbator 2019-08-21 17:18 評論0 收藏0
個人常用JavaScript及React常用優化總結

摘要：插件性能優化及個人常用優化方法經常會觸發視覺變化。作用域鏈指的是當前作用于下可用變量的集合，它在各種主流瀏覽器中至少包含兩個部分局部變量的集合和全局變量的集合。在考慮優化時，數值和變量的性能差不多，并且速度顯著優于對象屬性和數組元素。 JavaScript 插件性能優化及個人react常用優化方法 JavaScript 經常會觸發視覺變化。有時是直接通過樣式操作，有時是會產生視覺變化...

yuanxin 2019-08-20 15:07 評論0 收藏0
Javascript簡介

摘要：以下內容都是一些概念性的知識點弄懂這些基本的概念是我們在世界看得更遠的墊腳石誕生于年年公司開發發布時臨時將名字改為當時它的主要目的是處理以前由服務端語言負責的輸入驗證操作隨著其發展現在已不再局限于數據驗證而是具備了與瀏覽器窗口及其內容等幾乎以下內容都是一些概念性的知識點,弄懂這些基本的概念是我們在JavaScript世界看得更遠的墊腳石. Javascript Javascript誕...

Near_Li 2019-08-21 10:40 評論0 收藏0
JavaScript 簡介

摘要：簡介原文鏈接簡稱是一種輕量級，解釋型的編程語言，其函數是一等公民。標準的目標是讓任何一種程序設計語言能操控使用任何一種標記語言編寫出的任何一份文檔。核心規定了如何映射基于的文檔結構，以便簡化對文檔的任意部分的訪問和操作。 JavaScript 簡介原文鏈接 JavaScript ( 簡稱：JS ) 是一種輕量級，解釋型的編程語言，其函數是一等公民。眾所周知，它是用于網頁開發的腳...

URLOS 2019-08-20 10:33 評論0 收藏0
談談瀏覽器里的JavaScript

摘要：而與最大的區別在于與瀏覽器溝通的窗口，不涉及網頁內容。完全依賴于瀏覽器廠商實作本身無標準規范，而有著所制定的標準來規范。而透過選取出來的節點，我們可以通過操作屬性來變更它的文字。在許多的網頁前端教學或是文章書籍當中，你可能常常聽到這樣的說法：「HTML、CSS 與JavaScript 是網頁前端三大要素」，其中： HTML 負責資料與結構 CSS 負責樣式與呈現 JavaScript 負責...

CastlePeaK 2019-05-23 17:32 評論0 收藏0
JavaScript 是如何工作的：編寫自己的 Web 開發框架 + React 及其虛擬 DOM

摘要：與大多數全局對象不同，沒有構造函數。為什么要設計更加有用的返回值早期寫法寫法函數式操作早期寫法寫法可變參數形式的構造函數一般寫法寫法當然還有很多，大家可以自行到上查看什么是代理設計模式代理模式，為其他對象提供一種代理以控制對這個對象的訪問。這是專門探索 JavaScript 及其所構建的組件的系列文章的第 19 篇。如果你錯過了前面的章節，可以在這里找到它們：想閱讀更多優質文章請...

余學文 2019-08-26 13:30 評論0 收藏0