成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript的DOM操作

琛ｈ。 / 3155人閱讀

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

JavaScript的DOM操作 什么是 DOM? 
文檔對(duì)象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對(duì)文檔的結(jié)構(gòu)化的表述，并定義了一種方式可以使從程序中對(duì)該結(jié)構(gòu)進(jìn)行訪問，從而改變文檔的結(jié)構(gòu)，樣式和內(nèi)容。DOM 將文檔解析為一個(gè)由節(jié)點(diǎn)和對(duì)象（包含屬性和方法的對(duì)象）組成的結(jié)構(gòu)集合。


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

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

文檔是一個(gè)文檔。

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

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

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

DOM 創(chuàng)建

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

document.createAttribute 創(chuàng)建一個(gè)屬性節(jié)點(diǎn)

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

DOM 查詢

querySelector //返回匹配的第一個(gè)元素

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

document.getElementById

document.getElementsByClassName

document.getElementsByTagName

element.parentNode //父節(jié)點(diǎn)

element.firstChild //第一個(gè)子元素節(jié)點(diǎn)

element.lastChild //最后一個(gè)子元素節(jié)點(diǎn)

element.previousSibling //上一個(gè)元素節(jié)點(diǎn)

element.nextSibling //下一個(gè)元素節(jié)點(diǎn)

DOM 更改

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

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

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

element.cloneNode(deep)

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


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


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

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

屬性操作

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)用

點(diǎn)擊切換效果：

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


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

panels.forEach(panel=>{panel.addEventListener("click",toggelClass)});  //監(jiān)聽點(diǎ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 對(duì)象

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83445.html

相關(guān)文章

  • 001-讀書筆記-JavaScript高級(jí)程序設(shè)計(jì) JavaScript簡介

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

    masturbator 評(píng)論0 收藏0

  • 個(gè)人常用JavaScript及React常用優(yōu)化總結(jié)

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

    yuanxin 評(píng)論0 收藏0

  • Javascript簡介

    摘要：以下內(nèi)容都是一些概念性的知識(shí)點(diǎn)弄懂這些基本的概念是我們?cè)谑澜缈吹酶h(yuǎn)的墊腳石誕生于年年公司開發(fā)發(fā)布時(shí)臨時(shí)將名字改為當(dāng)時(shí)它的主要目的是處理以前由服務(wù)端語言負(fù)責(zé)的輸入驗(yàn)證操作隨著其發(fā)展現(xiàn)在已不再局限于數(shù)據(jù)驗(yàn)證而是具備了與瀏覽器窗口及其內(nèi)容等幾乎 以下內(nèi)容都是一些概念性的知識(shí)點(diǎn),弄懂這些基本的概念是我們?cè)贘avaScript世界看得更遠(yuǎn)的墊腳石. Javascript Javascript誕...

    Near_Li 評(píng)論0 收藏0

  • JavaScript 簡介

    摘要：簡介原文鏈接簡稱是一種輕量級(jí)，解釋型的編程語言，其函數(shù)是一等公民。標(biāo)準(zhǔn)的目標(biāo)是讓任何一種程序設(shè)計(jì)語言能操控使用任何一種標(biāo)記語言編寫出的任何一份文檔。核心規(guī)定了如何映射基于的文檔結(jié)構(gòu)，以便簡化對(duì)文檔的任意部分的訪問和操作。 JavaScript 簡介 原文鏈接 JavaScript ( 簡稱：JS ) 是一種 輕量級(jí)，解釋型 的編程語言，其函數(shù)是一等公民。眾所周知，它是用于網(wǎng)頁開發(fā)的腳...

    URLOS 評(píng)論0 收藏0

  • 談?wù)劄g覽器里的JavaScript

    摘要：而與最大的區(qū)別在于與瀏覽器溝通的窗口，不涉及網(wǎng)頁內(nèi)容。完全依賴于瀏覽器廠商實(shí)作本身無標(biāo)準(zhǔn)規(guī)范，而有著所制定的標(biāo)準(zhǔn)來規(guī)范。而透過選取出來的節(jié)點(diǎn)，我們可以通過操作屬性來變更它的文字。在許多的網(wǎng)頁前端教學(xué)或是文章書籍當(dāng)中，你可能常常聽到這樣的說法：「HTML、CSS 與JavaScript 是網(wǎng)頁前端三大要素」，其中： HTML 負(fù)責(zé)資料與結(jié)構(gòu) CSS 負(fù)責(zé)樣式與呈現(xiàn) JavaScript 負(fù)責(zé)...

    CastlePeaK 評(píng)論0 收藏0

  • JavaScript 是如何工作的：編寫自己的 Web 開發(fā)框架 + React 及其虛擬 DOM

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

    余學(xué)文 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<