1.API

因为咱们在操作DOM元素的时候，用的就是JavaScript提供的API接口。提供的方法或者属性来供开发者进行使用！ API接口(application programing interface)是预先定义的函数，目的就是提供应用程序与开发人员基于某个软件或硬件。

2.DOM

DOM(document object model)文本对象模型。提供对html/XHTML操作的标准编程接口，可以改变网页的内容结构样式！！

DOM树就是把文档映射成了一个树形的结构，通过节点对象的处理，处理的结果可以加入到当前的页面。文档：document 节点：网页中的所有内容,(标签，属性，文本，注释等) 标签节点：elsement ,节点中标签

2.1获取节点元素

1.//获取html节点

console.log(document.documentElement);

2.//获取body节点

console.log(document.body);

3.//通过getElementsByClassName的方法获取

 var div=document.getElementsByClassName("app");

4. //getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

var lis=document.getElementsByTagName("li");

5.//querySelector只查询到第一个元素就返回了！

var box1=document.querySelector(".box1")

6.获取到所有的元素,返回值是一个数组.

var box2=document.querySelectorAll("li")

3.事件三要素：事件源，事件类型，事件处理函数；

事件源事件类型事件处理函数

事件源elem -- 按钮等

事件类型elem.onclick -- 单击双击聚焦失焦属性。。。

事件处理函数 elem.onclik = fuction (){}

<button id="btn">弹出</button>
<script>
     // 1 事件三要素。
    // 事件源 事件类型  事件处理函数
    // 事件源 -- 按钮
    // 事件类型  -- 单击 双击。。。
    // 事件处理函数  -- 搜索的处理程序
    
    //拿到事件源 
    var btn = document.querySelector('#btn');
    //事件类型
    btn.onclick = function (){
        //事件处理
        alert('你好 世界')
    }
</script>

DOM的基本概念和操作