js之操作DOM

柔情只为你懂 2023-07-11 12:56 2阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js之操作DOM</title>
    </head>
    <body>
        
         
         <ul class="wrapper">
             <li class="item item1" data-index=1 data-id="id" data-sex="男" aaa="xxx">1</li>
             <li class="item item2">2</li>
             <li class="item item3">3</li>
             <li class="item item4">4</li>
             <li class="item item5">5</li>
         </ul>
         <script>
            //  var item2 = document.getElementsByClassName('item2')[0];
            //  var oUl = document.getElementsByClassName('wrapper')[0];
            // //  console.log(oUl.children)
            // var oLi = document.createElement('li');
            // oLi.innerText = 12
            // // var text = document.createTextNode('text')
            // // // oUl.append(text)
            // // oUl.insertBefore(text, item2)
            // item2.innerText = 'xxxxxxxxxxxxxx'
            // // item5.innerHTML = '<a href="#">xxxxx</a>'
            // oUl.appendChild(oLi)
    
            var item1 = document.getElementsByClassName('item1')[0];
            var oUl = document.getElementsByClassName('wrapper')[0];
            var oDiv = document.createElement('div');
            oDiv.innerText = '我是新的元素'
            // item1.remove()
            // oUl.removeChild(item1)
            // console.log(item1.getAttribute('aaa'))
            // console.log(item1.dataset)
            // item1.classList.add('xxxx')
            // item1.removeAttribute('data-index')
            // oUl.replaceChild(oDiv, item1)
            item1.setAttribute('data-id', '333')
            //
            item1.id = 'item1'
            item1.classList.add('new-class');
            item1.classList.remove('item');
            console.log(item1.classList.contains('item'))
         </script>
    </body>
    </html>