WebAPI之DOM

1、什么是DOM

DOM全称为Document Object Model，即文档对象模型，它是WebAPI中最典型的一个API。

 WebAPI参考文档： 

2、获取元素

语法：

let element = document.querySelector(selectors);

        <div>hello1</div>
        <script>
            //获取div标签中的元素
            let div = document.querySelector('div');
            console.log(div);
        </script>

如果获取的元素不唯一，querySelector()方法只能获取所有元素中的第一个元素 ，要想获取所有元素，可以使用querySelectorAll()方法：

        <div>hello1</div>
        <div>hello2</div>
        <div>hello3</div>
        <script>
            let divs = document.querySelectorAll('div');
            console.log(divs);
        </script>

querySelectorAll()方法返回的是一个数组。

3、事件

3.1 基本概念

用户对于页面的一些操作(鼠标单击页面、双击页面、右击页面、鼠标移动、按下某个键盘按键……)，这些操作都会产生一个事件被JS获取到，从而进行更复杂的交互操作。

3.2 事件三要素

① 事件源：哪个元素触发的事件；

② 事件类型：鼠标单击页面、双击页面、右击页面、鼠标移动……；

③ 事件处理程序：触发事件后要进行的处理操作。

3.3 简单示例

        <script>
            let div = document.querySelector('div');
            //让div处理鼠标点击事件
            div.onclick = function(){
                console.log("按下鼠标");
            }
            //处理鼠标发生移动时的事件
            div.onmousemove = function(){
                console.log("移动鼠标");
            }
        </script>

鼠标点击“hello”所在行就会触发鼠标点击事件；

鼠标在“hello”所在行移动时就会鼠标触发移动事件。

注意：事件中的代码只有在触发对应事件时才会触发。

4、操作元素

4.1 获取/修改元素内容

语法：Element.innerHTML 获取一个节点及其后代的内容。

        <div>
            <span>hello world</span>