講評
節點屬性
nodeType
元素節點 1 大寫
屬性節點 2
文本節點 3 #text
注釋節點 8 #comment
document 9
DocumentFragment 11
- nodeName是只讀屬性
- 元素節點的nodeName是大寫的
- 其余的是#小寫的
- 元素節點沒有nodeValue屬性，null，是可寫的
- 其余有（屬性、注釋、文本…）
- getAttributeNode（獲取屬性節點）
- 屬性節點有nodeValue、value屬性
- nodeType，只讀
封裝方法遍歷子元素
-
常規
-
類數組
獲取屬性
- nodeValue是可寫的
<body><div class="temp" id="div_id"></div><script>var div = document.getElementsByTagName('div')[0]console.log(div.getAttributeNode('id').nodeValue) // 以下方法都可以console.log(div.getAttributeNode('id').value)console.log(div.getAttributeNode('id')) // 了解console.log(div.attributes) // 了解console.log(div.getAttribute('id') )</script>
hasChildNodes
- 有換行就有文本節點
Document構造函數
Document.prototype上有響應獲取元素的方法
- 但是document并不是直接繼承于Document.prototype
- document << HTMLDocument << Document
document.__proto__ = HTMLDocument.prototype
HTMLDocument.prototype.__proto__ = Document.prototype
DOM結構
1.Document
- dom是操作html和xml的，不能操作css
- Document還有一個分支是XMLDocument
2. CharacterData
- Text.prototype.
__proto__=== CharacterData.prototype // true - Comment.prototype.
__proto__=== CharacterData.prototype // true
3. Element
- 有HTMLElement和XMLElement分支
4. Node
var div = document.getElementsByTagName('div')[0]
console.log(Object.prototype.toString.call(div)) // [object HTMLDivElement]
DOM操作深入
| Document.prototype | Element.prototype |
|---|---|
| 獨享getELementById | – |
| 獨享getElementsByName | – |
| 共享getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll | 有 |
通配符* - getElementsByTagName
獲取元素
- 用getElementsByTagName
- 更好的方法是利用HTMLDocument的原型上的body、head屬性（直接用document.body通過原型鏈來訪問）
- 特：document.title獲取的是title標簽內的文本，而不是獲取title元素，若要選擇標簽，則使用getElementsByTagName
- Document.prototype的documentElement可以訪問到html
- 用document實例訪問，不能直接用**原型訪問，否則報錯
| 原型 | 屬性 |
|---|---|
| HTMLDocument.prototype | body、head |
| Document.prototype | documentElement（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>Document</title>
</head><body><main><div><ul><li>1</li><li>2</li><li>3</li></ul><span></span></div><!-- 注釋 --><span></span><a href=""></a><p></p></main><script>Element.prototype.myFindChildren = function (pTagName) {var pNode = document.getElementsByTagName(pTagName)[0]var idx = arguments[1]if (idx) {return findChildren(pNode)[idx]} else {return findChildren(pNode)}}function findChildren(pNode) {var arr = pNode.childNodes,arrLen = pNode.childNodes.length,children = []for (var i = 0; i < arrLen; i++) {var item = arr[i]if (item.nodeType == 1) {children.push(item)}}return children}console.log(document.body.myFindChildren('main'))console.log(document.body.myFindChildren('div', 1))</script>
</body></html>
- 在原型上編程 找出一個元素的第n層父級元素
<!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>Document</title>
</head><body><main><div><ul><li>1</li><li>2</li><li>3</li></ul><span></span></div><!-- 注釋 --><span></span><a href=""></a><p></p></main><script>Element.prototype.myFindPNode = function (pTagName) {var cNode = document.getElementsByTagName(pTagName)[0]var num = arguments[1] || 1for (var i = num; i > 0; i--) {cNode = cNode.parentNode}return cNode}console.log(document.body.myFindPNode('li'))console.log(document.body.myFindPNode('li', 4))</script>
</body></html>
)
)
對象)
)
