dom元素的获取

usrname为username

已于 2022-09-13 14:16:14 修改

阅读量168

点赞数

分类专栏：前端文章标签：前端 javascript html

于 2022-09-13 14:14:54 首次发布

本文链接：https://blog.csdn.net/weixin_54327001/article/details/126764319

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

学习链接：【前端经典】dom元素的获取，dom入门教程，js元素对象的操作getelement，网页设

主要操作目的：通过js选择元素/父元素/孩子元素/元素集合，对其样式1进行操作

最终效果之一：

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ullist{
            list-style: none;
        }
        .ullist li{
            width: 30px;
            height: 30px;
            background-color: #080;
            color: #fff;
            text-align: center;
            line-height: 30px;
            border-radius: 50%;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="mydiv">
        <ul class="ullist">
            <li class="myli">1</li>
            <li class="myli">2</li>
            <li class="myli">3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <button id="mybt">测试dom</button>
    <script>
        // 开始对dom的获取
        // 通过id取得元素，返回唯一
        var gmybt=document.getElementById("mybt");
        // 通过class取得元素，返回集合，可以认为是数组
        var gmyli=document.getElementsByClassName("myli");
        // 通过标签名取得元素,返回集合
        var gli=document.getElementsByTagName('li');
        // 返回第一个匹配的元素
        var emyli=document.querySelector('.myli');
        // 返回匹配的合集
        var allmyli=document.querySelectorAll('.myli');
        gmybt.onclick=function(){
            // alert("成功取得按钮元素");
            // gmyli[0].style.background='red';
            // gli[5].style.background='red';
            // emyli.style.background='red';
            // allmyli[2].style.background='red';
            // 相邻的下一个元素
            // allmyli[2].nextElementSibling.style.background='red';
            // 相邻的前一个元素
            // allmyli[2].previousElementSibling.style.background='red';
            // 父元素
            // emyli.parentElement.style.background="red";
            先返回父元素再对其子元素集合操作
            emyli.parentElement.children[5].style.background='red'
        };
    </script>
</body>
</html>