webAPI基础

一、关于webAPI1.API和webAPI1.1API概念API（Application Programming Interface）应用程序编程接口，简单理解API是给程序员提供的一种工具，以便能更轻松的完成想要的功能。1.2webAPI概念webAPI是浏览器提供的一套操作浏览器功能和页面元素的接口（BOM、DOM）。比如我们想要浏览器弹出一个警示框alert('警示框')，alert就是浏

嘿！呆桃日记～

4977人浏览 · 2022-07-14 14:44:38

嘿！呆桃日记～ · 2022-07-14 14:44:38 发布

一、关于webAPI

1.API和webAPI

1.1API概念

API（Application Programming Interface）应用程序编程接口，简单理解API是给程序员提供的一种工具，以便能更轻松的完成想要的功能。

1.2webAPI概念

webAPI是浏览器提供的一套操作浏览器功能和页面元素的接口（BOM、DOM）。比如我们想要浏览器弹出一个警示框alert('警示框')，alert就是浏览器的API

2.总结

API是为程序员提供的接口，帮助实现某种功能，会使用就可以了，不用纠结内部如何实现。

webAPI主要针对的是浏览器提供的接口，主要针对于浏览器做交互效果。

webAPI一般都有输入输出（函数的传参和返回值），webAPI很多都是方法（函数）。

二、DOM

1.DOM的概念

DOM（Document Object Model）文档对象模型，是W3C组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过DOM接口就可以改变网页的内容、结构、样式。

2.DOM树

文档：一个页面就是一个文档，在DOM中用document表示。
元素：页面中所有的标签都叫元素，在DOM中用element表示。
标签节点：网页中的所有内容都是结点（标签、文本、属性、注释等），在DOM中用node表示。
DOM把以上内容都看作式是对象

3.获取元素

3.1根据id值获取单个元素

语法：

document.getElementById('元素id')

举例

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <button id="v">aaaa</button>
    <script>
        var a=document.getElementById('v')
        console.log(a);
        //查看返回的对象的属性和方法,
        console.log(typeof a);//因为id值是唯一的,所以返回值是元素对象或者是null
    </script>
</body>
</html>

注意：id值是唯一的，若页面上有相同的id值的标签时，在获取时，获取的是id值第⼀次出现的标签。

3.2根据标签名获取⼀组元素

语法：

document.getElementsByTagName('标签名')

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ol id="a">
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>33</li>
        <li>55</li>
    </ol>
    <script>
        // 1.返回的是,获取过来元素对象的集合，是以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[1]);
        // 2. 想要依次打印里面的元素对象可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        //如果我们想要获取ol中的li就不能document，因为获取的是整个文档里的li
        // 3. element.getElementsByTagName()可以得到指定元素里面的某些标签
        //注意：父元素必须是单个对象（不能是伪数组，必须指明是哪一个元素的对象）不包括父元素自己
        var olis = document.getElementById('a');
        var a = olis.getElementsByTagName('li');
        console.log(a);
</body>
</html>

返回值是带有标签名的集合,以伪数组的形式存储的。

如果页面中只有一个li，返回的还是以伪数组的形式。

如果页面中没有这个元素，返回的是空的伪数组的形式。

3.3根据类名获取⼀组元素

语法：

document.getElementsByClassName('类名')

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <div class="a"></div>
    <div class="a"></div>
    <ul class="b">
        <li></li>
    </ul>
    <script>
        var as=document.getElementsByClassName('a')
        console.log(as);//返回集和
    </script>
</body>
</html>

3.4根据name获取⼀组元素

语法：

document.getElementsByName('名字')

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <div class="a">
        123
        <p id='box'>
            啦啦啦
            <span class="a">
                1234
            </span>
            <span name='nav'>1234</span>
        </p>
        <span name="nav">1234455</span>
    </div>
    <script>
        var names = document.getElementsByName('nav')
        console.log(names);//返回集和
    </script>
</body>
</html>

getElementsByName()方法都是用于获取表单元素。（不常用）

