js之操作DOM

<!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>
    <!-- 
        增
            1. 新增节点
                createElement(tagName)
                createTextNode(str)
            2. 插入节点（插入到页面）
                append()
                insertBefore(newNode, target)
                innerHTML  替换节点内的内容（可能包含标签）
                innerText  替换节点内的文本
        删
            删除节点
                remove()  删除当前节点
                removeChild(node)  删除当前节点下面的某个子节点
            删除节点身上的属性
                classList.add()  为当前元素新增class类名
                classList.remove()  为当前元素删除class类名
                classList.contains()   判断当前元素是否包含某个class类名
                removeAttribute()  删除当前元素的某个属性
               
               
            
        查
            获取元素的方法：(直接获取元素)
                getElementById('xxx')
                getElementsByClassName()
                getElementsByTagName('div')
                getElementsByName('name')
                querySelector()
                querySelectorAll()
            间接获取元素：
                previousElementSibling 上一个元素兄弟节点（在元素节点当中找）
                previousSibling   上一个兄弟节点（在所有的节点类型当中找）
                nextSibling        下一个兄弟节点
                nextElementSibling  下一个元素兄弟节点
                firstChild   获取第一个子节点（在所有的节点类型当中）
                lastChild    获取最后一个子节点
                children     获取所有的元素节点
                childNodes   获取下面的所有子节点
            获取元素身上的属性
                dataset 获取当前元素身上的属性名结构为data-的属性
                getAttribute() 获取当前元素身上的某个属性值
        改
            替换节点
                parentNode.replaceChild(newNode, oldChild) 替换子节点
            修改元素身上的某个属性 或者元素里面的内容
                setAttribute('test', '333')  设置元素身上的某个属性及其属性值
                className = 'xxx'  设置元素身上的class类名
               

            特性，  自标签存在就有的属性
            属性    标签身上的属性 是可以手动添加
     -->
     <!-- ul.wrapper>li.item.item${$}*4 -->
     <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>
不会java不改名
发布了82 篇原创文章 · 获赞 21 · 访问量 2007
私信关注
猜你喜欢
