<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          一文解讀JavaScript中的文檔對(duì)象(DOM)

          共 3884字,需瀏覽 8分鐘

           ·

          2021-09-11 06:40

          點(diǎn)擊上方“IT共享之家”,進(jìn)行關(guān)注

          回復(fù)“資料”可獲贈(zèng)Python學(xué)習(xí)福利

          仰天大笑出門去,我輩豈是蓬蒿人。

          大家好,我是IT共享者,人稱皮皮。

          前言

          相信做網(wǎng)站對(duì)JavaScript再熟悉不過(guò)了,它是一門腳本語(yǔ)言,不同于Python的是,它是一門瀏覽器腳本語(yǔ)言,而Python則是服務(wù)器腳本語(yǔ)言,我們不光要會(huì)Python,還要會(huì)JavaScript,因?yàn)樗鼘?duì)做網(wǎng)頁(yè)方面是有很大作用的。


          1.文檔對(duì)象(DOM)

          1).Document對(duì)象

          這是我們用的最普遍的一個(gè)文檔對(duì)象了,專門用來(lái)操作DOM節(jié)點(diǎn)時(shí)用。

          1)).獲取元素
          document.getElementById()           #通過(guò)id查找HTML元素document.getElementsByName()        #通過(guò)name查找HTML元素document.getElementsByTagName()     #通過(guò)標(biāo)簽名查找HTML元素document.getElementsByClassName()   #通過(guò)類名查找HTML元素 document.querySelector(".h")        #第一個(gè)類名為 "h" 的元素document.querySelectorAll("div.no, div#h") #所有class"no"或者id為"h"的div元素document.body          #獲取body標(biāo)簽document.documentElement   #獲取html標(biāo)簽

          2)).獲取網(wǎng)頁(yè)內(nèi)容
          document.cookie        #網(wǎng)頁(yè)cookiedocument.domain        #文檔的域名document.lastModified  #文檔被最后修改的日期和時(shí)間document.referrer      #載入當(dāng)前文檔的文檔的URLdocument.title         #當(dāng)前文檔的標(biāo)題document.URL           #當(dāng)前文檔的URLdocument.doctype       #當(dāng)前文檔的doctypedocument.baseURI       #當(dāng)前文檔的絕對(duì)URIdocument.documentMode   #瀏覽器使用的模式document.documentURI    #文檔的URIdocument.implementation #DOM實(shí)現(xiàn)document.inputEncoding  #文檔的編碼(字符集)document.readyState     #文檔的(加載)狀態(tài)document.strictErrorChecking    #是否強(qiáng)制執(zhí)行錯(cuò)誤檢查

          3)).文檔寫入
          document.write('hello world')   向文檔寫入文本document.writeln('hello world') 向文檔寫入文本并換行

          4)).獲取集合
          document.all        #所有html元素document.anchors    #所有Anchor引用document.forms      #所有的表單引用document.images     #所有的圖片引用document.links      #所有的超鏈接引用document.scripts    #所有的腳本引用document.embeds     #所有的流媒體引用

          5)).獲取節(jié)點(diǎn)
          childNodes          #獲取子節(jié)點(diǎn)的集合 ,返回?cái)?shù)組 ,并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息。children            #獲取子節(jié)點(diǎn)的集合 ,返回?cái)?shù)組   firstChild          #獲取第一個(gè)子元素  并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息firstElementChild   #獲取第一個(gè)子節(jié)點(diǎn)lastChild           #獲取最后一個(gè)子節(jié)點(diǎn) 并把換行和空格也當(dāng)成是節(jié)點(diǎn)信息lastElementChild    #獲取最后一個(gè)子節(jié)點(diǎn)parentNode          #獲取父節(jié)點(diǎn)parentElement       #獲取父節(jié)點(diǎn)(IE)offsetParent        #獲取所有父節(jié)點(diǎn)  對(duì)應(yīng)的值是body下的所有節(jié)點(diǎn)信息previousSibling         #獲取上一個(gè)兄弟節(jié)點(diǎn)  匹配字符,包括換行和空格,而不是節(jié)點(diǎn)previousElementSibling  #獲取上一個(gè)兄弟節(jié)點(diǎn)  直接匹配節(jié)點(diǎn)nextSibling             #獲取下一個(gè)兄弟節(jié)點(diǎn)  匹配字符,包括換行和空格,而不是節(jié)點(diǎn)nextElementSibling      #獲取下一個(gè)兄弟節(jié)點(diǎn)  直接匹配節(jié)點(diǎn)ownerDocument           #元素的根節(jié)點(diǎn)

          這里我們獲取到了所有的Div元素,我們可以針對(duì)性的獲取一個(gè)ID下的Div的子元素以及它的兄弟和父,子元素,如下:

          6)).創(chuàng)建節(jié)點(diǎn)

          我們可以自定義節(jié)點(diǎn)并添加值,不過(guò)要將它添加到文檔中去,所以必須添加節(jié)點(diǎn),一般和下方的增加節(jié)點(diǎn)配套使用。

          document.createElement(標(biāo)簽)  #創(chuàng)建HTML元素document.createTextNode(文本) #給文檔添加文本document.createComment(文本)  #創(chuàng)建一個(gè)注釋節(jié)點(diǎn)document.createDocumentFragment() #創(chuàng)建文檔粉碎節(jié)點(diǎn)
          7)).增加節(jié)點(diǎn)
          appendChild(節(jié)點(diǎn)) #節(jié)點(diǎn)被添加到元素的末尾insertBefore(a,b) #a節(jié)點(diǎn)會(huì)插入b節(jié)點(diǎn)的前面

          8)).刪除節(jié)點(diǎn)
          removeChild(節(jié)點(diǎn)名)  #被移除的節(jié)點(diǎn)仍在文檔中,只是文檔中已沒(méi)有其位置了
          9)).替換節(jié)點(diǎn)
          replaceChild(插入的節(jié)點(diǎn),被替換的節(jié)點(diǎn))
          10)).復(fù)制節(jié)點(diǎn)
          a.cloneChild() #復(fù)制a節(jié)點(diǎn),復(fù)制出來(lái)的節(jié)點(diǎn)作為返回值為true時(shí),則a元素后代也一并復(fù)制。否則,僅復(fù)制a元素本身

          11)).節(jié)點(diǎn)屬性
          #節(jié)點(diǎn)類型 nodeType 有三種情況#1.元素節(jié)點(diǎn)  2.屬性節(jié)點(diǎn)  3.文本節(jié)點(diǎn)
          #節(jié)點(diǎn)名稱 nodeName
          #節(jié)點(diǎn)值 nodeValue #元素節(jié)點(diǎn)沒(méi)節(jié)點(diǎn)值,為null #文本節(jié)點(diǎn)的節(jié)點(diǎn)值就是文本#屬性節(jié)點(diǎn)的節(jié)點(diǎn)值就是該屬性值
          #節(jié)點(diǎn)屬性獲取a.widtha['width']a.gerAttribute(屬性名) 返回指定的屬性值a.gerAttributeNode(屬性名) 返回指定的屬性節(jié)點(diǎn)節(jié)點(diǎn)屬性設(shè)置a.width=400a['width']=400a.attributes['width']=400a.setAttribute('width',400) 添加指定的屬性a.setAttributeNode(b) 添加指定的屬性節(jié)點(diǎn)
          #節(jié)點(diǎn)屬性刪除a.removeChild(子節(jié)點(diǎn)) 從元素中移除子節(jié)點(diǎn)a.removeAttribute(屬性) 從元素中移除指定屬性a.removeAttributeNode(屬性) 移除指定的屬性節(jié)點(diǎn),并返回被移除的節(jié)點(diǎn)
          a.id 獲取當(dāng)前元素的ida.className 獲取當(dāng)前元素的classa.classList 獲取當(dāng)前元素的class列表
          a.accessKey='w' 設(shè)置或返回元素的快捷鍵a.namespaceURI 返回指定節(jié)點(diǎn)的命名空間的 URIa.dir 設(shè)置或返回元素的內(nèi)容是否可編輯a.normalize() 合并元素中相鄰的文本節(jié)點(diǎn),并移除空的文本節(jié)點(diǎn)a.tabIndex='3' 設(shè)置或返回元素的tab鍵控制次序a.tagName 返回元素的標(biāo)簽名a.textContent 設(shè)置或返回節(jié)點(diǎn)及其子代的文本內(nèi)容a.title 設(shè)置或返回元素的標(biāo)題屬性a.item(num) 返回節(jié)點(diǎn)列表中位于指定下標(biāo)的節(jié)點(diǎn)a.length 返回節(jié)點(diǎn)列表中的節(jié)點(diǎn)數(shù)

          12)).獲取元素文本
          a.innerHTML  獲取或者設(shè)置對(duì)象內(nèi)的HTMLa.innerText  獲取或者設(shè)置對(duì)象內(nèi)的文本a.outerHTML  獲取或者設(shè)置對(duì)象外的HTMLa.outerText  獲取或者設(shè)置對(duì)象外的文本a.value      獲取或者設(shè)置表單元素的值

          總結(jié)

          這篇文章主要介紹了JavaScript的文檔對(duì)象。下一篇文章,我們繼續(xù)介紹JavaScript,敬請(qǐng)期待!

          看完本文有收獲?請(qǐng)轉(zhuǎn)發(fā)分享給更多的人

          IT共享之家

          入群請(qǐng)?jiān)谖⑿藕笈_(tái)回復(fù)【入群】

          ------------------- End -------------------

          往期精彩文章推薦:

          瀏覽 43
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  天天射天天射天天要 | 又黄又爽无遮拦网站 | 欧美日韩乱国产 | 国产综合在线色 | 伊人婷婷色五月色婷婷区 |