WebAPI

睡醒说 hi

已于 2023-02-15 13:56:36 修改

阅读量82

点赞数

分类专栏： apl 文章标签： javascript Powered by 金山文档

于 2023-02-15 12:46:12 首次发布

本文链接：https://blog.csdn.net/weixin_46082115/article/details/129040769

版权

apl 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.1API的概念

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。

简单点说就是 API 是为我们提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现

1.2DOM的概念

1.2.1dom的概念

文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。

W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

1.2.3DOM树

DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。

文档：一个页面就是一个文档，DOM中使用document表示

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

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示。

1.3获取元素

为什么要获取页面元素？

例如：我们想要操作页面上的某部分(显示/隐藏，动画)，需要先获取到该部分对应的元素，再对其进行操作。

1.3.1 根据ID获取

语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null

代码

<body>
    <div id="time">2019-9-9</div>
    <script>
        // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>

1.3.2根据标签名获取对象

语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名') 
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）

代码

<body>
    <ul>
        <li>你好</li>
        <li>你好呀</li>
        <li>你好呀，前端</li>
    </ul>
    <ul id="nav">
        <li>爱编程</li>
        <li>爱编程</li>
    </ul>
    <script>
        // 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        // 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for (var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
        // 3. element.getElementsByTagName()  可以得到这个元素里面的某些标签
        var nav = document.getElementById('nav'); // 这个获得nav 元素
        var navLis = nav.getElementsByTagName('li');
        console.log(navLis);
    </script>
</body>

1.3.3获取特殊元素（body,html)

获取body元素

    <script>
        var bodyEle = document.body;
        console.log(bodyEle);// 结果:获取body中的所有元素
    </script>

获取html元素

    <script>
        var htmlEle = document.documentElement;
        console.log(htmlEle);// 结果:获取html中的所有元素
    </script>

睡醒说 hi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
WebAPI

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。简单点说就是 API 是为我们提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现。
复制链接

扫一扫