學(xué)習(xí)目標(biāo)：
| 節(jié)數(shù) | 知識點(diǎn) | 要求 |
|---|---|---|
| 第一節(jié) 什么是DOM? | DOM的介紹 | 了解 |
| 第二節(jié) Document對象 | Document對象介紹 | 了解 |
| 第三節(jié) Dom節(jié)點(diǎn)分類 | Dom節(jié)點(diǎn)分類 | 掌握 |
| 第四節(jié) Document節(jié)點(diǎn)屬性 | Document節(jié)點(diǎn)屬性 | 掌握 |
| 第五節(jié) 獲取頁面元素節(jié)點(diǎn) | 獲取頁面元素節(jié)點(diǎn) | 掌握 |
| 第六節(jié) 創(chuàng)建頁面元素 | 創(chuàng)建頁面元素 | 掌握 |
| 第七節(jié) 操作頁面元素屬性 | 操作頁面元素屬性 | 掌握 |
一、什么是DOM?
DOM Document Object Model，文檔對象模型，DOM可以以一種獨(dú)立于平臺和語言的方式訪問和修改html文檔的內(nèi)容和結(jié)構(gòu)。
二、Document對象
Document 對象是 HTML 文檔的根節(jié)點(diǎn)。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進(jìn)行訪問。
Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進(jìn)行訪問
三、DOM節(jié)點(diǎn)分類
在 HTML DOM (Document Object Model) 中 , 每一個元素都是 節(jié)點(diǎn):
文檔是一個文檔節(jié)點(diǎn)。
所有的HTML元素都是元素節(jié)點(diǎn)。
所有 HTML 屬性都是屬性節(jié)點(diǎn)。
文本插入到 HTML 元素是文本節(jié)點(diǎn)。are text nodes。
注釋是注釋節(jié)點(diǎn)。
四、Document節(jié)點(diǎn)屬性
4.1返回文檔內(nèi)部的某個節(jié)點(diǎn)doctype,documentElement,body,head
- doctype
- documentElement
- Body
- Head
4.2返回文檔指定信息
documentURI，URL，domain，lastModified，location，title，readyState屬性
- documentURI:返回當(dāng)前的網(wǎng)址（url）
- URL
- domain:返回當(dāng)前的域名
lastModified
Location:
location.assign('傳遞一個url');
window.location = '傳遞一個url';
location.href = '傳遞一個url';
Title:
readyState
readyState屬性返回當(dāng)前文檔的狀態(tài)。
共有三種可能值：
加載HTML代碼階段（尚未完成解析）是“l(fā)oading”，
加載外部資源階段是“interactive”，
全部加載完成是“complete”。
4.3返回文檔內(nèi)部特定節(jié)點(diǎn)的集合
anchors,forms,images,links,scripts
五、獲取元素節(jié)點(diǎn)（重點(diǎn)）
5.1 getElementById()
getElementById():通過標(biāo)簽的id屬性獲取元素
5.2 getElementsByTagName()
getElementsByTagName():通過標(biāo)簽名來獲取元素。（數(shù)組）
5.3 getElementsByName()
getElementsByName():通過標(biāo)簽的name屬性獲取元素。（數(shù)組），
5.4 getElementsByClassName()
getElementsByClassName():通過標(biāo)簽的class屬性來獲取元素。（數(shù)組），有瀏覽器兼容性，主要是ie8以下。
5.5 querySelector()
querySelector():通過css選擇器來獲取元素
5.6 querySelectorAll()
querySelectorAll():通過css選擇器來獲取元素(數(shù)組)
5.7 getElement和querySelector的區(qū)別
query選擇符選出來的元素及元素?cái)?shù)組是靜態(tài)的，而getElement這種方法選出的元素是動態(tài)的。靜態(tài)的就是說選出的所有元素的數(shù)組，不會隨著文檔操作而改變． 在使用的時候getElement這種方法性能比較好，query選擇符則比較方便．
1.得到的元素不是需要很麻煩的多次getElementBy..的話，盡量使用getElementBy..,因?yàn)樗煨?/p>
2.得到的元素需要很麻煩的多次getElementBy..組合才能得到的話使用querySelector，方便。
3.看實(shí)際情況，你決定方便優(yōu)先還是性能優(yōu)先。
