javaScript -- DOM对象

最新推荐文章于 2024-07-27 18:01:50 发布

乔治的哥们

最新推荐文章于 2024-07-27 18:01:50 发布

阅读量111

点赞数

分类专栏： web前端开发（html、css、JavaScript）文章标签： DOM 前端 javaScript

本文链接：https://blog.csdn.net/weixin_44107920/article/details/104433427

版权

web前端开发（html、css、JavaScript）专栏收录该内容

20 篇文章 1 订阅

订阅专栏

`DOM查找`

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <!-- 1. 按id属性查找 -->
        <ul id="myList">
            <li id = "m1">首页</li>
            <li id = "m2">企业介绍</li>
            <li id = "m3">联系我们</li>
        </ul>

        <!-- 3. 通过name属性查找 -->
        <form id = "registerForm">
            <input type="checkbox" name="boy"/>
            <input type="checkbox" name="boy"/>
            <input type="checkbox" name="boy"/>
        </form>

        <!-- 4.通过class查找 -->
        <div>
            <p class="mainTitle">新闻标题1</p>
            <p class="subTitle">新闻标题2</p>
            <p class="mainTitle">新闻标题3</p>
        </div>

        <script>
            // 1. 通过id 的方式查找
            var ul = document.getElementById('myList')
            console.log(ul);
            alert(ul)
            // 2. 通过标签的方式查找
            var list = ul.getElementsByTagName("li");
            console.log(list)
            alter(list)
            // 3. 通过name属性查找
            var list2 = document.getElementsByName('boy')
            console.log(typeof list2) 
            // 4.通过class查找
            var div = document.getElementById('news')
            var list3 = div.getElementsByClassName('mainTitle')
            console.log(list3);
        </script>
</body>
</html>