js中DOM的学习

最新推荐文章于 2024-06-28 16:20:01 发布

北辰黎云

最新推荐文章于 2024-06-28 16:20:01 发布

阅读量85

点赞数

分类专栏：记录学习日常文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_54634032/article/details/126283176

版权

记录学习日常专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<style>
    .bb{
        width:100px;
        height:100px;
        border:1px red solid;
    }
</style>
<script>
    function changeColor(){
        var div_dd = document.getElementById("dd");
        div_dd.style.backgroundColor = "red";
    }
    function changediv(){
        var divs = document.getElementsByTagName("div");
        var divs = document.getElementsByName("aa");
        for(var i=0;i<divs.length;i++){
            divs[i].style.backgroundColor = "red";
        }
        var divs= document.getElementsByClassName("bb");
         for(var i=0;i<divs.length;i++){
            divs[i].style.backgroundColor = "red";
        }
    }
    function getContent(){
        var div_dd1 = document.getElementById("dd1");
        div_dd1.innerHTML = "<a href=''>小黑</a>";
        div_dd1.innerText = "<a href=''>小黑</a>";
    }
    function changeName(){
        var intputObj = document.getElementById("username");
        intputObj.value = "小黑";
    }
</script>
<body>
    <div id="dd"style="border: 1px blue solid; width:200px;height: 200px;"></div>
    <input type="button" value="点击改变div颜色" onclick="changeColor();">  

    <div id="id1"name="aa" class="bb"></div><br/>
    <div id="id2"name="aa" class="bb"></div><br/>
    <div id="id3"name="aa" class="bb"></div><br/>
    <div id="id4"name="aa" class="bb"></div><br/>
    <input type="button" value="点击所有div颜色" onclick="changediv();">   
    <div id="dd1"style="border: 1px blue solid; width:200px;height: 200px;">this is text</div>
    <input type="button" value="点击改变div文本内容" onclick="getContent();"><br/>
    <input type="text" id="username" value="小明"/>
    <input type="button" value="点击修改名字" onclick="changeName()">
</body>