WebAPI-获取页面元素（标签）的常用方法汇总

爱被打了一巴掌 2023-06-12 08:49 35阅读 0赞

#### 通过 ID 获取元素 ####

语法：

document.getElementById(id)

说明：

*  `document` 表示当前文档对象，就是当前页面；每个载入浏览器的 HTML 文档都是 Document 对象
 *  `getElementById()` Document 对象的一个方法，用于获取指定 id 的元素
 *  `id` 该参数为 id 字符串；就是通过标签的 id 属性为标签设置的具有唯一性的标识（该属性值必须是唯一的），区分大小写

返回值：

*  在当前文档中，被查找的元素（标签）存时返回值为元素对象，不存在则返回 null；获取的是一个元素

<div id="box"> div 元素</div>
    
    <script> // 通过 id 获取页面元素 var el = document.getElementById('box') // 打印 console.log(el) </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

#### 通过标签名获取元素 ####

语法：

document.getElementsByTagName(tagName) 或 element.getElementsByTagName(tagName)

说明：

*  `getElementsByTagName()` 获取特定区域中所有指定的元素；调用该方法的对象可以是 Document 对象也可以是指定的元素对象
 *  `tagName` 字符串类型的标签名
 *  `element` 指定的元素对象（会在该元素内通过标签名获取指定的所有标签）

返回值：

*  获取的指定元素对象的集合，是一个伪数组

<p>p 标签1</p>
    <p>p 标签2</p>
    <p>p 标签3</p>
    <div id="box">
      <p>p 元素1</p>
      <p>p 元素2</p>
      <p>p 元素3</p>
      <p>p 元素4</p>
      <p>p 元素5</p>
    </div>
    
    <script type="text/javascript"> function $(id) { return document.getElementById(id) } // 获取页面中所有的 p 标签 var ps = document.getElementsByTagName('p') // 打印 console.log(ps) // 8 个 p 标签 // 获取 id 为 box 的元素中的所有 p 标签 var ps2 = $('box').getElementsByTagName('p') // 打印 console.log(ps2) // 5 个 p 标签 </script>

![在这里插入图片描述][20191111193803262.png]

## H5 新增获取元素的方式 ##

#### 通过类名 ####

语法：

document.getElementsByClassName(className) 或 element.getElementsByClassName(className)

说明：

*  `getElementsByClassName()` 获取指定区域（元素对象）中所有设置了相同 class 属性的元素；同样调用该方法的对象可以是 Document 对象也可以是指定的元素对象
 *  `className` 字符串形式的 class 类名
 *  `element` 指定的元素对象（会在该元素内通过标签名获取指定的所有标签）

返回值：

*  包含了指定区域下，所有相同类名的子元素的伪数组对象

<p>p 标签</p>
    <div class="flag">div 标签1</div>
    <p>p 标签3</p>
    <div id="box">
      <h1 class="flag">h1 标签</h1>
      <p>p 元素2</p>
      <div class="flag">p 元素1</div>
      <p>p 元素4</p>
      <p class="flag">p 元素2</p>
    </div>
    
    <script type="text/javascript"> function $(id) { return document.getElementById(id) } // 获取页面中所有 class 为 flag 的标签 var ps = document.getElementsByClassName('flag') // 打印 console.log(ps) // 4 个标签 // 获取 id 为 box 的元素中的所有 class 为 flag 的标签 var ps2 = $('box').getElementsByClassName('flag') // 打印 console.log(ps2) // 3 个标签 </script>

![在这里插入图片描述][20191111201132326.png]

#### 通过选择器 ####

###### querySelector() ######

`document.querySelector(cssSelectors)` 该方法用于获取 Document 对象中匹配指定选择器的第一个元素

*  `cssSelectors` 字符串类型的选择器（写法与 CSS 选择器的写法相同），可以是一个到多个

<div id="box">
      <div>div标签</div>
      <div class="section">
        <h3>h3 标签1</h3>
        <p>p 标签1</p>
        <h3>h3 标签2</h3>
        <p>p 标签2</p>
      </div>
    </div>
    
    <script type="text/javascript"> // 获取 DOM 结构为 #box .section 下所有子元素中的第一个 h3 标签 var el = document.querySelector('#box .section > h3') // 打印 console.log(el) // 获取页面中的第一个 p 标签 var p = document.querySelector('p') console.log(p) </script>

![在这里插入图片描述][20191111203713900.png]

###### querySelectorAll() ######

`document.querySelectorAll(cssSelectors)` 获取文档对象中匹配指定 CSS 选择器的所有元素；返回值为匹配的节点集合是一个伪数组；想要遍历这些元素只能使用 for 或 wihle 循环

*  `cssSelectors` 字符串类型的选择器，可以是一个到多个

<div id="box">
      <div>div标签</div>
      <div class="section">
        <h3>h3 标签1</h3>
        <p>p 标签1</p>
        <h3>h3 标签2</h3>
        <p>p 标签2</p>
        <p>p 标签3</p>
      </div>
    </div>
    
    <script type="text/javascript"> // 获取 DOM 结构为 #box .section 下所有子元素中的所有 h3 标签 var hs = document.querySelectorAll('#box .section > h3') // 打印 console.log(hs) // 获取页面中的所有 p 标签 var ps = document.querySelectorAll('p') console.log(ps) </script>

![在这里插入图片描述][20191111205330819.png]

#### 特殊元素的获取方式（body、html） ####

###### 获取 body ######

语法：

> document.body

说明：

*  通过该方法可以直接获取页面上的 body 标签

###### 获取 html ######

语法：

> document.documentElement

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191111153158548.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ==,size_16,color_FFFFFF,t_70
[20191111193803262.png]: https://img-blog.csdnimg.cn/20191111193803262.png
[20191111201132326.png]: https://img-blog.csdnimg.cn/20191111201132326.png
[20191111203713900.png]: https://img-blog.csdnimg.cn/20191111203713900.png
[20191111205330819.png]: https://img-blog.csdnimg.cn/20191111205330819.png