成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端DOM知識(shí)點(diǎn)

Jokcy / 2105人閱讀

摘要:前端知識(shí)點(diǎn)即文檔對(duì)象模型,是一種用于和文檔的編程接口。指的是返回當(dāng)前元素的所有元素節(jié)點(diǎn),代碼如下打印結(jié)果很直觀的返回元素節(jié)點(diǎn)的屬性。接下來對(duì)比父節(jié)點(diǎn),父元素兩者在通常情況下是一樣的,因?yàn)榘氐墓?jié)點(diǎn)只有可能是元素節(jié)點(diǎn)。運(yùn)行劫奪一致,都是。

前端DOM知識(shí)點(diǎn)
DOM即文檔對(duì)象模型(Document Object Model,DOM)是一種用于HTMLXML文檔的編程接口。它給文檔提供了一種結(jié)構(gòu)化的表示方法,可以改變文檔的內(nèi)容和呈現(xiàn)方式。DOM把網(wǎng)頁和腳本以及其他的編程語言聯(lián)系起來。DOM屬于瀏覽器的,而非JavaScript語言規(guī)范里規(guī)定的核心內(nèi)容。
W3C規(guī)范中常用的DOM節(jié)點(diǎn)類型有以下幾種:

一、查找元素
1.直接查找
document.getElementById                     根據(jù)ID獲取一個(gè)標(biāo)簽
document.getElementsByName             根據(jù)name屬性獲取標(biāo)簽集合
document.getElementsByClassName     根據(jù)class屬性獲取標(biāo)簽集合
document.getElementsByTagName        根據(jù)標(biāo)簽名獲取標(biāo)簽集合
2.間接查找
parentNode       // 父節(jié)點(diǎn)
childNodes        // 所有的子節(jié)點(diǎn)
firstChild            // 第一個(gè)子節(jié)點(diǎn)
lastChild            // 最后一個(gè)子節(jié)點(diǎn)
nextSibling        // 下一個(gè)兄弟節(jié)點(diǎn)
previousSibling  // 上一個(gè)兄弟節(jié)點(diǎn)
parentElement                     // 父節(jié)點(diǎn)標(biāo)簽元素
children                               // 所有的子標(biāo)簽
firstElementChild                // 第一個(gè)子標(biāo)簽元素
lastElementChild               // 最后一個(gè)子標(biāo)簽元素
nextElementSibling           // 下一個(gè)子標(biāo)簽元素
previousElementSibling    // 上一個(gè)子標(biāo)簽元素
區(qū)別:childNodes,children
childNodes指的是返回當(dāng)前元素子節(jié)點(diǎn)的所有類型節(jié)點(diǎn),其中連空格和換行符都會(huì)默認(rèn)文本節(jié)點(diǎn)

打印結(jié)果:

其中空格和文本均打印為文本節(jié)點(diǎn)
如果給li標(biāo)簽添加屬性總長度不會(huì)改變,因?yàn)?b>childNodes只會(huì)返回文本和元素節(jié)點(diǎn),并不能返回屬性節(jié)點(diǎn)。
children指的是返回當(dāng)前元素的所有元素節(jié)點(diǎn),代碼如下

打印結(jié)果:

children很直觀的返回元素節(jié)點(diǎn)的屬性。
接下來對(duì)比parentNode(父節(jié)點(diǎn)),parentElement(父元素)
兩者在通常情況下是一樣的,因?yàn)榘氐墓?jié)點(diǎn)只有可能是元素節(jié)點(diǎn)。
文本節(jié)點(diǎn)只是文本本身,文本節(jié)點(diǎn)的父節(jié)點(diǎn)是元素節(jié)點(diǎn)。

運(yùn)行劫奪一致,都是HTML。然而再往上一層,就是根部document,并不是元素,執(zhí)行下面代碼:

執(zhí)行結(jié)果:

區(qū)別就在于parentNode找的是節(jié)點(diǎn),就可以顯示出來,parentElement找的是元素,因此找到根部document的時(shí)候就出現(xiàn)值為null的報(bào)錯(cuò)。

二、操作
1.內(nèi)容
innerText       //文本
innerHTML   //HTML內(nèi)容
value            //值
2.屬性
attributes     // 獲取所有標(biāo)簽屬性
setAttribute(key,value)  // 設(shè)置標(biāo)簽屬性
getAttribute(key)    // 獲取指定標(biāo)簽屬性
3.class
className    // 獲取所有的類名
classList.remove(cls)   // 刪除指定類
classList.add(cls)         // 添加類
4.標(biāo)簽操作

a.創(chuàng)建標(biāo)簽

// 方式一
var tag = document.createElement("a")
tag.innerText = "wupeiqi"
tag.className = "c1"
tag.
  
// 方式二
var tag = "

b.操作標(biāo)簽

// 方式一
var obj = "";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement("afterBegin",document.createElement("p"))
  
//注意:第一個(gè)參數(shù)只能是"beforeBegin"、 "afterBegin"、 "beforeEnd"、 "afterEnd"
  
// 方式二
var tag = document.createElement("a")
xxx.appendChild(tag)
xxx.insertBefore(tag,xxx[1])
5.樣式操作
var obj = document.getElementById("i1")
  
obj.style.fontSize = "32px";
obj.style.backgroundColor = "red";
6.位置操作
//總文檔高度
document.documentElement.offsetHeight
   
//當(dāng)前文檔占屏幕高度
document.documentElement.clientHeight
   
//自身高度
tag.offsetHeight
   
//距離上級(jí)定位高度
tag.offsetTop
   
