查找Dom节点的方式

最新推荐文章于 2024-03-28 23:48:04 发布

Jikel

最新推荐文章于 2024-03-28 23:48:04 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_54902466/article/details/117884547

版权

JavaScript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

查找Dom节点的方式

1.根据 id 来查找dom元素节点
- 注意事项
2.查找html标签元素
3.查找body标签元素

1.根据 id 来查找dom元素节点

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>
        #box {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <div></div>
    <div></div>
    <script>
        // 操作标签,首先选中标签
        // 1.根据id来查找Dom元素节点
        // document.getElementById('元素的id')
        let box = document.getElementById('box')        // 获取节点.nodetype 元素节点:1 属性节点:2 文本节点为3
        // 找没有的元素的节点就是 -- null
        console.log(typeof box);                        // 返回的是Dom节点的对象
        // nodetype检测类型
        console.log(box.nodeType);                      // nodetype --检测节点类型
        console.dir(box)                                // 此时的box就是一个对象        

    
    </script>
</body>

</html>

注意事项

1.document.getElementById() 查找

2.传入的id是字符串，记得加引号，直接写id名即可，不需要加 #

3.返回一个匹配到 ID 的 DOM 元素对象

4.找不到会得到null

5.可以通过对象里面的 nodeType 属性来标识节点类型

2.查找html标签元素

在这里插入图片描述

3.查找body标签元素

在这里插入图片描述

Jikel

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
查找Dom节点的方式

查找Dom节点的方式1.根据 id 来查找dom元素节点注意事项2.查找html标签元素3.查找body标签元素1.根据 id 来查找dom元素节点<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
复制链接

扫一扫