JS元素获取

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .redDiv{
                width: 100px;
                height: 100px;
                background-color: red;
            }
            #secondDiv{
                width: 100px;
                height: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="redDiv"></div>
        <div id="secondDiv" name="text "></div>
    </body>
    <script type="text/javascript">
    //通过ID来获取一个元素
        var bDiv = document.getElementById("secondDiv");
        console.log(bDiv);
        bDiv.onclick=function () {
            alert("cao");
        };
        //通过标签名来获取元素
        //通过标签名获取到的是一组元素，我们可以通过下标来访问这一组元素中的某一个
        var divs =document.getElementsByTagName('div');
        console.log(divs);
        
        //通过类名来获取一组元素（哪怕只有一个也是放在数组里，通过下标来访问）
        var rDiv = document.getElementsByClassName('redDiv');
        console.log(rDiv);
        
        var nDiv=document.getElementsByName('text');
        console.log(nDiv);
        
        //通过元素的style属性可以舍子该元素的行间样式。
        //style后面的样式以驼峰法来写（第一个单词首字母小写，以后每个单词的首字母大写）
        bDiv.style.backgroundColor="yellow";
        bDiv.style.marginLeft = 100+"px";
        //innerHTML修改标签的内容，直接赋值会导致标签原有的内容被覆盖。
        bDiv.innerHTML = "草尼玛";
        
        
        rDiv[0].style.backgroundColor="purple";
        
        //querySelectorAll（''）可以根据CSS里面的选择器来获取一组元素，可以是后代选择器，群组选择器，nth-chlid（1）等。
        //querySelector获取querySelectorAll获取到的第一个元素
        var yellowDiv =document.querySelector(".redDiv");
        console.log(yellowDiv);

        var div1 = document.getElementsByClassName('redDiv');
        div1[0].style="";
        //等价
        var div2 = document.getElementsByClassName("redDiv")[0];
        div2.style="";
        
        document.write('123');
        document.write('<a href="#">哈哈</a>');
        
        var rrDiv=document.getElementsByClassName("redDiv")[0];
        rrDiv.onclick=function  () {
//          this代表的就是当前点击的元素
            this.style.backgroundColor="black";
        }
        
    </script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容