JS DOM编程复习笔记--查找元素（二）

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

今天我们来复习所有在页面中查找元素的DOM方法。

getElementById() – 通过ID查找元素
getElementsByName() – 通过标签上的name属性来查找元素
getElementsByTagName() – 通过标签名称查找元素
getElementsByClassName() – 通过元素的class查找元素
querySelector() – 通过CSS选择器查找元素
querySelectorAll() - 同上

getElementById()

这应该是最常用的一个方法了，通过元素上的ID去查找元素

<div id="root"></div>

一般我们会在HTML中给元素定义一个唯一的ID，如果ID重复会导致后面的元素找不到了。

ID是区分大小写的，root和Root是不同的ID。

使用getElementById(id)方法来获取元素

let element = document.getElementById('root');

如果找到该元素就会返回一个Element对象，如果不存在就会返回null。

getElementById() 例子

HTML结构如下

<html>
  <head>
    <title>JavaScript getElementById()</title>
  </head>
  <body>
    <p id="message">hello world</p>
  </body>
</html>

HTML中有一个ID为message的<p>元素

const p = document.getElementById('message');
console.log(p);

// 输出：
// <p id="message">hello world</p>

当我们查找到某个元素时，我们可以为其添加样式，操作它的属性，查找其父元素，子元素等等。

总结

getElementById()返回一个DOM元素，如果没有找到返回null。
如果多个元素的ID相同，getElementById()会返回遇到的第一个元素。

getElementsByName()

HTML中的每个元素都可以有name属性

<input type="radio" name="language" value="JavaScript">

和ID不同，多个HTML属性可以有同一个name属性

<input type="radio" name="language" value="JavaScript">
<input type="radio" name="language" value="TypeScript">

let elements = document.getElementsByName('language');

getElementsByName()接受元素的name的属性，并返回一个元素NodeList。

getElementsByName() 例子

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript getElementsByName Demo</title>
</head>
<body>
  <p>请您为本次服务进行打分:</p>
  <p>
    <input type="radio" name="rate" value="非常满意"> 非常满意
    <input type="radio" name="rate" value="满意"> 满意
    <input type="radio" name="rate" value="一般"> 一般
    <input type="radio" name="rate" value="不满意"> 不满意
    <input type="radio" name="rate" value="非常不满意"> 非常不满意
  </p>
  <p>
    <button id="btnRate">提交</button>
  </p>
  <script>
    let btn = document.getElementById('btnRate');

    btn.addEventListener('click', () => {
      let rates = document.getElementsByName('rate');
      rates.forEach((rate) => {
        if (rate.checked) {
          alert(`您选择的: ${rate.value}`);
        }
      })
    });
  </script>
</body>
</html>

总结

getElementsByName() 返回指定name一组元素组成的 NodeList。
NodeList 是一个类数组的类型，不是一个真正的数组。

`getElementsByTagName()`

getElementsByTagName()方法接受一个标签名称，并按照它们按照文档中出现的顺序返回一个HTMLCollection集合，一个类数组对象。

<div>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

let elements = document.getElementsByTagName('div');

`getElementsByTagName()` 例子

下面的例子中展示了使用getElementsByTagName()来获取HTML中的H2标签数量，当我们点击计算H2数量按钮时将弹出H2标签数量。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript getElementsByTagName()</title>
</head>
<body>
  <h1>JavaScript getElementsByTagName()</h1>
  
  <h2>第一个标题</h2>
  <p>第一个段落</p>
  <h2>第二个标题</h2>
  <p>第二个段落</p>
  <h2>第三个标题</h2>
  <p>第三个段落</p>

  <button id="btnCount">计算H2数量</button>

  <script>
    let btn = document.getElementById('btnCount');
    btn.addEventListener('click', () => {
      let headings = document.getElementsByTagName('h2');
      alert(`H2标签数量为: ${headings.length}`);
    });
  </script>
</body>
</html>

总结

getElementsByTagName() 接受一个标签名称，返回一个类数组格式的包含匹配到的元素，

getElementsByClassName()

在HTML中，每个元素几乎都会有class属性，因为我们常用它来定义样式

<button class="btn btn-primary">保存</button>

.btn {
  background-color: red;
}

getElementsByClassName()方法接受一个参数，它可以是包含一个或多个类名的字符串

let elements = document.getElementsByClassName(classNames)

比如这样

let btn = document.getElementsByClassName('btn');

如果是多个

let btn = document.getElementsByClassName('btn bt-primary');

注意我们不能使用.btn 或 .btn-primary这样的CSS写法。

getElementsByClassName() 返回也是返回HTMLCollection 元素，一个类数组的对象。

getElementsByClassName() 例子

<div id="app">
  <header>
    <nav>
      <ul id="menu">
        <li class="item">HTML</li>
        <li class="item">CSS</li>
        <li class="item highlight">JavaScript</li>
        <li class="item">TypeScript</li>
      </ul>
    </nav>
    <h1>getElementsByClassName Demo</h1>
  </header>
  <section>
    <article>
      <h2 class="heading-secondary">Example 1</h2>
    </article>
    <article>
      <h2 class="heading-secondary">Example 2</h2>
    </article>
  </section>
</div>

1) 在元素上调用

下面我们先用getElementById()来获取menu元素，然后获取menu元素下的所有class为item的元素

let menu = document.getElementById('menu');
let items = menu.getElementsByClassName('item');

