DOM-3 【utils/待讲评】节点属性、方法、封装方法、DOM结构

讲评

节点属性

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>