Web APIs(1)

时间 2020-08-17

标签 web apis 栏目 HTML 繁體版

原文原文链接

JS的组成

Web APIs与javascript基础的区别

Web APIs是js基础的应用，大量使用js基础作页面交互效果

API 与 Web AIP的区别

API是提供给程序员的一种工具，以便更好的完成想要实现的功能。(充电接口)
Web API是浏览器提供的一套操做浏览器功能与页面元素的API(DOM与BOM)

API 与 Web API的总结

API是为程序员提供的一个接口，帮助咱们实现某种功能，会用便可。
Web AIP 主要是针对于浏览器提供的接口，主要针对浏览器作交互效果
Web API通常都有输入和输出（函数的传参与返回值） Web ApI不少都是方法

DOM

DOM:文档对象模型，提供访问与操做网页内容的接口与方法。经过DOM，能够改变网页的结构与外观与样式

DOM树

一个页面就是一个文档，DOM中用document表示
页面中全部的元素被称为标签，DOM中用element表示
网页中全部的内容都是节点（标签属性文本注释），DOM中使用node 表示

以上内容均可以看做对象javascript

获取元素

经过id名获取

经过getElementById(id)获取

注意事项html

返回元素对象
参数是一个大小写敏感的字符串
页面加载是从上往下加载的，因此script元素写在内容之下
console.dir（）能够打印返回的元素对象，更好的查看元素对象的属性与方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box">hello </div>
    <script>
        var box = document.getElementById('box');
        console.log(box) //打印元素对象
        console.log(typeof box) //查看元素对象类型
        console.dir(box)
    </script>
</body>

</html>

根据标签名获取元素

根据getElementsByTagName('标签名')获取
注意事项

参数为一个大小写敏感的字符串
返回值是一个元素对象集合，以伪数组的方式进行存储
能够经过遍历获取每个元素对象
获取到的元素对象是动态的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>WEB前段自学者</li>
        <li>WEB前段自学者</li>
        <li>WEB前段自学者</li>
        <li>WEB前段自学者</li>
        <li>WEB前段自学者</li>
        <li>WEB前段自学者</li>
    </ul>

    <script>
        var lis = document.getElementsByTagName('li'); // 经过标签名来获取元素
        console.log(lis) //打印元素对象


        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]) //经过遍历获取每个元素对象
        }
    </script>
</body>

</html>

如何获取某个元素里面的标签呢

思路前端

能够先获取元素的id
再经过id名获取标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 要求：获取第二个ul里面的li标签 -->
    <ul>
        <li>WEB前端</li>
        <li>WEB前端</li>
        <li>WEB前端</li>
        <li>WEB前端</li>
        <li>WEB前端</li>
        <li>WEB前端</li>
    </ul>


    <ul id="uls">
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>

    <script>
        var uls = document.getElementById('uls');
        var lis = uls.getElementsByTagName('li');
        console.log(lis)
    </script>
</body>

</html>

根据类名获取元素(html5新增方法）

getElementsByClassName('类名')

注意事项html5

参数为一个大小写敏感的字符串
返回值为元素对象集合
具备兼容性，是html5新增的方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <script>
        var boxs = document.getElementsByClassName('box');
        console.log(boxs)
    </script>
</body>

</html>

经过querySelector('选择器')来获取元素

注意事项java

获取的是指定选择器的第一个元素对象
参数里面选择器必需要加符号

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="boxs">盒子1</div>
    <div class="boxs">盒子2</div>

    <script>
        var boxs = document.querySelector('.boxs');
        console.log(boxs) //获取的是指定选择器的第一个元素对象
    </script>
</body>

</html>

经过经过querySelectorAll('选择器')来获取元素

注意事项node

返回值为指定选择器的全部元素对象集合
参数里面的选择器必需要加符号。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="box">
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
    </ul>
    <script>
        var boxs = document.querySelectorAll('.box');
        console.log(boxs);
        var lis = document.querySelectorAll('li');
        console.log(lis)
    </script>
</body>

</html>

获取特殊元素（html body）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var body = document.body;
        console.log(body)
        console.dir(body)

        var html = document.documentElement;
        console.log(html)
        console.dir(html)
    </script>
</body>

</html>