dom知识拾遗
2020-02-23 本文已影响0人
姜治宇
1、常用的几个方法：
querySelector//通过id、标签、类名都可以选择,得到的是节点元素
querySelectorAll//得到的是一组节点
getElementById //通过id名获取选择
getElementsByTagName//通过标签名获取元素
getElementsByClassName//通过class名称获取元素
getElementsByName//通过属性name获取元素
getAttributeNode//获取属性节点，nodeType=2
getAttribute//获取属性信息
setAttribute//设置属性信息
2、常见的几个属性：
nodeName //节点名称
nodeType // 节点类型，1代表元素，2代表属性，3代表文本
nodeValue //节点值
parentNode//父节点
childNodes //所有子节点, NodeList
children//所有子节点, HTMLCollection
previousSibling, nextElementSibling //兄弟节点
下面玩一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom知识总结1</title>
</head>
<body>
<div class="container">
<p name="article">test1</p>
<a class="link">test2</a>
<div data='{"id":"1","title":"this is a test"}'>test3</div>
<div name="article">article 2</div>
</div>
</body>
</html>
<script>
var node_0 = document.querySelector('.link')//通过css类名筛选
console.log(node_0)//节点对象
var node_0_all = document.querySelectorAll('div')//通过标签名筛选
console.log(node_0_all)//NodeList
var nodes_1 = document.getElementsByTagName('div')
console.log(nodes_1)//HTMLCollection
var nodes_2 = document.getElementsByClassName('link')
console.log(nodes_2)//HTMLCollection
var nodes_3 = document.getElementsByName('article')
console.log(nodes_3)//NodeList
//寻找div下面有data的节点，增加一个键age:18
for(let i=0;i<nodes_1.length;i++){
var attrNode = nodes_1[i].getAttributeNode('data')//获取属性节点，2
if(attrNode && attrNode.nodeType ===2){
if(attrNode.nodeValue){
var obj = JSON.parse(attrNode.nodeValue)
obj.age = 18
var newData = JSON.stringify(obj)
nodes_1[i].setAttribute('data',newData)//设置属性
}
}
}
</script>
我们注意到一个问题，三个方法同样是获取了一组节点，但容器是不一样的，分别是HTMLCollection和NodeList，有啥区别呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom知识总结2</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
<script>
let container = document.getElementsByTagName('ul') //HTMLCollection
console.log(container)
let ul = container[0]
let li_1 = ul.children;//HTMLCollection,只能放元素
let li_2 = ul.childNodes;//NodeList,放任何元素，包括空格换行（文本节点）
console.log(li_1.length)//3，只有li节点
console.log(li_2.length)//7，还包含了文本节点换行符
/*
//HTMLCollection无法使用forEach方法
li_1.forEach((item)=>{
console.log(item.nodeType)
})
*/
console.log(li_1 instanceof Array)//false
var li_1_change = [].slice.call(li_1)
//使用forEach要注意，原对象一定要是Array
li_1_change.forEach(v=>{
console.log(v.nodeType)
})
//NodeList可以用forEach，但它同样不是Array
console.log(li_2 instanceof Array)//false
//这样调用其实是有风险，最好转成Array后使用
li_2.forEach((item)=>{
console.log(item.nodeType)
})
//HTMLCollection集成有迭代器iterator
//HTMLCollection.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]
for(let k of li_1){
console.log(k.nodeType)
}
//NodeList有迭代器iterator
//NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator]
for(let k of li_2){
console.log(k.nodeType)
}
</script>
