dom知识拾遗

作者: 姜治宇 | 来源:发表于2020-02-23 11:42 被阅读0次

dom知识拾遗
DOM、BOM、事件知识总结
BFC和DOM初级认知总结
HTML DOM基础解析
5-2 DOM本质
javascript基础系列：DOM相关的技术知识点
罗振宇永远不会告诉你的秘密
30进阶：把 jQuery 加到简历里
前端DOM知识点
前端知识点之DOM 事件类

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>