webAPI基础

最新推荐文章于 2024-08-15 09:17:35 发布

嘿！呆桃日记～

最新推荐文章于 2024-08-15 09:17:35 发布

阅读量5.8k

点赞数 1

文章标签： p2p linq gnu

本文链接：https://blog.csdn.net/m0_53456432/article/details/123375872

版权

本文介绍了webAPI的基础知识，包括API和webAPI的概念，以及webAPI的输入输出特性。接着详细讲解了DOM，阐述了DOM的概念和DOM树，并介绍了如何通过DOM获取和操作页面元素，如根据ID、标签名、类名和name获取元素，以及querySelector和querySelectorAll的使用。此外，还涵盖了事件基础，包括事件三要素和常见鼠标事件，以及如何取消a标签的默认跳转行为。

摘要由CSDN通过智能技术生成

一、关于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，因为获取的是整