3.5*querySelector和querySelectorAll

语法：

//根据选择器获取单个元素
document.querySelector('css选择器')
//根据选择器获取⼀组元素
document.querySelectorAll('css选择器')

注意：querySelector返回指定选择器的第一个元素对象。

querySelector和querySelectorAll 里面的选择器需要加选择器符号,参数是css选择器(包含复合选择器)。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <div class="a">
        123
        <p id='box'>
            啦啦啦
            <span class="a">
                第一个
            </span>
            <span name='nav'>1234</span>
        </p>
        <span class="a">第二个</span>
    </div>
    <script>
        var span= document.querySelector('span')
        console.log(span);//返回第一个
        //复合选择器
        var span= document.querySelector('div #box .a')
        console.log(span);

        var span= document.querySelectorAll('span')
        console.log(span);//所有span
    </script>
</body>
</html>

3.6获取特殊元素

//获取body元素
document.body
//获取html元素
document.documentElement

4.事件基础

用户做的动作就是事件。

用户和网页之间的交互行为（鼠标点击、鼠标进⼊、鼠标离开、键盘按下、键盘弹起、手指按压、手指移动等等）。

4.1事件三要素及及执行事件的步骤

事件三要素分为：

事件源：被触发的元素，如点击的按钮。
事件类型：如何触发的事件，比如点击按钮（onclick）、鼠标移入移出等。
事件处理程序：事件发生后的结果。

执行事件的步骤：

获取事件源（获取结点）
绑定事件
事件处理程序（采用函数赋值的形式）

<script>
        //事件源-获取结点
        var but = document.querySelector('button')
        //事件类型、事件处理结果-绑定事件
        but.onclick=function(){
            //事件处理程序
            alert('lalalaal')
            console.log(this);//this指向调用者 因为点击了按钮所以调用了，所以this指向button
        }
</script>

4.2常见的鼠标事件

onmouseenter鼠标进入，onmouseleave鼠标离开

例：多节点添加点击事件

<!DOCTYPE html>
<html lang="en">
<head>   
    <title></title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        var btns=document.querySelectorAll('button')
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                console.log(this);//点谁this就指向谁
                alert('你好')
            }
        }
    </script>
</body>
</html>

4.3取消标签a的默认跳转行为

法一：return false

<!DOCTYPE html>
<html lang="en">
<head>   
    <title></title>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
    <script>
        var a=document.querySelector('a')
        a.onclick=function(){
            alert('别点我')
            return false
        }  
    </script>
</body>
</html>

法二：设置a标签的href属性值为：javascript:

<!DOCTYPE html>
<html lang="en">
<head>   
    <title></title>
</head>
<body>
    <a href="JavaScript:">百度</a>
    <script>
        var a=document.querySelector('a')
        a.onclick=function(){
            alert('别点我')
        }  
    </script>
</body>
</html>

4.4操作元素的属性

法一：

获取：元素.属性名
设置（添加、修改）：元素.属性名=值

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <style>
        div{
            height: 180px;
            width: 180px;
            background-color:pink;
        }
    </style>
</head>
<body>
    <div title='1111' class="a">
        
    </div>
    <script>
        var a = document.querySelector('div')
        a.onclick = function(){
        //添加属性
        a.title='ahh'//f12查看代码时div没有任何属性，
                    //但点击后会出现title属性，并且鼠标悬停时会出现标签名
        console.log(a.title);

        console.log(a.className);//特殊，写class是undefind,要写className
        //修改属性
        a.className='你说'
        }
    </script>
</body>
</html>

注意：在处理类名的时候不写class，要写className。

法二：