//父定位標(biāo)簽
tag.offsetParent
   
//滾動(dòng)高度
tag.scrollTop
  
/*
    clientHeight -> 可見區(qū)域:height + padding
    clientTop    -> border高度
    offsetHeight -> 可見區(qū)域:height + padding + border
    offsetTop    -> 上級(jí)定位標(biāo)簽的高度
    scrollHeight -> 全文高:height + padding
    scrollTop    -> 滾動(dòng)高度
    特別的:
        document.documentElement代指文檔根節(jié)點(diǎn)
*/
7.提交表單
document.geElementById("form").submit()
8.其他操作
console.log                 輸出框
alert                       彈出框
confirm                     確認(rèn)框
   
// URL和刷新
location.href               獲取URL
location.href = "url"       重定向
location.reload()           重新加載
   
// 定時(shí)器
setInterval                 多次定時(shí)器
clearInterval               清除多次定時(shí)器
setTimeout                  單次定時(shí)器
clearTimeout                清除單次定時(shí)器

三、事件

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/101294.html

相關(guān)文章

  • 前端應(yīng)該知道的基本知識(shí)

    摘要:所有我們不熟悉或者沒有掌握的知識(shí)皆可稱之為知識(shí)盲區(qū),有知識(shí)盲區(qū)并不可怕,針對(duì)知識(shí)盲區(qū)去學(xué)習(xí)即可。只有這樣,我們才會(huì)準(zhǔn)確知道自己的知識(shí)盲區(qū)所處何處,以及發(fā)現(xiàn)更多的知識(shí)盲區(qū)。節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象是,其他的具體節(jié)點(diǎn)對(duì)象全都是繼承自對(duì)象。 前端時(shí)間在部門內(nèi)進(jìn)行分享,準(zhǔn)備素材時(shí)偶然發(fā)現(xiàn)下面的一個(gè)現(xiàn)象,因?yàn)楹彤?dāng)時(shí)分享的主題無關(guān),就先記下來了,事后重新審視,并把一些思考記錄如下: 一、問題 HTML: ...

    2bdenny 評(píng)論0 收藏0
  • 前端識(shí)點(diǎn)總結(jié)——DOM

    摘要:前端知識(shí)點(diǎn)總結(jié)什么是什么是專門操作網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)為什么統(tǒng)一不同瀏覽器操作網(wǎng)頁內(nèi)容的標(biāo)準(zhǔn)優(yōu)點(diǎn)幾乎所有瀏覽器兼容什么是網(wǎng)頁中所有內(nèi)容在內(nèi)存中都是保存在一棵樹形結(jié)構(gòu)中網(wǎng)頁中每項(xiàng)內(nèi)容元素文本屬性注釋,都是樹上的一個(gè)節(jié)點(diǎn)對(duì)象。 前端知識(shí)點(diǎn)總結(jié)——DOM 1.什么是DOM: Document Object Model 什么是: 專門操作網(wǎng)頁內(nèi)容的API標(biāo)準(zhǔn)——w3c 為什么: 統(tǒng)一不同瀏覽器操作網(wǎng)...

    Vultr 評(píng)論0 收藏0
  • 前端渲染過程的二三事

    摘要:前端渲染過程的二三事本文不會(huì)介紹整個(gè)前端渲染過程的步驟,只是記錄最近閱讀的文章的些許思考和感悟。那么現(xiàn)在我們可以明白這個(gè)問題的關(guān)鍵所在了,因?yàn)樵诖蟛糠猪撁嬷惺菗碛械?,而由于其解析順序,那么在事件之前必定已?jīng)成功構(gòu)造樹。 前端渲染過程的二三事 本文不會(huì)介紹整個(gè)前端渲染過程的步驟,只是記錄最近閱讀的文章的些許思考和感悟。(文章地址一(系列),文章地址二) 希望大家在閱讀這篇文章之前能將上述...

    Rindia 評(píng)論0 收藏0
  • 前端基礎(chǔ)入門

    摘要:手把手教你做個(gè)人火的時(shí)候,隨便一個(gè)都能賺的盆滿缽滿,但是,個(gè)人沒有服務(wù)端,沒有美工,似乎就不能開發(fā)了,真的是這樣的嗎秘密花園經(jīng)典的中文手冊(cè)。涵蓋前端知識(shí)體系知識(shí)結(jié)構(gòu)圖書推薦以及入門視頻教程,全的簡(jiǎn)直不要不要的了。 JavaScript 實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制指定區(qū)域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制區(qū)域文本的功能,不需要依賴 flash。...

    shinezejian 評(píng)論0 收藏0
  • 前端性能優(yōu)化之--頁面渲染優(yōu)化全面解析

    摘要:下面我們撇開網(wǎng)絡(luò)方面的優(yōu)化,只分析靜態(tài)資源方面的優(yōu)化。不過,也會(huì)阻止的構(gòu)建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析,我們可以清楚的認(rèn)識(shí)到,非必要優(yōu)先加載的,選擇異步加載是最優(yōu)選擇。 為什么做優(yōu)化 經(jīng)典問題:白屏?xí)r間過長,用戶體驗(yàn)差產(chǎn)生的原因:網(wǎng)絡(luò)問題、關(guān)鍵渲染路徑(CRP)問題 怎么做優(yōu)化 如何做好優(yōu)化呢,網(wǎng)上隨便一搜,就有很多優(yōu)化總結(jié),無非就是網(wǎng)絡(luò)優(yōu)化、靜態(tài)資源(h...

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

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<