Web API 第1（DOM）

最新推荐文章于 2021-08-17 09:29:17 发布

原创最新推荐文章于 2021-08-17 09:29:17 发布 · 186 阅读

CC 4.0 BY-SA版权

本文介绍了Web APIs的概念，特别是DOM作为操作HTML和XML页面的标准编程接口。详细讲解了如何根据ID、类名和选择器获取元素，以及事件基础、元素内容和样式的操作。还涵盖了DOM的重点，包括创建、增加、修改、查询元素，属性操作和事件处理程序的使用。

Web APIs

（1）概念
1，js基础学的是ECMAScript基础语法，Web APIs主要学DOM和BOM是js的应用，主要用于页面的交互效果实现；
2，API：是一些预先定义的函数，是给程序员提供的一个接口，以便能更为轻松的实现想要实现的功能；
3，Web API：是浏览器提供的一套操作浏览器功能（BOM）和页面元素（DOM）的API ，是浏览器提供的接口，主要针对于浏览器做交互效果；
Web API 一般都有输入和输出（函数的传参和返回值），很多都是方法（函数）
（2）DOM
文档对象模型：是处理可扩展标记语言（HTML或者XML）的标准编程接口，通过这些接口可以改变网页的内容、结构和样式；
DOM树：
1，文档：一个页面就是一个文档，DOM中使用document表示；
2，元素：页面中所有的标签都是元素，DOM中使用element表示；
3，节点：网页中所有的内容都是节点（标签、文本、属性、注释等），DOM中使用node表示；
（3）获取元素
**1，**根据ID获取：document.getElementById（）；
1.1，get 获得 element 元素 by 通过驼峰命名法；
1.2，参数id是大小敏感的字符串；
1.3，返回的是一个元素对象；
1.4，console.dir()：打印返回的元素对象，可以查看里面的属性和方法；
**2，**根据类名获取：document.getElementByClassName（）；这是H5新增的
**3，**根据指定选择器返回的第一个元素对象：document.querySelector（）；H5新增
**4，**根据指定选择器返回的所有元素对象：document.querySelectorAll（）；H5新增
，等同于方法2；
获取body元素 ：document.body
获取html元素：document.documentElement
（4）事件基础
1，概述：触发响应的一种机制；
2，组成：事件源（事件被触发的对象）、事件类型（如何触发：鼠标点击：onclick）、事件处理程序（通过函数赋值的方式）；
3，步骤：获取事件源、绑定事件、添加事件处理程序；
（5）操作元素
1，js的DOM操作可以改变网页内容、结构和样式；
2，改变元素内容：innerText（不识别html标签，会直接显示，非标准、会去除空格和换行）、innerHTML（w3c标准，常用）；两个属性是可读写的，可以获取元素里面的内容；
例子：分时显示

<div>上午好</div>
    <script>
        var div = document.querySelector('div');
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            div.innerHTML = '好好学习';
        } else if (h < 18) {
            div.innerHTML = '好好玩耍';
        } else {
            div.innerHTML = '好好睡觉';
        }
    </script>

3，表单元素修改设置：input.value而不是input.innerHTML
例子：密码的点击显示和隐藏

<input type="password">
    <button>点击</button>
    <script>
        var inp = document.querySelector('input');
        var btn = document.querySelector('button');
        var flag = 0;
        btn.onclick = function() {
            if (flag == 0) {
                inp.type = "text";
                flag = 1;
            } else {
                inp.type = "password";
                flag = 0;
            }
        }
    </script>

4，改变元素样式：
行内样式操作（权重高）：element.style （样式较少或者是功能简单的情况使用）
类名样式操作：element.className（修改元素的className更改元素样式，适合样式较多，功能复杂的情况）
例子：点击隐藏事件

<input type="text">
    <button>点击</button>
    <script>
        var inp = document.querySelector('input');
        var btn = document.querySelector('button');
        btn.onclick = function() {
            inp.style.display = 'none';
        }
    </script>

例子：显示或隐藏文本框内容（获得焦点onfocus，失去焦点onblur）

<input type="text" value="请输入密码">
    <button>点击</button>
    <script>
        var inp = document.querySelector('input');
        var btn = document.querySelector('button');
        inp.onfocus = function() {
            if (this.value == '请输入密码') {
                this.value = '';
            }
        }
        inp.onblur = function() {
            if (this.value == '') {
                this.value = '请输入密码';
            }
        }
    </script>

DOM重点

（1）创建
1，document.write
2，innerHTML
3，createElement
（2）增
1，appendChild
2，insertBefore
（3）改
主要修改dom元素的内容、属性、表单的值等；
1，修改元素属性：src、 href、 title等
2，修改元素内容：innerHTML、 innerText
3，修改表单元素：value、 type、 disabled等
4，修改元素样式：style、 className
（4）查
主要获取查询dom元素
1，DOM提供的API方法：getElementById、 getElementByTagName（兼容的方法，不太推荐）
2，H5新增方法：querySelector、 querySelectorAll（比较提倡）
3，利用节点操作获取元素：父（parentNode）、子（children）、兄（previousElementSibling、 nextElementsibling）（比较提倡）
（5）属性操作
主要针对于自定义属性
1，setAttribute：设置dom属性值
2，getAttribute：得到dom属性值
3，removeAttribute：移除属性
（6）事件操作
鼠标事件：
1，onclick：鼠标点击触发
2，onmouseover：鼠标经过触发
3，onmouseout：鼠标离开触发
4，onfouse：获得鼠标焦点触发
5，onblur：失去鼠标焦点触发