演示元素查询的api方法和演示元素遍历与增删改常用方法

1、元素查询和api方法

 <ul class="list">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
    </ul>
      <script>
        // 获取所有子节点
        const list =document.querySelector('.list')
        let items = list.childNodes//所有的的子节点（包括回车）
        items = [...items].filter(item=>item.nodeType==1)//获取元素节点。
        // 另一种简便方法
        items=list.children
        // 获取第一个子元素
        console.log(items[0].textContent)
        console.log(list.firstElementChild.textContent)
        //获取最后一个子元素节点
        console.log(items[items.length-1].textContent)
        console.log(list.lastElementChild)
        //获取其中一个字元素节点
         let four =document.querySelector('.list :nth-child(4)')
         console.log(four.textContent)
        //  获取子节点的前一个
        console.log(four.previousElementSibling.textContent)
        //获取子节点的后一个
        console.log(four.nextElementSibling.textContent)
        // 获取子元素的父节点
        let parent = four.parentElement
        console.log(parent)
        console.log(parent.contains(four))
// ———————————————————————指定位置插入—————————————————————
      // 2 API 方法
      // 1. `insertAdjacentElement()`:指定位置插入**元素**
      // 2. `insertAdjacentText()`: 指定位置插入**文本**节点
      // 3. `insertAdjacentHTML()`: 指定位置插入**元素节点**(DOMString)
        let h3 = document.createElement('h3')
            h3.textContent='hello world'
        // 1. `beforebegin`:元素自身的前面
        list.insertAdjacentElement('beforebegin',h3)
        // 2. `afterbegin`:插入元素内部的第一个子节点之前
        list.insertAdjacentElement('afterbegin',h3)
        // 3. `beforeend`:插入元素内部的最后一个子节点之后
        list.insertAdjacentElement('beforeend',h3)
        // 4. `afterend`:元素自身的后面
        list.insertAdjacentElement('afterend',h3)
        //追加元素
        list.insertAdjacentHTML('afterend','<button onclick="this.remove()">删除</button>')
    </script>

2、元素遍历与增删改常用方法

<script>
        //创建元素
        const ul =document.createElement('ul')
        // 文档中添加元素
        document.body.append(ul)
        console.log('111')
        // 文档片段方式添加（防止数据量大造成页面抖动，用文档片段的方法去做）
        const frag =document.createDocumentFragment('ul')
        for(let i=0;i<6;i++){
            const li = document.createElement('li')
            li.append('item-'+(i+1))
            frag.append(li)
        }//创建完后一次性添加到ul中。
        ul.append(frag)
        // after方法
       let three= ul.querySelector(':nth-child(3)')
        let li = document.createElement('li')
        li.append('指定子元素前面新增')
        three.before(li)
        //before
         li = document.createElement('li')
        li.append('指定子元素后面新增新增')
        three.before(li)
        //console.log(three)
        //克隆
        ul.append(li.cloneNode(true))
        // 替换/更新最后一个子元素
        let h2 = document.createElement('h2')
        h2.textContent='hello world'
        ul.replaceChild(h2,ul.lastElementChild)
        //删除指定元素
        ul.querySelector(':nth-child(3)').remove()
  // ———————————————————————元素内容添加—————————————————————
 //textContent可以获取css 隐藏元素都可以获取，innerText不能获取css及隐藏元素
        console.log(document.querySelector('h2').textContent);
        console.log(document.querySelector('h2').innerText);
        //直接原样输出
        document.querySelector('.box').innerText='<h3 style="color: red;">测试innerHtml和innerText</h3>'
        //渲染后显示
        document.querySelector('.box').innerHTML='<h3 style="color: red;">测试innerHtml和innerText</h3>'
        //替换自己
        document.querySelector('.box').outerHTML=null
        // 同remove等效
        // document.querySelector('.box').remove()