當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

DOM相关内容(课程来源:B站后盾人)

發布時間：2023/11/27 生活经验 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 DOM相关内容(课程来源:B站后盾人) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

課程來源:B站后盾人

有關DOM的介紹

在此引用一位大佬的博客的部分內容:
JS-DOM
https://blog.csdn.net/weixin_45077672/article/details/116693698?spm=1001.2014.3001.5501

1.什么是DOM

文檔對象模型（Document Object Model，簡稱DOM），是W3C組織推薦的處理可擴展置標語言(HTML或者XML)的標準編程接口。
W3C已經定義了一系列的DOM接口，通過這些DOM接口可以改變網頁的內容，結構和樣式。

2.DOM樹

文檔:一個頁面就是一個文檔，DOM中使用document表示
元素:頁面中所有標簽都是元素，DOM中使用element表示
節點:網頁中所有內容都是節點(標簽、屬性、文本、注釋等)，DOM中使用node表示
DOM把以上內容都看做是對象

困擾新手的DOM加載問題

3.html
如果不加defer="defer",會找不到元素

<!DOCTYPE html>
<html lang="en"><head><!-- defer:內容渲染之后再來執行腳本內容 --><script src="3.js" defer="defer"></script></head><body><h2 id="hd">houdunren.com</h2></body>
</html>

3.js

const el = document.getElementById('hd')
console.log(el)

運行結果:

如果不加呢?

因為在頁面渲染之前就加載了js,這個時候是找不到這個元素的.
將js語句放在body內的最下面試一試:

<!DOCTYPE html>
<html lang="en"><head><!-- defer:內容渲染之后再來執行腳本內容 --></head><body><h2 id="hd">houdunren.com</h2><script src="3.js" defer="defer"></script></body>
</html>

運行結果:

可見這個方法是可行的.

節點node的概念

所有東西都是節點,標簽,屬性,文本,均是節點(Node)
document.是節點的起始,節點是一個樹狀的關系
document.childNodes是所有的子節點

4.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /></head><body><h2>houdunren.com</h2><!-- 注釋也是節點哦 --><script>// console.log(document.childNodes[1].childNodes)const h1 = document.childNodes[1].childNodes[2]// 節點類型是用數字進行表示的console.log('document.nodeType:', document.nodeType)console.log('h1.childNodes[0].nodeType:', h1.childNodes[0].nodeType)console.log('h1.childNodes[0]:', h1.childNodes[0])console.log('h1.childNodes[1].nodeType:', h1.childNodes[1].nodeType)console.log('h1.childNodes[1]:', h1.childNodes[1])//h1.childNodes包含些什么?定義的h1到底是啥?打印出來看一下,似乎是整個body 的內容~console.log('h1.childNodes:', h1.childNodes)</script></body>
</html>

運行結果:

容易忘記的是文本,注釋也是節點

Node 節點對象的原型繼承

重點看代碼和console的輸出
5.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>后盾人</title></head><body><h2 id="h2 id here">houdunren.com</h2><input type="text" id="inputId" value="后盾人" /></body>
</html>

我把script標簽部分單獨提出來,這樣看起來直觀一些.
可以分別關注body內有什么,再看看腳本里寫了什么.
body內:一個h2標簽,一個input標簽.

<script>// h2 是一個對象const h2 = document.querySelector('h2')// 找它的原型對象:兩種方法console.log('Object.getPrototypeOf(h2):', Object.getPrototypeOf(h2))console.log('h2.__proto__:', h2.__proto__)function prototype(el) {const prototypes = []prototypes.push(el.__proto__)// 為空就不用找了,"..."是解構賦值,展開結果.prototypes.push(...(el.__proto__ ? prototype(el.__proto__) : []))return prototypes}console.log('prototype(h2):', prototype(h2))console.log('h2.id:', h2.id)const input = document.querySelector('input')console.log('prototype(input):', prototype(input))</script>

const h2 = document.querySelector('h2')是獲取h2標簽
下面有找它的原型的方法,但是都比較老舊,并不這么用
.push():往這個數組末尾添加一個新的項
...:解構賦值:就是把它里面的東西展開
如果el.__proto__為空還要找,就會報錯.

運行結果:

把h2改成h1:看看報錯

通過prototype原型操作節點元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>通過prototype原型操作節點元素</title></head><body><h2 onclick="this.color('red')">houdunren.com</h2><h1 onclick="this.hide()">向軍</h1><div onclick="this.color('blue')">this is div element</div><script>const h2 = document.querySelector('h2')const h1 = document.querySelector('h1')Node.prototype = Object.assign(Node.prototype, {color(color) {// this代表當前觸發這個事件的對象this.style.color = color},hide() {this.style.display = 'none'},})console.log('h2.__proto__:', h2.__proto__)console.log('h1.__proto__:', h1.__proto__)// 東西沒了,也不會報錯</script></body>
</html>

觀察:body里一共有3個元素一個h2,一個h1,和一個div
this代表當前觸發這個事件的對象

運行結果:(點擊前)

點擊后

總結

以上是生活随笔為你收集整理的DOM相关内容(课程来源:B站后盾人)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。