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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。