javaScript -- DOM对象

最新推荐文章于 2022-05-21 21:13:41 发布

乔治的哥们

最新推荐文章于 2022-05-21 21:13:41 发布

阅读量94

点赞数

分类专栏： 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>

`DOM修改`

在这里插入图片描述

`DOM添加`

在这里插入图片描述

乔治的哥们

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript -- DOM对象

DOM查找<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu...
复制链接

扫一扫