Dom---元素的获取

最新推荐文章于 2023-07-09 21:26:23 发布

IT行星

最新推荐文章于 2023-07-09 21:26:23 发布

阅读量818

点赞数 1

本文链接：https://blog.csdn.net/m0_72694993/article/details/126869956

版权

HTML元素 JavaScript DOM操作样式设置事件处理

关键词由CSDN通过智能技术生成

一、创建Html元素

我们想要获取html元素需要先要创建html元素，例如下便这个代码创建了一个div块两个列表两个单选框，并且我们为div块设置了id为div1，为一个列表中的两个li设置了名为list。


    <div id="div1" >hahahahah </div>

    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>

    <ul>
        <li class="list">111</li>
        <li>222</li>
        <li class="list">333</li>
    </ul>
    <input type="radio" name="sex">男
    <input type="radio" name="sex">女

二、元素的获取（在script标签中）

1.普通html标签的获取

        // 通过标签名获取元素 返回数组
        var aLi = document.getElementsByTagName('li');
        console.log(aLi);

2.通过id名获取到id为div1的标签然后将其背景颜色设置为红色

        var oDiv = document.getElementById('div1');

        console.log(oDiv);

        oDiv.style.background = "red";

3.通过类名获取，注意的是通过类名获取元素的时候，获取到的list是一个数组，当我们设置样式的时候，我们需要用循环的方式来设置样式

        var list = document.getElementsByClassName('list');

        console.log(list);

        for(var i=0; i<list.length; i++){
            list[i].style.background = "green";
        }

4.通过name名获取

        // 通过name获取 返回数组 
        var arr =  document.getElementsByName('sex');
        console.log(arr);

三、样式的设置

我们可以通过取到的元素.classname进行设置取到元素的类名，实现如下代码（原来为背景为红色，点击变为黄色）

   <style>
        #div1{
            width: 200px;
            height: 200px;
            background: #f00;
            position: absolute;

        }
        #div1.active{
            background: yellow;
            left:500px;
            top:300px;
        }
        /* #div.active找id为div1并且类为active地元素 */
        /* #div .active找id为div1下类为active下边元素 */
    </style>
</head>
<body>
    <button id="btn">click</button>

    <div id="div1" ></div>

    <script>
        var btn = document.getElementById('btn');
        var oDiv = document.getElementById('div1');

        btn.onclick =  function(){
            oDiv.className ="active";
            // oDiv.style.background = "yellow";
            // oDiv.style.left = "500px";
            // oDiv.style.top = "300px";
        }

IT行星

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dom---元素的获取

我们想要获取html元素需要先要创建html元素，例如下便这个代码创建了一个div块两个列表两个单选框，并且我们为div块设置了id为div1，为一个列表中的两个li设置了名为list。3.通过类名获取，注意的是通过类名获取元素的时候，获取到的list是一个数组，当我们设置样式的时候，我们需要用循环的方式来设置样式。我们可以通过取到的元素.classname进行设置取到元素的类名，实现如下代码（原来为背景为红色，点击变为黄色）2.通过id名获取到id为div1的标签然后将其背景颜色设置为红色。
复制链接

扫一扫