百度前端技术学院第19天

最新推荐文章于 2023-01-02 21:27:42 发布

weixin_user911

最新推荐文章于 2023-01-02 21:27:42 发布

阅读量176

点赞数

文章标签： css3 javascript html5

本文链接：https://blog.csdn.net/weixin_43274526/article/details/105679045

版权

百度前端技术学院第19天

要点:

querySelector()方法返回文档中匹配指定 CSS 选择器的一个元素。

querySelectorAll()方法返回文档中匹配指定 CSS选择器的所有元素。

使用DOM方法或属性

html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>IFE ECMAScript</title>
</head>

<body>
  <div id="wrapper">
    <div id="news-top" class="section">
      <h3>Some title</h3>
      <div class="content">
        <ul>
          <li><span>HTML</span><a href="">Some Link1</a></li>
          <li><span>JS</span><a class="active" href="">Some Link2</a></li>
          <li><span>CSS</span><a href="">Some Link3</a></li>
          <li><span>JS</span><a href="">Some Link4</a></li>
        </ul>
      </div>
      <img src="">
      <p class="">Some Text</p>
    </div>
    <div id="news-normal" class="section">
      <h3>Some title</h3>
      <div class="content">
        <ul>
          <li><span>HTML</span><a href="">Some Link1</a></li>
          <li><span>HTML</span><a href="">Some Link2</a></li>
          <li><span>JS</span><a class="active" href="#">Some Link3</a></li>
          <li><span>CSS</span><a href="">Some Link4</a></li>
        </ul>
      </div>
      <img src="">
      <p class="">Some Text</p>
    </div>
  </div>
  <script>
    function getAllListItem() {
      // 返回页面中所有li标签
      var x = document.getElementsByTagName("li");
      return x;
    }

    function findAllHtmlSpanInOneSection(sectionId) {
      // 返回某个section下所有span中内容为HTML的span标签
      var x = document.getElementById(sectionId);
      var y = x.getElementsByTagName("span");
      var f = new Array();
      for (var i = 0; i < y.length; i++) {
        if (y[i].innerHTML == "HTML") {
          f.push(y[i]);
        }
      }
      return f;
    }


    function findListItem(sectionId, spanCont) {
      // 返回某个section下，所有所包含span内容为spanCont的LI标签
      var x = document.getElementById(sectionId);
      var y = x.getElementsByTagName("span");
      var f = new Array();
      for (var i = 0; i < y.length; i++) {
        if (y[i].innerHTML == spanCont) {
          f.push(y[i]);
        }
      }
      return f;
    }

    function getActiveLinkContent(sectionId) {
      // 返回某个section下，class为active的链接中包含的文字内容
      var x = document.getElementById(sectionId);
      var y = x.getElementsByTagName('a');
      var f = new Array();
      for (var i = 0; i < y.length; i++) {
        if (y[i].className == "active") {
          f.push(y[i].innerHTML);
        }
      }
      return f;
    }
  </script>
</body>

</html>

使用querySelector()及querySelectorAll()

html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>IFE ECMAScript</title>
</head>

<body>
  <div id="wrapper">
    <div id="news-top" class="section">
      <h3>Some title</h3>
      <div class="content">
        <ul>
          <li><span>HTML</span><a href="">Some Link1</a></li>
          <li><span>JS</span><a class="active" href="">Some Link2</a></li>
          <li><span>CSS</span><a href="">Some Link3</a></li>
          <li><span>JS</span><a href="">Some Link4</a></li>
        </ul>
      </div>
      <img src="">
      <p class="">Some Text</p>
    </div>
    <div id="news-normal" class="section">
      <h3>Some title</h3>
      <div class="content">
        <ul>
          <li><span>HTML</span><a href="">Some Link1</a></li>
          <li><span>HTML</span><a href="">Some Link2</a></li>
          <li><span>JS</span><a class="active" href="#">Some Link3</a></li>
          <li><span>CSS</span><a href="">Some Link4</a></li>
        </ul>
      </div>
      <img src="">
      <p class="">Some Text</p>
    </div>
  </div>
  <script>
    // 使用querySelector及querySelectorAll
    function getAllListItem() {
      // 返回页面中所有li标签
      var x = document.querySelectorAll("li");
      return x;
    }


    function findAllHtmlSpanInOneSection(sectionId) {
      // 返回某个section下所有span中内容为HTML的span标签
      var x = document.querySelector(sectionId);
      var y = x.querySelectorAll("span");
      var f = new Array();
      for (var i = 0; i < y.length; i++) {
        if (y[i].innerHTML == "HTML") {
          f.push(y[i]);
        }
      }
      return f;
    }


    function findListItem(sectionId, spanCont) {
      // 返回某个section下，所有所包含span内容为spanCont的LI标签
      var x = document.querySelector(sectionId);
      var y = x.querySelectorAll("span");
      var f = new Array();
      for (var i = 0; i < y.length; i++) {
        if (y[i].innerHTML == spanCont) {
          f.push(y[i]);
        }
      }
      return f;
    }

    function getActiveLinkContent(sectionId) {
      // 返回某个section下，class为active的链接中包含的文字内容
      var x = document.querySelector(sectionId);
      var y = x.querySelectorAll('a');
      var f = new Array();
      for (var i = 0; i < y.length; i++) {
        if (y[i].className == "active") {
          f.push(y[i].innerHTML);
        }
      }
      return f;
    }
  </script>
</body>

</html>