Web API、DOM（一）

一：WEB API和js的关联。1.js分为ECMAScript和DOM、BOM。js基础学的是ECMAScript，主要是js基本语法。WEB API主要学的是DOM和BOM。js基础学习ECMAScript基础语法为后面作铺垫，WEB APIs 是JS的应用，大量使用JS基础语法做交互效果。2.API和WEB API（1）API简单理解：API是程序员提供的一种工具，以便能更轻松实现想要完成的

飞天小女侠~

350人浏览 · 2022-02-28 20:20:45

飞天小女侠~ · 2022-02-28 20:20:45 发布

一：WEB API和js的关联。

1.js分为ECMAScript和DOM、BOM。js基础学的是ECMAScript，主要是js基本语法。WEB API主要学的是DOM和BOM。

js基础学习ECMAScript基础语法为后面作铺垫，WEB APIs 是JS的应用，大量使用JS基础语法做交互效果。

2.API和WEB API

（1）API 简单理解：API是程序员提供的一种工具，以便能更轻松实现想要完成的功能。

（2）WEB API

二、DOM导读

2.1 DOM简介

2.2 DOM的一些专有名词：

DOM树：

文档：一个页面就是一个文档。DOM中使用doucument表示

元素：页面中所有的标签都是元素，DOM中使用element表示

节点：页面中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。

2.3 获取元素

获取页面中的元素可以使用以下几种方式来获取：

2.3.1根据ID获取。

使用getElementById()；来获取

（1）因为文档页面从上往下加载，所以先得有标签。因此script写到标签下面。

（2）参数id是大小写敏感的字符串

（3）返回的是一个元素对象，可以通过 typeof 变量名来查看，返回的是一个object

（4）console.dir（变量名）打印返回的元素对象更好的查看里面的属性和方法。

<body>
    <div id="time">2010-9-9</div>
    <script>
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        console.dir(timer);//输出timer的属性和方法。
    </script>
</body>

2.3.2 根据标签名获取

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

（1）返回的是获取过来元素对象的集合，以伪数组的形式存储

（2）想要因此打印里面的元素对象，可以使用遍历输出。得到的元素对象是动态的。

举例：①假设ul中存储了多个li元素，想要获取多个li元素。

可以使用document.getElementsByTagName('li');获取整个文档中的li元素。

②假设ul中存储多个li元素，ol中也存储多个li元素。

如果想要获取整个文档中的li，可以使用document.getElementsByTagName('li')；

如果想要获取ol下的li，可以使用element.getElementsByTagName('li')。首先获取var ol = document.getElementsByTagName('ol')；然后console.log（ol[0].getElementsByTagName('li')）。//前提，整个页面中只有一个ol。为什么要使用[0]呢，因为ol得到的一个数组，而不是一个元素，所以要写[0]
或者给ol加一个id，先通过var ol = document.getElementById(id名)，再通过ol.getElementsByTagName('li')获取li元素。

2.3.3 根据类名获取元素。注意：H5新增的。

getElementsByClassName()//根据类名返回元素对象集合

2.3.4 通过选择器来选择，也是H5新增的。

（1）document.querySelector('选择器')//根据指定选择器第一个元素对象。切记里面的选择器需要加符号。

document.querySelector('.类名')
document.querySelector('#id')
document.querySelector('标签名')

（2）document.querySelectorAll('选择器')//返回指定选择器的所有元素对象。

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

可以通过设置id来获取，但是body和html一个页面中只有一个。因此也提供了方法。

2.4.1 获取body元素。

var bodyEle = document.body

2.4.2 获取html元素

var htmlEle = document.documentElement;

2.5 事件

触发响应的一种机制，网页中每个元素都可以触发js事件。

2.5.1事件的组成（事件源、事件类型、事件处理程序也称为事件三要素）

（1）事件源：事件被触发的对象

（2）事件类型：如何触发，什么事件：鼠标点击（onclick）、鼠标经过、滚轮等

（3）事件处理程序：通过一个函数赋值的方式来完成

案例：

<body>
    <button id = "btn">唐伯虎</button>
    <script>
        var btn = documnent.getElementById('btn');//事件源
        btn.onclick = function(){//事件类型、事件三要素
            alert('点秋香');
        }
    <script>
</body>

2.5.2 执行事件的步骤：

获取事件源
绑定事件（注册事件）onclick
添加事件处理程序btn.onlick = function(){.....}

2.6 操作元素

2.6.1 修改元素内容

<body>
    //按按钮，div显示当前系统事时间，p标签直接显示当前系统事件。
    <button>显示当前系统事件</button>
    <div>显示时间</div>
    <p></p>
    <script>
        var btn = document.querySelector('button');
        var div = document.quertSelector('div');
        btn.onclick = function(){
            div.innerText = '2019-06-06';//或者使用之前写的获取当前系统事件的函数。
        }
        var p = document.querySelector('p');
        p.innerText('2019-06-06')
    </script>
</body>

innerText和innerHTML的区别：

他们都是可读可写的。

写的时候：

（1）innerText不识别html标签。如果写的时候带有html标签，一样会写出来。非标准

（2）innerHTML识别html标签。如果写的时候，带有html标签，比如给字体加粗，会识别出来，并给字体加粗。 W3C标准。

读的时候：

（1）innerText不显示HTML标签。同时去除空格和换行。非标准

（2）innerHTML显示html标签。保留空格和换行。W3C标准。

2.6.2 修改元素属性

<body>
    //点击不同的按钮，显示不同图片
    <button id="ldh">刘德华</button>
    <button id="zxy">张学友</button>
    <img src="images/ldh.jpg" alt="" title="刘德华">

    <script>
        //修改img中src的属性
        //1.获取元素
        var ldh = document.getElementById('ldh');
        var zxy = document.getElementById('zxy');
        var img = document.querySelectors('img');
        //2.绑定事件
        zxy.onclick = function(){
            img.src = 'images/zxy.jpg';
            img.title = '刘德华';
        }
        ldh.onlick = function(){
            img.src = 'images/ldh.jpg';
            img.title = '张学友';
        }
        
    </script>
</body>

案例：分时显示不同的图片。（已经做过练习。注意遇到的问题。innerText不是函数，而是属性。）

2.6.3表单元素的属性操作

表单元素属性：<input type="" value="输入内容" checked selected disabled>

<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        
        btn.onclick = function(){
            input.value = '被点击了';
            // 如果某个表单被禁用了。不能再点击，可以用disabled这个属性。可以将button禁用
            //btn.disabled = true;两种写法都可以。
            this.disabled = true;//this指向的是事件函数的调用者。
        }
    </script>
</body>

案例：仿京东显示隐藏密码明文案例

仿京东显示隐藏密码明文案例代码以及思路https://blog.csdn.net/xuan971130/article/details/1232108832.6.4 修改样式属性

（1）使用element.style 修改

<head>
    <style>
        div{
            width: 200px;
            height:200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        div.onclick = function(){
            this.style.backgroundColor = 'red';
        }
    </script>
</body>