获取元素：getAttribute('属性','属性值'）
设置属性以及属性值：setAttribute('属性','属性值'）
删除属性：removeAttribute('属性')

<!DOCTYPE html>
<html lang="en">
<head>   
    <title></title>
</head>
<body>
    <input type="text">
    <button>按钮1</button>
    <button>按钮2</button>
    <button>删除</button>
    <script>
        var inp = document.querySelector('input')
        var but = document.querySelector('button')
        var but2 = document.querySelectorAll('button')[1]
        var but3 = document.querySelectorAll('button')[2]
        but.onclick = function () {
            //获取属性值
            // console.log(inp.getAttribute('type'));
            
            //(添加)设置属性及属性值 setAttribute() 
            inp.setAttribute('type','radio')
            inp.setAttribute('aaa', 'radio')//点击按钮，行内显示
            inp.aaa = 123//点击按钮，行内不显示
        }
        but2.onclick = function () {
            console.log(inp.aaa);//123
            console.log(inp.bbb);//获取不到
        }
        //删除
        but3.onclick = function(){
            inp.removeAttribute('bbb')
        }
    </script>
</body>
</html>

总结：

一、通过.添加获取属性

1.如果是语言规定好的属性,.添加,就会出现在行内,否则不会出现在行内

2.获取属性,如果是行内属性,可以直接获取,但是,行内属性如果是自定义的,就无法获取（undefind）

3.通过.最好操作内置属性(语言规定好的属性)

4.通过.添加自定义属性,可以通过.获取回来,但是不会出现在行内

二、通过 Attribute 添加获取属性

1.既可以添加内置属性,也可以添加自定义属性,都会出现在行内

2.获取:既可以获取内置属性,也可以获取自定义属性

3.无法获取通过.添加的自定义属性

*4.Attribute只能操作出现在行内的属性

4.5样式操作属性

可以通过JS来修改元素的大小、颜色、位置等样式。

4.5.1通过element.style更改元素样式

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <style>
        p{
            color: orangered;
        }
    </style>
</head>
<body>
    <p>
       兔兔兔兔
    </p>
    <button>
        按钮
    </button>
    <script>
        var but = document.querySelector('button')
        var p = document.querySelector('p')
        but.onclick = function(){
            p.style.color='red'
            p.style.fontSize='50px'
        }
    </script>
</body>
</html>

注意：利用element.style修改元素样式，只适用于修改的样式比较少或者比较简单的情况下使用，不然太麻烦了。

4.5.2通过className更改元素样式

语法规范：

在处理类名的时候不写class，要写className。

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
   <!-- className操作类名  -->
    <div id="box" class="a"></div>
    <script>
        var div = document.getElementById('box');
        // 获取类名
        console.log(div.class); // undefined
        console.log(div.className); // a 特殊,获取类名的时候不能写class,要写classname
        // 设置类名
        div.className = 'b';
    </script>
</body>
</html>

修改元素样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .black{
            background-color: black;
            height: 100px;
            width: 100px;
        }
        .pink{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="black"></div>
    <button>按钮</button>
    <script>
        var div=document.querySelector('div')
        var btn=document.querySelector('button')
        btn.onclick=function(){
            // div.className='pink'
            //如果想保留原先的类名，可以利用多类名选择器
            div.className='black pink'
        }
    </script>
</body>
</html>

注意：通过className修改元素样式，适用于样式较多或者功能较复杂的情况。

className会直接更改元素类名，会覆盖原先的类名（利用多类名选择器解决）。

4.6innerText和innerHTML的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
</head>
<body>
    <p>
        文字
        <span>1111</span>
    </p>
    <div class="a"></div>
    <div class="b"></div>
    <script> 
        //1.innerText不识别html标签 非标准 去除空格和换行
        var a=document.querySelector('.a')
        a.innerText='<strong>兔兔兔兔</strong>'
        //页面中直接显示<strong>兔兔兔兔</strong>

        // 2.innerHtml识别html标签  W3C标准 保留空格和换行 （大量使用innerHtml）
        var b=document.querySelector('.b')
        b.innerHTML='<strong>啦啦啦</strong>'
        //这两个属性是可读写的，可以获取元素里面的内容
        var p=document.querySelector('p')
        console.log(p.innerText);//文字 1111
        console.log(p.innerHTML);//<p>
                                 //     文字
                                 //     <span>1111</span>
                                 //</p>
    </script>
</body>
</html>