DOM——获取元素的四种方法

最新推荐文章于 2024-07-08 22:48:46 发布

置顶 ༄༊心灵骇客༣

最新推荐文章于 2024-07-08 22:48:46 发布

阅读量350

点赞数 1

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

本文链接：https://blog.csdn.net/boyas/article/details/120052617

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

获取元素的四种方法

根据id获取

<!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>
</head>
<body>
    <div id='time'>2021-9-2</div>
    <Script>
        //参数id是大小写敏感的字符串
        //返回的是一个元素对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //打印返回的元素对象，更好的查看里面的属性和方法
        console.dir(timer);
    </Script>
</body>
</html>

在这里插入图片描述

根据标签名获取

<!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>
</head>
<body>
    <ul>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
        <li>知否知否，应是等你好久</li>
    </ul>
    <ol id="ol">
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
        <li>生僻字</li>
    </ol>
    <script>
        //1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        for (var i = 0; i < lis.length; i++){
            console.log(lis[i]);
        }
        //2.element.getgetElementsByTagName('标签名');
        var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>
</html>

在这里插入图片描述

通过HTML5新增的方法获取

<!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>
</head>
<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
    <script>
        //getElementsClassName()  根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        //querySelector() 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 类加.,id加#
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        //querySelector() 返回指定选择器的所有元素对象集合
        var allBox =document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>
</html>

在这里插入图片描述

获取特殊元素

<!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>
</head>
<body>
    <script>
        //1.获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        //2.获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>
</html>

在这里插入图片描述

༄༊心灵骇客༣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM——获取元素的四种方法

获取元素的四种方法根据id获取根据标签名获取通过HTML5新增的方法获取获取特殊元素根据id获取<!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-
复制链接

扫一扫