Dome实际上就是一种API接口

本文elem 与element均代表当前元素

1.API

API接口（application programming interface）是预先定义的函数，目的就是提供应用程序与开发人员基于某个软件或者硬件得以访问一组例程的能力。而无需访问源码，无需理解内部的实现机制，只需调用即可！！！

2.DOM

DOM（document Object Model）文档对象模型。提供的对html/xhtml操作的标准编程接口。可以改变网页的内容结构样式！！！ DOM树是把文档映射成了一个树形的结构，通过节点对象的处理，处理的结果可以加入到当前的页面文档: document 节点: 网页中的所有内容，（标签、属性、文本、注释等）标签节点: element，节点中标签

3. Dome元素的获取#

3.1 id的获取 getElementById('id名')

// id的获取 getElementById('id名')
var div =  document.getElementById('app');

3.2 class的获取 getElementsByClassName('class名')

// class的获取 getElementsByClassName('class名') 伪数组！！！
var div = document.getElementsByClassName('app')

3.3 标签的获取 getElementsByTagName("li")

 // li 的获取 getElementsByTagName("li")
    var lis = document.getElementsByTagName("li");
    console.log(lis

3.4 ☆☆☆☆☆☆☆☆☆

 // document指的就是ul li div 等元素标签 所以也可以这样写
    //若
    var ul = document.getElementsByClassName('myul')[0];
    var li = ul.getElementsByTagName('li')
    console.log(li)

4.dome 元素通用提取

4.1 document.querySelector("标签名如div .类名 #id名")

querySelector 只返回查询到第一个元素就进行返回了！！！

var box1 = document.querySelector('.box1');//得到一个元素

4.2 querySelectorAll()

querySelectorAll()返回一个数组

 var box1 = document.querySelectorAll('.box1')[0];

5.特殊标签的提取

body: document.body
html: document.documentElement
elem.innerHTML 能够识别元素标签
elem.innerText 识别不了元素标签可设置text值

<script>
        //返回body
        console.log(document.body)
        //返回html
        console.log(document.documentElement)
         p.innerText = '密码设置完成'
    </script>

6.事件三要素 ☆☆☆☆☆☆☆☆

事件源事件类型事件处理函数
事件源elem -- 按钮等
事件类型elem.onclick -- 单击双击聚焦失焦属性。。。
事件处理函数 elem.onclik = fuction (){}

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

7.事件类型

7.1

点击 onclick
聚焦 onfocus
失焦 onblur
鼠标移到某元素之上 onmouseover
鼠标从某元素移开  onmouseout

7.2也可对元素的属性进行设置

element表示当前元素 可不是真的写个element

例如：

element.readOnly = true ;只可读
element.disabled =true ;不可改变
等

7.3也可对当前元素的样式的属性进行修饰

操作元素样式格式 elem.style.属性（驼峰命名形式,该加单位的加单位）= '';

 //改变box的背景颜色
        var box = document.querySelector('.box');
        box.style.backgroundColor = 'pink';
        //改变宽度
        box.style.width = '500px'

7.4 添加新的类名并改变样式 elem.className

elem.className = '原来的类名类名'(一定要把原来的类名也写上否则原来的类名会消失)

    <div class="box"></div>
   <script>
       //拿到元素
       var box = document.querySelector('.box');
       //添加新的class elem.className = '原来的类名 类名'(一定要把原来的类名也写上 否则原来的类名会消失)
       box.className = 'box divstyle'
       console.log(box)
   </script>

7.5 添加，移除及切换 CSS 类

classList 属性返回元素的类名 element.classList
该属性用于在元素中添加，移除及切换 CSS 类。
add(class1, class2, ...)	在元素中添加一个或多个类名。
contains(class)	返回布尔值，判断指定的类名是否存在。
item(index)	返回元素中索引值对应的类名。索引值从 0 开始。
remove(class1, class2, ...)	移除元素中一个或多个类名。
toggle(class, true|false)	在元素中切换类名。

classList

Dome元素的创建