JS-DOM选择器

最新推荐文章于 2022-10-23 16:18:34 发布

hey_just_do_it

最新推荐文章于 2022-10-23 16:18:34 发布

阅读量289

点赞数

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

本文链接：https://blog.csdn.net/qq_40850291/article/details/115625468

版权

JS 专栏收录该内容

9 篇文章 3 订阅

订阅专栏

JS-DOM选择器

文章目录

JS-DOM选择器
DOM选择器
一、问题：获取ul中的第一个li标签
二、方法一:getElementByXXX
三、方法二:querySelector API
四、方法三：Chrome环境中的$符号简写方式
五、总结
- 1.性能上
- 2.使用上

DOM选择器

一、问题：获取ul中的第一个li标签

<!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>DOM选择器</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>

二、方法一:getElementByXXX

  // document.getElementById
  // document.getElementsByClassName
  // document.getElementsByTagName

在这里插入图片描述
当层级比较多时，使用这种方法是比较麻烦的

三、方法二:querySelector API

模仿Jquery的写法产生的API

  // document.querySelector  匹配满足条件的第一个标签
  // document.querySelectorAll 匹配满足条件的所有标签

在这里插入图片描述

四、方法三：Chrome环境中的$符号简写方式

在这里插入图片描述

五、总结

1.性能上

querySelector API比getElementByXXX API性能略低，但现在电脑的运行速度和计算速度都很快，本身它们之间差异也不大，所以在这个前提下，它们之间的差异是可以忽略不计的

2.使用上

在这里插入图片描述
将两种方式获取的标签赋值给两个变量

之后删除页面中第三个li标签，再打印两个变量

我们会发现，使用getElementByXXX获取的数据中，没有了删除的标签，而使用querySelector API获取的数据中，删除的标签还在，只是把鼠标放到删除的标签上，它已经不在当前页面中了。所以我们得出结论：使用getElementByXXX得到的是动态数据结构，使用querySelector API得到的是某一时间节点数据的拷贝，之后页面数据的动态修改对它没有影响。所以不要在频繁改变DOM的情况下，尽量不要从getElementByXXX过渡到querySelector API。如果一定要过过渡，那在DOM改变时重新调用querySelector API。

hey_just_do_it

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-DOM选择器

JS-DOM选择器文章目录JS-DOM选择器DOM选择器一、问题：获取ul中的第一个li标签二、方法一:getElementByXXX三、方法二:querySelector API四、方法三：Chrome环境中的$符号简写方式五、总结1.性能上2.使用上DOM选择器一、问题：获取ul中的第一个li标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