亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

前端DOM知識點

Jokcy / 2144人閱讀

摘要：前端知識點即文檔對象模型，是一種用于和文檔的編程接口。指的是返回當前元素的所有元素節(jié)點，代碼如下打印結(jié)果很直觀的返回元素節(jié)點的屬性。接下來對比父節(jié)點，父元素兩者在通常情況下是一樣的，因為包含元素的節(jié)點只有可能是元素節(jié)點。運行劫奪一致，都是。

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

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

打印結(jié)果：

其中空格和文本均打印為文本節(jié)點
如果給li標簽添加屬性總長度不會改變，因為childNodes只會返回文本和元素節(jié)點，并不能返回屬性節(jié)點。
children指的是返回當前元素的所有元素節(jié)點，代碼如下

打印結(jié)果：

children很直觀的返回元素節(jié)點的屬性。
接下來對比parentNode（父節(jié)點），parentElement（父元素）
兩者在通常情況下是一樣的，因為包含元素的節(jié)點只有可能是元素節(jié)點。
文本節(jié)點只是文本本身，文本節(jié)點的父節(jié)點是元素節(jié)點。

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

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

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

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

a.創(chuàng)建標簽

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

b.操作標簽


// 方式一
var obj = "";
xxx.insertAdjacentHTML("beforeEnd",obj);
xxx.insertAdjacentElement("afterBegin",document.createElement("p"))
  
//注意：第一個參數(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
   
//當前文檔占屏幕高度
document.documentElement.clientHeight
   
//自身高度
tag.offsetHeight
   
//距離上級定位高度
tag.offsetTop
   
//父定位標簽
tag.offsetParent
   
//滾動高度
tag.scrollTop
  
/*
    clientHeight -> 可見區(qū)域：height + padding
    clientTop    -> border高度
    offsetHeight -> 可見區(qū)域：height + padding + border
    offsetTop    -> 上級定位標簽的高度
    scrollHeight -> 全文高：height + padding
    scrollTop    -> 滾動高度
    特別的：
        document.documentElement代指文檔根節(jié)點
*/


7.提交表單


document.geElementById("form").submit()


8.其他操作


console.log                 輸出框
alert                       彈出框
confirm                     確認框
   
// URL和刷新
location.href               獲取URL
location.href = "url"       重定向
location.reload()           重新加載
   
// 定時器
setInterval                 多次定時器
clearInterval               清除多次定時器
setTimeout                  單次定時器
clearTimeout                清除單次定時器


三、事件

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/101294.html

相關(guān)文章

  • 前端應該知道的基本知識

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

    2bdenny 評論0 收藏0

  • 前端知識點總結(jié)——DOM

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

    Vultr 評論0 收藏0

  • 前端渲染過程的二三事

    摘要：前端渲染過程的二三事本文不會介紹整個前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。那么現(xiàn)在我們可以明白這個問題的關(guān)鍵所在了，因為在大部分頁面中是擁有的，而由于其解析順序，那么在事件之前必定已經(jīng)成功構(gòu)造樹。 前端渲染過程的二三事 本文不會介紹整個前端渲染過程的步驟，只是記錄最近閱讀的文章的些許思考和感悟。（文章地址一（系列）,文章地址二） 希望大家在閱讀這篇文章之前能將上述...

    Rindia 評論0 收藏0

  • 前端基礎(chǔ)入門

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

    shinezejian 評論0 收藏0

  • 前端性能優(yōu)化之--頁面渲染優(yōu)化全面解析

    摘要：下面我們撇開網(wǎng)絡(luò)方面的優(yōu)化，只分析靜態(tài)資源方面的優(yōu)化。不過，也會阻止的構(gòu)建和延緩網(wǎng)頁渲染。未優(yōu)化正常加載優(yōu)化后異步加載根據(jù)上面的分析，我們可以清楚的認識到，非必要優(yōu)先加載的，選擇異步加載是最優(yōu)選擇。 為什么做優(yōu)化 經(jīng)典問題：白屏時間過長，用戶體驗差產(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 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<