DOM相关内容(课程来源:B站 后盾人)
生活随笔
收集整理的這篇文章主要介紹了
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站 后盾人)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求一个qq个性网网名最新。
- 下一篇： [JavaScript]走进 JAVAS