首页 前端知识 js中的document.querySelector()方法

js中的document.querySelector()方法

2024-03-20 11:03:34 前端知识 前端哥 608 55 我要收藏

1. document.querySelector

document.querySelector 可以获取文档中的第一个匹配的元素。
这个函数返回匹配的元素(如果找到了匹配项),否则返回 null

1.1 语法:

const element = document.querySelector(selector);

1.2 示例

以下示例, 包含根据标签名选择,类名选择,属性名等选择元素

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Node-Link Tree</title>
  </head>

  <body>
    <div class="container">
      <h1>你好,2024!</h1>
      <h2>你好.冬天</h2>
      <p>龙马精神</p>
      <span class="first">龙年大吉</span>
      <p class="first">龙凤呈祥</p>
      <br />
      <a target="self">1.龙年行大运,祥瑞照门庭。岁月悠悠,情谊绵长,感恩有您相伴。愿您在新的一年里,如龙腾飞,事业兴旺;如龙入海,生活美满。祝您龙年吉祥如意!
      </a>
      <br>
      <a target="_blank">龙年到来,祥瑞满天。愿您如龙般矫健,事业腾飞;如龙鳞闪耀,生活美满。祝您龙年大吉,万事如意!
      </a>
    </div>
    <script>
      // 标签名为 p 的第一个元素
      document.querySelector("p").style.color = "red";
      // class="first" 的第一个元素:
      document.querySelector(".first").style.color = "green";
      //签名为 p,且class="first" 的第一个元素
      document.querySelector("p.first").style.background = "pink";

      //带target属性的第一个a元素
      document.querySelector("a[target]").style.background = "skyblue";
      //target属性为_blank的第一个a元素
      document.querySelector("a[target='_blank']").style.background = "skyblue";

      //多元素选择时,根据文档,哪个在前面就先匹配哪个
      document.querySelector("h1,h2").style.backgroundColor = "yellow";
    </script>
  </body>
</html>

在这里插入图片描述

2.querySelectorAll()

当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时,如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。
该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。 ---->querySelectorAll 得到一个伪数组 DOM。

ParentNode.querySelectorAll()的结果是NodeList数组,但是又不是一般的js数组(Array),所以也不能直接调用Array的方法

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Node-Link Tree</title>
  </head>

  <body>
    <div class="container">
      <p>龙马精神</p>
      <p class="first">龙凤呈祥</p>
    </div>
    <script>
    
      // 标签名为 p 的第一个元素
      var pAll = document.querySelectorAll("p")
      pAll[0].style.color = 'pink'
      console.log(pAll)
      
    </script>
  </body>
</html>

在这里插入图片描述

3.document.querySelector.bind和document.querySelectorAll.bind

定义全局的变量,方便直接获取dom

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Node-Link Tree</title>
  </head>

  <body>
    <div class="container">
      <p>龙马精神</p>
      <span class="first">龙年大吉</span>
      <p class="first">龙凤呈祥</p>
    </div>
    <script>
        var query = document.querySelector.bind(document);
        var query_tagname = query('p')
        console.log(query_tagname)
        query_tagname.style.color = 'red'
    </script>
  </body>
</html>

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3941.html
评论
发布的文章

jQuery3 学习手册(三)

2024-08-18 22:08:04

vue和jQuery有什么区别

2024-04-29 11:04:47

推荐项目:jQuery.Gantt

2024-08-18 22:08:37

jQuery UI 秘籍(一)

2024-08-18 22:08:15

jQuery详解

2024-04-29 11:04:38

echarts饼图点击图例问题

2024-08-18 22:08:48

echarts天气折线图

2024-08-18 22:08:46

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!