生活随笔
收集整理的這篇文章主要介紹了
DOM-3 【utils/待讲评】节点属性、方法、封装方法、DOM结构
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
講評
節點屬性
nodeType
元素節點 1 大寫
屬性節點 2
文本節點 3 #text
注釋節點 8 #comment
document 9
DocumentFragment 11
- nodeName是只讀屬性
- 元素節點的nodeName是大寫的
- 其余的是#小寫的
- 元素節點沒有nodeValue屬性，null，是可寫的
- 其余有（屬性、注釋、文本…）
- getAttributeNode（獲取屬性節點）
- 屬性節點有nodeValue、value屬性
- nodeType，只讀
封裝方法遍歷子元素
常規
類數組
獲取屬性
<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
))
DOM操作深入
Document.prototypeElement.prototype
| 獨享getELementById | – |
| 獨享getElementsByName | – |
| 共享getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll | 有 |
通配符* - getElementsByTagName
獲取元素
用getElementsByTagName更好的方法是利用HTMLDocument的原型上的body、head屬性（直接用document.body通過原型鏈來訪問）
特：document.title獲取的是title標簽內的文本，而不是獲取title元素，若要選擇標簽，則使用getElementsByTagNameDocument.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
>
總結
以上是生活随笔為你收集整理的DOM-3 【utils/待讲评】节点属性、方法、封装方法、DOM结构的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
