DOM--获取元素：如何获取页面元素？

最新推荐文章于 2023-02-21 02:02:18 发布

风和雨呀~

最新推荐文章于 2023-02-21 02:02:18 发布

阅读量676

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_43968060/article/details/107552282

版权

JavaScript学习笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

一、关于DOM

什么是DOM？

文件对象模型（Document Object Model），是w3c组织推荐的处理可扩展语言（HTML/XML）的标准编程接口。

DOM树

1.文档：一个页面就是一个文档，DOM中使用Document表示。
2.元素：页面里面所有的标签都是元素，使用element表示
3.节点：网页中所有内容都是节点（标签，属性，文本，注释等），使用node表示。
DOM把以上内容都看做是对象

3.获取元素–如何获取页面元素？

根据ID获取：使用getElementById()方法可以获取带有ID的元素对象。

例子：

<!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>
    <div id="time">2020-7-24</div>
</body>
<!-- 
    1.参数ID是大小写敏感
    2.返回的是一个元素对象
 -->
<script>
    var time = document.getElementById('time');
    console.log(time);
    console.log(typeof time);
    //console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法。
    console.dir(time);
</script>

</html>

根据标签名获取：使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>getElementsByTagName</title>
</head>

<body>
    <ul>
        <!-- 若页面中只有一个li，返回的依旧是数组的形式 -->
        <!--  若页面中没有li，返回的依旧是伪数组，但是是一个空的伪数组。 -->
        <li>1</li>
        <!-- <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li> -->
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</body>
<script>
    /*
     *返回来的是获取过来对象的集合 以伪数组的形式储存的
     */
    var lis = document.getElementsByTagName('li');
    console.log(lis);
    // 获取对应位
    console.log(lis[0]);
    // 如果想要一次打印里面的元素对象我们可以采取遍历的方式
    for (var i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }

    var ol = document.getElementsByTagName('ol');
    // 父元素必须是单个对象，获取时不包括父元素自己。不过一般会给ol增加一个ID
    console.log(ol[0].getElementsByTagName('li'));
</script>

</html>

根据标类名获取：使用getElementsByClassName()方法根据类名返回元素对象集合。
根据指定选择器返回第一个元素对象：querySelector(‘选择器’)-切记里面的选择器需要加符号
根据指定选择器返回所有元素对象：querySelectorAll(‘选择器’)

例子：

<!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>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>
</body>
<script>
    // 根据类名返回元素对象集合
    var box = document.getElementsByClassName('box');
    console.log(box);

    // 根据指定选择器返回第一个元素对象：querySelector('选择器'):切记里面的选择器需要加符号
    var firstBox = document.querySelector('.box');
    console.log(firstBox);
    var nav = document.querySelector('#nav');
    console.log(nav);
    var li = document.querySelector('li');
    console.log(li);
    
    // 根据指定的选择器返回全部元素对象
    var allBox = document.querySelectorAll('.box');
    console.log(allBox);
</script>

</html>

风和雨呀~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM--获取元素：如何获取页面元素？

一、关于DOM什么是DOM？文件对象模型（Document Object Model），是w3c组织推荐的处理可扩展语言（HTML/XML）的标准编程接口。DOM树1.文档：一个页面就是一个文档，DOM中使用Document表示。2.元素：页面里面所有的标签都是元素，使用element表示3.节点：网页中所有内容都是节点（标签，属性，文本，注释等），使用node表示。DOM把以上内容都看做是对象3.获取元素–如何获取页面元素？根据ID获取：使用getElementBy
复制链接

扫一扫