let data = [].map.call(items, item => item.textContent);

console.log(data);

// 输出：
// ["HTML", "CSS", "JavaScript", "TypeScript"]

2) 在根元素调用

下面我们来查重class为heading-secondary的所有元素

let elements = document.getElementsByClassName('heading-secondary');

let data = [].map.call(elements, elem => elem.textContent);

console.log(data);

// 输出：
// ["Example 1", "Example 2"]

querySelector() 和 querySelectorAll()

querySelector()是Element 接口的一个方法。

querySelector() 方法可以使用CSS选择器找到文档中匹配的第一个元素。

let element = document.querySelector(selector);

如果selector不是有效的CSS语法，会产生SyntaxError 异常。

如果没有找到匹配的元素会返回null。

除了使用querySelector()，我们也可以使用querySelectorAll() 方法来查找匹配一组CSS选择器的元素。

let elementList = document.querySelectorAll(selector);

如果没有找到元素返回一个空的NodeList，NodeList 是一个类似数组的对象，我们可以使用forEach()去遍历，也可以通过Array.from将其转换为数组。

let nodeList = Array.from(document.querySelectorAll(selector));

基础使用案例

<!DOCTYPE html>
<html>
<head>
  <title>querySelector() Demo</title>
</head>
<body>
  
  <header>
    <div id="logo">
      <img src="img/logo.jpg" alt="Logo" id="logo">
    </div>
    <nav class="primary-nav">
      <ul>
        <li class="menu-item current"><a href="#home">首页</a></li>
        <li class="menu-item"><a href="#services">服务</a></li>
        <li class="menu-item"><a href="#about">关于</a></li>
        <li class="menu-item"><a href="#contact">联系</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>欢迎来到我的课程</h1>
    
    <div class="container">
      <section class="section-a">
        <h2>你是不是很常听到UI、UX设计师,但却搞不懂UI、UX到底是什么,究竟在工作项目上又有哪些差别呢?这篇文章让你快速先搞懂UI、UX,并告诉你9个关于网站的UX设计提高转换率的方法。</h2>
        <p></p>
        <button>阅读更多</button>
      </section>
      <section class="section-b">
        <h2>Web前端开发</h2>
        <p>web前端开发都有哪些职位? web前端有哪些职位,工作累不累?大家多少都听过,WEB前端的薪资待遇是很不错的。但是这只是一个笼统的说法,其实WEB前端是分很多不同岗位的,现在就跟我一起学习吧</p>
        <button>阅读更多</button>
      </section>
      <section class="section-c">
        <h2>区块链开发</h2>
        <p>认清什么是区块链，系统掌握区块链底层所需技术知识，系统掌握区块链应用层所需技术知识，找到一份15K+的区块链开发工作</p>
        <button>阅读更多</button>
      </section>
    </div>
  </main>

</body>
</html>

1) 通用选择器

* 表示的通用选择器匹配任何类型的所有元素：

查找文档中的所有元素

let elements = document.querySelectorAll('*');

2) 标签选择器

下面代码查找文档中中第一个h1元素

let firstH1 = document.querySelector('h1');

查找所有h2元素

let h2List = document.querySelectorAll('h2');

3) 类选择器

查找HTML中的第一个class为.menu-item的元素

let note = document.querySelector('.menu-item');

查找HTML中所有class为.menu-item的元素

let notes = document.querySelectorAll('.menu-item');

4) ID选择器

查找ID为logo的元素

let logo = document.querySelector('#logo');

ID是页面中的唯一值，所以不能使用 querySelectorAll() 去查询。

5) 属性选择器

下面是属性选择器的一些语法

[attribute]
[attribute=value]
[attribute~=value]
[attribute|=value]
[attribute^=value]
[attribute$=value]
[attribute*$*=value]

下面代码将会查询属性为autoplay的第一个元素

let autoplay = document.querySelector('[autoplay]');

下面代码将会查询所有属性为autoplay的元素

let autoplays = document.querySelectorAll('[autoplay]');

分组选择器

下面查找所有 <div> 和 <p> 元素：

let elements = document.querySelectorAll('div, p');

组合选择器

1) 后代选择器

查找所有p 元素内的所有 <a> 元素

let links = document.querySelector('p a');

2) 子选择器

查找 <ul> 元素内的所有 li 直接子元素：

let listItems = document.querySelectorAll('ul > li');

查找class为.nav的ul内所有li子元素

let listItems = document.querySelectorAll('ul.nav > li');

3) 兄弟选择器

p ~ a 将匹配同一个父元素内的 p元素之后的所有<a>元素

let links = document.querySelectorAll('p ~ a');

4) 相邻兄弟选择器

h1 + a 匹配直接跟在 h1 之后的所有元素

let links = document.querySelectorAll('h1 + a');

伪类选择器

例如a:visited 匹配所有已经访问过的 <a> 元素

let visitedLinks = document.querySelectorAll('a:visited');

总结

querySelector() 查找与CSS选择器匹配的第一个元素。
querySelectorAll() 查找与CSS选择器匹配的所有元素。

最后

有了querySelector()和querySelectorAll() 后其实其他的方法也没啥存在的必要了，如果不考虑兼容IE678的问题放心大胆的用吧。

今天到这里，明天继续复习如果查找父元素，子元素以及兄弟元素。

如果你想跟着我一起复习DOM知识，微信搜索【小帅的编程笔记】，每天更新