title: Web API - DOM 第一节（获取元素）
categories: 🥭笔记
tags: [web,dom,javascript]
date: 2021-02-12 17:20:00

Web API - DOM

DOM简介

文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。

通过DOM接口，可以改变网页的内容，结构和样式

DOM树

文档：一个页面就是一个文档，DOM中使用document表示

元素：页面中所有的标签都是元素，DOM中使用element表示

节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM把以上内容都看作对象

获取元素

如何获取页面元素

• 根据ID获取
• 根据标签名获取
• 用过H5新增的方法获取
• 特殊元素获取

根据ID获取

使用 getElementById获取带有ID的元素对象

Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。

语法

var element = document.getElementById(id);

注：

• **element**是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
• **id**是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

实例：

    <div id="time">2019</div>
<script>
var time = document.getElementById('time');
console.log(time);
</script>

返回：

根据标签名获取

使用 document.getElementsByTagName可以返回带有制定标签名的对象的集合

实例：

<ul>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
</ul>
<script>
 var tag = document.getElementsByTagName('li');
 console.log(tag);
</script>

返回：

返回的是获取过来元素对象的集合，以伪数组的形式存储的

也就是说我们可以通过提取数组元素的方法得到其中一个元素的内容。

---

例如：

 console.log(tag[0]);

通过这个，我们可以得到第一个元素的内容：猫狗鼠鱼

如下图：

通过遍历的方式依次打印其中的元素

如果我们想依次打印里面的元素，可以使用遍历的方式：

 for(var i = 0 ;i < tag.length;i++){
     console.log(tag[i]);
 }

得到：

得到元素里面的某些标签

element.getElementsByTagName()

如图，我们有两组ul

通过代码：

<ul>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
    <li>猫狗鼠鱼</li>
</ul>
<ul id="nav">
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
    <li>猫狗鼠</li>
</ul>
<script>
var nav = document.getElementById('nav');
  navs =   nav.getElementsByTagName('li')
console.log(navs);
</script>

解释：

输出：

通过HTML新增方法获取元素

document.getElementsByClassName('类名')

document.getElementsByClassName('类名') //根据类名返回元素对象集合

实例：

<p class="new">你好</p>
<script>
var saying = document.getElementsByClassName('new');
console.log(saying);
</script>

返回：

document.querySelector('选择器') //根据指定选择器返回第一个元素对象

document.querySelector('选择器') //根据指定选择器返回第一个元素对象*

实例：

var firstSaying = document.querySelector('.new');
console.log(firstSaying);

说明： 使用 document.querySelector('选择器') 可以直接自动判断选择器类型， .类名为class选择器 #类名为id选择器

其它形式示例：

返回：

document.querySelectorAll() 返回指定选择器的所有元素对象集合

实例：

var allNav =  document.querySelectorAll('nav');
console.log(allNav);

返回：