DOM

時間 2019-12-04

標籤 dom 欄目 HTML 简体版

原文原文鏈接

DOM

DOM就是你們一塊兒YY出來的頁面的一種結構。由3個部分組成，Document,Object,Model。
Document就是寫代碼的那些標籤組成的，以下圖：
javascript

Object就是把Document轉換成對象獲得的，關係以下圖。Javascript類型中，它們都屬於Node，Node又屬於Object，關係以下下圖：

php

Model就是上面這樣模式的名字，文檔對象模型。html

Node

正如像function,Array同樣，Node也有不少本身的方法和屬性。Array的方法和屬性用來對數組進行操做，Node的方法和屬性就用來對節點進行操做。對節點進行操做意思就是在DOM這顆樹上爬來爬去，尋找須要的元素（element）,文本（text）,文檔（document）等，進行【刪增改查】。java

Node主要屬性

父節點和子節點

parentElement
parentNode

childNodesnode

得到目標元素的全部子節點，這是對代碼來說的，因此也包括了寫代碼時的回車換行（text節點）

children數組
```
得到目標元素的全部子標籤
```
firstChild瀏覽器
```
得到目標元素第一個子節點
```
firstElementChildapp
```
得到目標元素第一個子標籤
```
lastChilddom
```
得到目標元素最後一個子節點
```
lastElementChild編輯器
```
得到目標元素最後一個子標籤
```

獲取文本

innerText

修改節點的innerText，會刪除節點裏面的全部內容，改成修改的值

要在後面添加文本內容，請這樣寫：
var textnode=document.createTextNode("helloMyLove");    //建立文本節點
xxx.appendChild(textnode);      //添加文本節點

或者聯成一句：
xxx.appendChild(document.createTextNode("helloMyLove");

textContext

請參考：
https://developer.mozilla.org/zh-CN/docs/Web/API/Node/textContent
👆👆👆其中包括和 innerText 的區別👆👆👆

outerText(whatever)

獲取自己屬性

nodeName

得到節點名稱，注意除了 svg 外，名稱都是大寫

nodeType

得到節點性質
返回值一、二、三、四、5......，從前內存緊張，存數字節省內存，對應的性質本身記。。。。。。

參考網址：https://developer.mozilla.org...

nodeValue(whatever)
```
返回或設置節點值
```

兄弟節點

nextSibling
nextElementSibling
previousSibling
```
得到目標元素前一個節點
```
previousElementSibling
```
得到目標元素前一個標籤
```

其它

ownerDocument(whatever)

返回文檔屬於哪個文檔，適用於存在 iframe 的狀況

Node主要方法

操做子節點

appendChild()

removeChild()

將子元素移除頁面，但子元素依然存在內存中

replaceChild()

替換一個子元素，xxx.replaceChild(yyy);
被替換的元素 xxx 被安排到內存裏去了

操做節點

cloneNode(true/false)

克隆一個節點
true 爲深拷貝，拷貝節點和全部子孫節點，包括內容
false 爲淺拷貝，僅拷貝節點自己，不拷貝內容

請參考：
https://developer.mozilla.org...

insertBefore()

normalize()

使節點規範化

因爲某種緣由，DOM中產生了相鄰的兩個文本節點或者空的文本節點，normalize規範化就是用來消除這種情況。
拼接兩個相鄰的文本節點或者刪除空的文本節點或者其它方法。

請參考：
https://developer.mozilla.org...

判斷節點

contains()

hasChildNodes()

判斷是否有子節點，返回 true/false

isEqualNode()
```
是不是一樣的？
```

isSameNode()

是不是同一個？

👇👇👇例子👇👇👇

<body>
    <div class="red">hahaha</div>
    <div class="red">hahaha</div>
</body>

var div1=document.body.children[0];    //獲取第一個div
var div2=document.body.children[1];    //獲取第二個div

div1.isEqualNode(div2);    //true
div1.isSameNode(div2);     //false

Document

Document經常使用屬性

body
```
獲取body元素
```
characterSet
```
獲取字符編碼
```
childElementCount
```
獲取子元素個數
```
children
doctype
documentElement
```
獲取根元素，例如<html>
```
domain
```
獲取網頁域名
```
head
hidden
images
```
獲取全部圖片
```
links
```
獲取全部<a>標籤
```
location
```
獲取網頁地址詳細信息
```

onxxxxxxxxx

各類事件
onclick、onscroll、onmouseover、onkeypress

origin
plugins
```
獲取有沒有開啓插件
```
readyState
```
是否還在加載
```
referer
```
引薦者
就是網頁是從哪裏跳轉來的，或者是直接進的網頁，就沒有引薦者
內部網址可能拒絕由外部網頁跳轉來的請求或者直接訪問請求
```
請參考：
https://developer.mozilla.org...

上下面是一個沒有利益關係的百度首頁的例子：
圖片就是上上面這種樣子。如上圖，經過百度首頁獲取到的圖片，其referer顯示爲https://www.baidu.com/index.p...。以下圖，經過直接在地址欄中輸入圖片的地址來獲取圖片，它就沒有referer這個請求了，由於是直接找到它的，不是經過別的網頁才找到它的。這個例子中，百度容許經過圖片路徑直接訪問這張圖片，你也能夠設置爲沒法直接獲取，只能經過某些特定的網頁才能看到這張圖片，就是必定要有referer。
scripts
scrollingElement
```
獲取正在滾動的元素
```
styleSheets
title

visibilityState

判斷頁面是否正在被瀏覽，可見狀態

Document經常使用方法

close()/open()
```
關閉/打開文檔編輯
```
文檔編輯聲明週期

通常瀏覽器開始執行代碼，文檔編輯open，而後寫入write，最後代碼結束，文檔編輯close。這裏只針對使用document.write()系列的文檔寫入方式。以下面動圖，使用document.write()編輯文檔會覆蓋上一次文檔open時寫入的全部內容，因此，慎用。
createDocumentFragment()
createElement()
createTextNode()

execCommand()

該方法能夠用來操做文本，包括背景顏色、粗細、複製粘貼等
多用於設計 富文本 編輯器

exitFullscreen()
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()
getSelection()
```
獲取用戶選中的文本
```
hasFocus()
```
用戶是否聚焦在頁面上
```
querySelector()
querySelectorAll()
registerElement()(whatever)
write()(whatever)
```
document寫入
```
writeln()(whatever)
```
doucment在一行中寫入
```

Element

請參考：
https://developer.mozilla.org...

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。