JavaScriptAPI

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：本人是位新手，本篇文章可能会有不合理的地方，欢迎评论区留言！
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、 prompt()、log()、reverse()、getMonths()

---

一、Webapi的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

二、获取元素的方式

1.通过ID名获取

代码如下（示例）：

//html代码
<header id="headId" class="headClass">我是通过ID名获取</header>
//js代码
var headId = document.getElementById('headId')

2.通过类名获取

代码如下（示例）：

//html代码
<section class="headClass">我是通过类名获取1</section>
<section class="headClass">我是通过类名获取2</section>
<section class="headClass">我是通过类名获取3</section>
//js代码
var headClass = document.getElementsByClassName('headClass')
console.log(headClass);
console.log(headClass[0]);
console.log(headClass[1]);

---

3.通过标签名获取

//html代码
<section class="headClass">我是通过标签名获取</section>
//js代码
var section = document.getElementsByTagName('section')

---

4.通过name名获取

//html代码
<input type="text" name="user">
<input type="text" name="user">
<input type="text" name="user">
//js代码
var user = document.getElementsByName('user')[1]

---

5.通过querySelector()获取

//html代码
<section class="headClass">我是querySelector获取1</section>
<section class="headClass">我是querySelector获取2</section>
<section class="headClass">我是querySelector获取3</section>
//js代码
var headClass_1 = document.querySelector('.headClass')

---

6.通过queryselectorAll()获取

//html代码
<section class="headClass">我是querySelectorAll获取1</section>
<section class="headClass">我是querySelectorAll获取2</section>
<section class="headClass">我是querySelectorAll获取3</section>
//js代码
var section_1 = document.querySelectorAll('section')

---

总结

提示：这里对文章进行总结：
以上就是今天要讲的内容，本文仅仅简单介绍了元素的获取方法。
提示一下：ID名与querySelector（）这两种方法获取到的元素是单个元素，而剩下的四种方法获取的是多个元素。获取多个元素时，若需指定其中一个，可以通过在语句末尾加上索引来实现。