DOM : 文檔對象模型
(全稱 : Document Object Model | 簡稱 : DOM)
通過三點認(rèn)識DOM核心
1 . DOM 描繪一個層次化的節(jié)點樹 . 允許開發(fā)人員 (添加 . 修改 . 移除) 使得JavaScript操作HTML頁面 . 不是在操作字符串 . 而是在操作節(jié)點 . 極大的降低了我們編程難度
2 . DOM對很多東西做了抽象 . 給我們開發(fā)人員提供了豐富的API : [ 獲取元素 . css樣式 . 事件 . 動畫 . 元素尺寸 . 元素位置 . 等等... 節(jié)點操作 每個知識體系都非常龐大 . 千絲萬縷]
DOM的結(jié)構(gòu) . 類似于 一棵樹. 所以把DOM也叫作DOM樹 . DOM樹是由很多DOM節(jié)點組成的
文檔 : 一個頁面就是一個文檔 . DOM 中使用 document 表示
元素 : 頁面中的所有標(biāo)簽都是元素 . DOM 中使用 element 表示
節(jié)點 : 網(wǎng)頁中的所有內(nèi)容都是節(jié)點 . 包含( 標(biāo)簽 . 屬性 . 文本 . 注釋 等等..)
DOM樹節(jié)點分為這幾種
元素節(jié)點 1
屬性節(jié)點 2
文本節(jié)點 3
注釋節(jié)點 8
document 文檔節(jié)點 9
DocumentFragment 文檔片段接口 11
DOM節(jié)點屬性
nodeName : 元素節(jié)點的標(biāo)簽名 . 以大寫字母的形參表示 . 只讀 (不能修改)
nodeValue : 文本節(jié)點和注釋節(jié)點的內(nèi)容 . 可讀可寫
nodeType : 節(jié)點的類型 (最有用的) 能幫助我們區(qū)分節(jié)點 只讀
attributes : 元素節(jié)點的屬性集合 (只能修改屬性值) name 屬性名 | value 屬性值
獲取 document 對象模型里面的文檔對象
分為兩種 : get / query
首先講解 : get 獲取的幾種方式
get系列是動態(tài)獲取 每次使用時會重新獲取
get方法 獲取元素 : ID 類名
document.getElementById("ID名");
示例:
注意: 我們都知道網(wǎng)頁上的ID名就像身份證一樣 只會出現(xiàn)一次
所以我們獲取元素也只有一個 就是獲取元素本身
get方法 獲取元素 : class 類名
document.getElementByIdClassName("class類名")
示例:
注意:網(wǎng)頁中標(biāo)簽class的類名會出現(xiàn)很多相同的
這里要注意 此時獲取的是頁面中多個標(biāo)簽元素
因為它們的clss類名相同 會形成一個數(shù)組 數(shù)組里存放了網(wǎng)頁中所有的相同的class類名
get方法 獲取元素 : name類名
document.getElementByIdName("name類名")
示例
注意: 網(wǎng)頁上的相同name的值會出現(xiàn)多次
所以Name所獲取的元素會有多個
因此變量addr指向的是內(nèi)存空間里面的一個數(shù)組
數(shù)組存放了所有name名稱為指定的name的元素
get方法 獲取元素 : 標(biāo)簽名
document.getElementByIdTagName("標(biāo)簽")
示例
注意:因為一個網(wǎng)頁上的同一類的標(biāo)簽會出現(xiàn)多次 . 所以TagName(標(biāo)簽名)獲取的元素會有多個 . 此時變量 content指向的是內(nèi)存空間的一個數(shù)組 . 數(shù)組里面存放了網(wǎng)頁所有標(biāo)簽為div的元素
好啦 ~~ 咱們get獲取講完了... 如果有不足的地方 請留下您的建議
接下來咱們講query 獲取的方式
query 獲取之選擇器獲取 很奇特
query系列是靜態(tài)獲取
咱們先講第一種
document.querySelector("標(biāo)簽,ID名,class類名") // 等多種...;
示例 :
注意 : 這里query 獲取的只能是一個元素
如果有多個標(biāo)簽和類名相同獲取的是頁面中第一次出現(xiàn)的那個元素
如果想獲取多個怎么辦呢?
別著急 一定有方法的~
第二種獲取多個元素的方法
document.querySelectorAll("標(biāo)簽,ID名,class類名"); // 等多種...
示例 :
注意 : 這里 All 選擇器選中的元素是多少就是多少
如果是多個元素返回的是一個數(shù)組
即便只選擇到了一個元素 . 返回的也是一個數(shù)組
get 和 query 的獲取的區(qū)別
get 和 query 的獲取的節(jié)點區(qū)別
后續(xù)一定更加精致 不喜勿噴
留下您最好的建議 給予我這個{ 新手 }最好的幫助
今日打卡 : 2020.05.22
