【JavaScript】DOM基础之节点、以及通过className获取元素

最新推荐文章于 2024-04-22 19:40:19 发布

meichaoWen

最新推荐文章于 2024-04-22 19:40:19 发布

阅读量597

点赞数

分类专栏： JS实例文章标签： js javascript

本文链接：https://blog.csdn.net/meichaoWen/article/details/112341031

版权

JS实例专栏收录该内容

60 篇文章 2 订阅

订阅专栏

节点 childNodes

<body>
    <ul id="ul1">
        <li><span></span></li>
        <li></li>
    </ul>
    <hr>
    <ol>
        <li>childNodes：子节点的集合</li>
        <li>子节点是被选元素的第一层标签,span标签不属于子节点</li>
        <li>nodeType: 元素节点的nodeType为1，文本节点的nodeType为3</li>
    </ol>
    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul1');
            for(var i = 0; i < oUl.childNodes.length; i++){ //oUl.childNodes.length 为5，3个文本节点，2个元素节点
                if(oUl.childNodes[i].nodeType == '1'){ //选出元素节点
                    oUl.childNodes[i].style.background = 'red'
                }
            }
        }
    </script>
</body>

children

<body>
    <ul id="ul1">
        <li></li>
        <li></li>
    </ul>
    <hr>
    <ol>
        <li>childNodes：子节点中元素节点的集合</li>
    </ol>
    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul1');
            for(var i = 0; i < oUl.children.length; i++){ //oUl.children 只包含元素节点，oUl.children.length 为2
                    oUl.children[i].style.background = 'red'
            }
        }
    </script>
</body>

父节点 parentNode

<body>
    <ul id="ul1">
        <li>122结合iii我了<a>删除</a></li>
        <li>无我负人天凤455<a>删除</a></li>
        <li>3从v是让人天太热<a>删除</a></li>
        <li>455粉色是<a>删除</a></li>
        <li>556割发代首个<a>删除</a></li>
        <li>俄33额56<a>删除</a></li>
    </ul>
    <script>
        window.onload = function(){
            var aA = document.getElementsByTagName('a');
            for(var i = 0; i < aA.length; i++){ 
                aA[i].onclick = function(){
                    this.parentNode.style.display = 'none'
                }
            }
        }
    </script>
</body>

firstChild

firstChild/firstElementChild lastChild/lastElementChild

nextSibling/nextElementSibling previousSibling/previousElementSibling

<body>
    <ul id="ul1">
        <li>1</li>
        <li id="li1">2</li>
        <li>3</li>
    </ul>
    <script>
        window.onload = function(){
            var oUl = document.getElementById('ul1')
            var oLi = document.getElementById('li1')
            if(oUl.firstElementChild){
                oUl.firstElementChild.style.background = 'red'
            }else{
                oUl.firstChild.style.background = 'red' //ie 低版本浏览器的用法
            }
            if(oUl.lastElementChild){
                oUl.lastElementChild.style.background = 'green'
            }else{
                oUl.lastChild.style.background = 'green' //ie 低版本浏览器的用法
            }
            if(oLi.nextElementSibling){
                oLi.nextElementSibling.style.background = 'yellow'
            }else{
                oLi.nextSibling.style.background = 'yellow' //ie 低版本浏览器的用法
            }
            if(oLi.previousElementSibling){
                oLi.previousElementSibling.style.background = 'blue'
            }else{
                oLi.previousSibling.style.background = 'blue' //ie 低版本浏览器的用法
            }
        }
    </script>
</body>

元素的属性操作 setAttribute

<body>
    <input type="text" id="txt1">
    <input type="button" value="点击" id="btn1">
    <script>
        window.onload = function(){
            var oBtn = document.getElementById('btn1');
            var otxt = document.getElementById('txt1');
            oBtn.onclick = function(){
                //otxt.value = 'hello world' //第一种方式 .
                //otxt['value'] = 'hello you' //第二种方式 ['value']
                otxt.setAttribute('title','hello my girl')  //第三种方式 
                otxt.removeAttribute('value') //移除属性
                otxt.getAttribute('value') //获取属性
            }
        }
    </script>
</body>

用calssName选择元素

<body>
    <ul id="ul1">
        <li class="box"></li>
        <li></li>
        <li class="box"></li>
        <li></li>
    </ul>
    <script>
        function getByClass(oParent, sClass) {
            var aEle = oParent.getElementsByTagName('*'); // * 表示所有标签
            var arr = []
            for (var i = 0; i < aEle.length; i++) {
                if (aEle[i].className == sClass) {
                    arr.push(aEle[i])
                }
            }
            return arr
        }
        window.onload = function () {
            var oUl = document.getElementById('ul1');
            var aBox = getByClass(oUl, 'box')
            for (var i = 0; i < aBox.length; i++) {
                aBox[i].style.background = 'red'
            }
        }
    </script>
</body>