进阶版JavaScript学习【第一期】

上个礼拜更新完了《零基础JavaScript学习》后，《进阶版JavaScript学习》又来了。

个人空间：GUIDM的个人空间

专栏内容：进阶版JavaScript学习

基础还是关键。

欢迎大家的一键三连。

---

目录

API和Web API

1、API

2、Web API

DOM介绍

DOM树

获取元素

1、根据ID获取 getElementById（）

2、根据标签名获取getElementsByTagName('标签名')

3、通过HTML5新增的方法获取

document.getElementsByClassName('类名')

document.querySelector('选择器')

document.querySelectorAll('选择器')

获取特殊元素（body、html）

---

API和Web API

1、API

应用程序编程接口（API）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码。

API是给程序员提供的一种工具，以便能更轻松实现想要完成的功能。

2、Web API

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

一般都有输入和输出（函数的传参和返回值），Web API很多都是方法（函数）。

---

DOM介绍

DOM：文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展标记语言的标准编程接口，DOM接口可以改变网页的内容、结构和样式。

通过DOM获取过来的元素是一个对象（Object），所以称为文档对象模型。

DOM树

1. 文档：一个页面就是一个文档，DOM中使用document表示。
2. 元素：页面中的所有标签都是元素，DOM中使用element表示。
3. 节点：网页中的所有内容都是节点，DOM中使用node表示。

---

获取元素

语法格式：

document.（？）

1、根据ID获取 getElementById（）

<div id='time'>2022-6-12</div>
<script>
  var timer=document.getElementById('time');
  console.log(timer);
</script>

1. 因为文档页面从上往下加载，所有先得有标签，script现在标签下面。
2. getElementById=get获得element元素通过（by）Id。
3. 参数id是大小写敏感的字符串。
4. 返回的是一个元素对象。
5. console.dir（）：打印返回的元素对象，更好的查看里面的属性和方法。

2、根据标签名获取getElementsByTagName('标签名')

getElementsByTagName( ) 可以返回带有指定标签名的对象集合。

<ul>
    <li>my name is guidm</li>
    <li>my name is guidm</li>
</ul>
<script>
    var lis=document.getElementsByTagName('li');
    consle.log(lis);
    consle.log(lis[0]);
</script>

1. 返回的是获取过来元素对象的集合，以伪数组的形式存储的。
2. 我们想要以此打印里面的元素对象，可以采取遍历的方式，得到的元素是动态的。
3. 如果页面中只有一个元素，返回的还是伪数组的形式。
4. 如果页面中没有这个元素，返回的是一个空的伪数组。

3、通过HTML5新增的方法获取

• document.getElementsByClassName('类名')

根据类名返回元素对象集合。

<div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>
                首页
            </li>
            <li>
                产品
            </li>
        </ul>
    </div>
    <script>
    var boxes=document.getElementsByClassName('box');
    console.log(boxes);
    </script>

• document.querySelector('选择器')

根据指定选择器返回第一个元素对象。

<div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>
                首页
            </li>
            <li>
                产品
            </li>
        </ul>
    </div>
    <script>
        document.querySelector('.box');
        document.querySelector('#nav');
        document.querySelector('li');
    </script>

1. document.querySelector('.类名');
2. document.querySelector('#id');
3. document.querySelector('元素名');

• document.querySelectorAll('选择器')

根据指定选择器返回所有元素对象集合。

  <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>
                首页
            </li>
            <li>
                产品
            </li>
        </ul>
    </div>
    <script>
        document.querySelectorAll('.box');
    </script>

• 获取特殊元素（body、html）

（1）获取body元素

变量=document.body;

var bo=document.body;

（2）获取html元素

变量=document.documentElement；

var ht=document.documentElement;