Web API 学习笔记 02-获取元素

目录

DOM是什么

获取元素方法1 - querySelector方法

获取元素方法2 - querySelectorAll方法

---

DOM是什么

首先，我们要了解DOM是什么，我们得先了解WebAPI，WebAPI包括DOM(文档对象模型)，BOM(浏览器对象模型)，具体内容可以看DOM介绍这一篇文章

获取元素方法1 - querySelector方法

获取元素的方法有许多，这里我们用到的是 querySelector("CSS区域")

语法：document.querySelector(”CSS区域“)；

<ul class="nav">
    <li>我的首页</li>
    <li>产品介绍</li>
    <li>联系方式</li>
</ul>

<script>
    let li = document.querySelector('.nav li')
    console.log(li)
</script>

在JavaScript，我们会获取到 ul 的第一个 li,如下图

要注意的是，在querySelector方法里面是放一个 字符串

获取元素方法2 - querySelectorAll方法

querySelectorAll方法是用来获取多个元素

语法：document.querySelectorAll(“CSS区域”)；

<ul class="nav">
    <li>我的首页</li>
    <li>产品介绍</li>
    <li>联系方式</li>
</ul>

<script>
    let li = document.querySelectorAll('li')
    console.log(li);
</script>

可以看到在里面是一个数组，但是这个数组是 伪数组，伪数组有着数组的一些特征，但是又没有数组的一些方法，具体的特征到时候我会抽个时间单独出一篇文章。

在JavaScript，我们会获取到一组 li li,如下图