JavaScript Web API第三天

1.节点操作

1.1节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM中，节点用node来表示。
HTML DOM树中的所有节点都可以通过JavaScript进行访问，所有元素节点都可以被删除，也可以创建和修改。

节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）三个基本属性。

元素节点nodeType为1
属性节点nodeType为2
文本节点nodeType为3（文本节点包含文字、空格、换行等）
实际开发主要操作元素节点。

1.2节点层级

1.2.1 父级节点

node.parentNode
parentNode属性返回的是离这个节点最近的一个父节点，如果没有则返回null。

<div class="fu">
    <div class="box">
        <span class="haha">×</span>
    </div>
</div>
<script>
    //如果找不到父节点，返回null
    let haha = document.querySelector('.haha')
    let box = document.querySelector('.box')
    let fu = document.querySelector('.fu')
    let body = document.querySelector('body')
    let html = document.querySelector('html')
    console.log(box.parentNode) 
</script>

1.2.2 子节点

1、parentNode.childNodes（标准）
返回包含指定节点的子节点的集合，该集合为即时更新的集合。

2、parentNode.children（非标准）
是一个只读属性，返回所有的子元素节点，只返回子元素节点，其余结果不返回。

<div>div</div>
<span>span</span>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ul>

<ol>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
</ol>

<div class="box">
    <span class="haha"></span>
</div>

<script>
    //获取ul下的所有li
    let lis = document.querySelector('ul').querySelectorAll('li')
    
    //获取ul下所有子节点
    let nodes = document.querySelector('ul').childNodes
    console.log(nodes)
    console.log(nodes[0].nodeType)
    console.log(nodes[1].nodeType)

    let nodes1 = document.querySelector('ul').children
    console.log(nodes1)
    console.log(nodes1[2].nodeType)
</script>

3、第一个子节点
parentNode.firstChild
返回第一个子节点，找不到返回null

4、最后一个子节点
parentNode.lastChild
返回最后子节点，找不到返回null

5、第一个子元素节点
parentNode.firstElementChild
返回第一个子元素节点，找不到返回null

6、最后一个子元素节点
parentNode.lastElementChild
返回最后一个子元素节点，找不到返回null

1.2.3子元素节点

1、下一个兄弟节点
node.nextSibling
返回当前元素的下一个兄弟节点，找不到返回null

2、上一个兄弟节点
node.previousSibling
返回当前元素上一个兄弟节点，找不到返回null

3、下一个兄弟元素节点（有兼容性问题）
node.nextElementSibling
返回当前元素下一个兄弟元素节点，找不到返回null

4、上一个兄弟元素节点（有兼容性问题）
node.previousElementSibling
返回当前元素 上一个兄弟元素节点，找不到返回null

<div>div</div>
<span>span</span>

<script>
    let div = document.querySelector('div')

    //返回兄弟节点，包含元素节点或者其他节点（文本，属性）
    console.log(div.nextSibling) 
    console.log(div.previousSibling)

    //返回兄弟元素节点
    console.log(div.nextElementSibling) 
    console.log(div.previousElementSibling)

    function getPreviousElementSibling(element){
        let el = element
        while(el = el.previousSibling){
            if(el.nodeType === 1){
                return el
            }
        }
        return null
    }

    let span = document.querySelector('span')
    console.log(getPreviousElementSibling(span)) 
    console.log(getPreviousElementSibling(div)) 
</script>

1.2.4 创建节点

document.createElement(‘tagName’)
动态创建元素节点

1.2.5 添加节点

1、node.appendChild（child）
node.appendChild（）将一个节点添加到指定父节点的子节点列表末尾

2、node.insertBefore（child,指定元素）
node.insertBefore（）将一个节点添加到父节点的指定子节点前面。

<ul>
    <li>东邪</li>
    <li>南帝</li>
</ul>

<script>
    //创建元素节点
    let li = document.createElement('li')

    //添加节点  node.appendchild() 给父节点的子节点列表添加节点
    let ul = document.querySelector('ul')
    ul.appendChild(li)

    //insertBefore(child,指定元素)  把元素添加到指定元素之前
    let li1 = document.createElement('li')
    ul.insertBefore(li1,ul.children[0])
</script>

2节点操作

2.1删除节点

node.removeChild(child)
从node节点中删除一个子节点，返回删除的节点

<button>删除</button>

<ul>
    <li>东邪</li>
    <li>西毒</li>
    <li>南帝</li>
    <li>北丐</li>
</ul>

<script>
    let btn = document.querySelector('button')
    let ul = document.querySelector('ul')

    btn.onclick = function(){            
        ul.removeChild(ul.children[ul.children.length-1])
        if(ul.children.length === 0){
            this.disabled = true
        }
    }
</script>

2.2 复制（克隆）节点

node.cloneNode()
返回调用该方法的节点的一个副本

 <ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

<script>
    let ul = document.querySelector('ul')

    // let ul1 = ul.cloneNode() 
    // let ul1 = ul.cloneNode(false)  //只复制节点本身，不复制子节点
    let ul1 = ul.cloneNode(true)  //复制节点，包含子节点

    let body = document.body
    body.appendChild(ul1)
</script>

2.3创建元素的三种方式

document.write()
element.innerHTML
document.createElement()

document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则她会导致页面全部重绘
innerHTML将内容写入某个DOM节点，不会导致页面全部重绘
innerHTML创建多个元素效率更高，采取数组拼接，结构稍微复杂
createElement()创建多个元素效率稍微低一点，但是结构清晰。

<button>点击</button>
<div class="inner"></div>
<div class="create"></div>
<script>
    // 1. document.write() 创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘
    var btn = document.querySelector('button');
    btn.onclick = function () {
        document.write('<div>123</div>');
    }

    // 2. innerHTML 创建元素
    // var inner = document.querySelector('.inner');
    // // for (var i = 0; i <= 100; i++) {
    // //     inner.innerHTML += '<a href="#">百度</a>'
    // // }
    // var arr = [];
    // for (var i = 0; i <= 100; i++) {
    //     arr.push('<a href="#">百度</a>');
    // }
    // inner.innerHTML = arr.join('');

    // 3. document.createElement() 创建元素
    var create = document.querySelector('.create');
    for (var i = 0; i <= 100; i++) {
        var a = document.createElement('a');
        create.appendChild(a);
    }

2.4效率比较

innerHTML<createElement<innerHTML数组方式