亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

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>
        // 獲取所有子節(jié)點(diǎn)
        const list =document.querySelector('.list')
        let items = list.childNodes//所有的的子節(jié)點(diǎn)（包括回車）
        items = [...items].filter(item=>item.nodeType==1)//獲取元素節(jié)點(diǎn)。
        // 另一種簡(jiǎn)便方法
        items=list.children
        // 獲取第一個(gè)子元素
        console.log(items[0].textContent)
        console.log(list.firstElementChild.textContent)
        //獲取最后一個(gè)子元素節(jié)點(diǎn)
        console.log(items[items.length-1].textContent)
        console.log(list.lastElementChild)
        //獲取其中一個(gè)字元素節(jié)點(diǎn)
         let four =document.querySelector('.list :nth-child(4)')
         console.log(four.textContent)
        //  獲取子節(jié)點(diǎn)的前一個(gè)
        console.log(four.previousElementSibling.textContent)
        //獲取子節(jié)點(diǎn)的后一個(gè)
        console.log(four.nextElementSibling.textContent)
        // 獲取子元素的父節(jié)點(diǎn)
        let parent = four.parentElement
        console.log(parent)
        console.log(parent.contains(four))
// ———————————————————————指定位置插入—————————————————————
      // 2 API 方法
      // 1. `insertAdjacentElement()`:指定位置插入**元素**
      // 2. `insertAdjacentText()`: 指定位置插入**文本**節(jié)點(diǎn)
      // 3. `insertAdjacentHTML()`: 指定位置插入**元素節(jié)點(diǎn)**(DOMString)
        let h3 = document.createElement('h3')
            h3.textContent='hello world'
        // 1. `beforebegin`:元素自身的前面
        list.insertAdjacentElement('beforebegin',h3)
        // 2. `afterbegin`:插入元素內(nèi)部的第一個(gè)子節(jié)點(diǎn)之前
        list.insertAdjacentElement('afterbegin',h3)
        // 3. `beforeend`:插入元素內(nèi)部的最后一個(gè)子節(jié)點(diǎn)之后
        list.insertAdjacentElement('beforeend',h3)
        // 4. `afterend`:元素自身的后面
        list.insertAdjacentElement('afterend',h3)
        //追加元素
        list.insertAdjacentHTML('afterend','<button onclick="this.remove()">刪除</button>')
    </script>

2、元素遍歷與增刪改常用方法

<script>
        //創(chuàng)建元素
        const ul =document.createElement('ul')
        // 文檔中添加元素
        document.body.append(ul)
        console.log('111')
        // 文檔片段方式添加（防止數(shù)據(jù)量大造成頁面抖動(dòng)，用文檔片段的方法去做）
        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)
        }//創(chuàng)建完后一次性添加到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))
        // 替換/更新最后一個(gè)子元素
        let h2 = document.createElement('h2')
        h2.textContent='hello world'
        ul.replaceChild(h2,ul.lastElementChild)
        //刪除指定元素
        ul.querySelector(':nth-child(3)').remove()
  // ———————————————————————元素內(nèi)容添加—————————————————————
 //textContent可以獲取css 隱藏元素都可以獲取，innerText不能獲取css及隱藏元素
        console.log(document.querySelector('h2').textContent);
        console.log(document.querySelector('h2').innerText);
        //直接原樣輸出
        document.querySelector('.box').innerText='<h3 style="color: red;">測(cè)試innerHtml和innerText</h3>'
        //渲染后顯示
        document.querySelector('.box').innerHTML='<h3 style="color: red;">測(cè)試innerHtml和innerText</h3>'
        //替換自己
        document.querySelector('.box').outerHTML=null
        // 同remove等效
        // document.querySelector('.box').remove()