DOM（一）

最新推荐文章于 2023-04-23 16:59:36 发布

檬是柠檬的檬826

最新推荐文章于 2023-04-23 16:59:36 发布

阅读量151

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_62343228/article/details/123153771

版权

这篇博客介绍了Web API和DOM的基础知识，包括DOM的概念和DOM树，详细讲解了如何通过JavaScript获取和操作HTML元素，如根据ID、标签、名称、类获取元素，以及HTML5的querySelector()和querySelectorAll()方法。此外，还涵盖了事件基础和如何改变元素的内容、属性及样式。

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

Web API简介

1.初识Web API

Web API是浏览器提供的一套操作浏览器功能和页面元素的接口。JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript语言的核心，而Web API包括BOM和DOM两部分。
在这里插入图片描述

2. Web API与API的关系

（1）API

API：应用程序编程接口，是一些预先定义的函数，这些函数是由某个软件开放给开发人员使用的，帮助开发者实现某种功能，开发人员无须访问源码、无须理解其内部工作机制细节，只需知道如何使用即可。例如，调起手机的摄像头拍摄画面。

（2）Web API

Web API：主要针对浏览器的API，在JavaScript语言中被封装成了对象，通过调用对象的属性和方法就可以使用Web API。例如，console对象、document对象、window对象。

document.title = '设置新标题';	           // 设置页面标题
console.log(document.title);	           // 获取页面标题
document.write('<h1>网页内容</h1>');     // 将字符串写入页面

DOM简介

1.什么是DOM

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

W3C定义了一系列的DOM接口，利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。

2. DOM树

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

在这里插入图片描述

接下来针对DOM中各节点的专有名词解释如下：

文档（document）：可以把一个页面当成一个文档
元素（element）：页面中的所有标签都是元素
节点（node）：网页中的所有内容，在文档树中都是节点（如：元素节点、属性节点、文本节点、注释节点等），在DOM中会把所有的节点都看作是对象，这些对象拥有自己的属性和方法

获取元素

1.根据id获取元素

document.getElementById(‘id’)方法，是由document对象提供的用于查找元素的方法，该方法返回的是拥有指定id的元素，如果没有找到指定id的元素则返回null，如果存在多个指定id的元素则返回undefined。

<body>
    <div id="box"></div>
    <script>
        var d = document.getElementById("box")
        console.log(d);
    </script>
</body>

2.根据标签获取元素

根据标签名获取元素的两种方式：可以通过document对象获取元素和通过element对象获取元素。

document.getElementsByTagName('标签名');
element.getElementsByTagName('标签名');

由于相同标签名的元素可能有多个，上述方法返回的不是单个元素对象，而是一个集合。这个集合是一个类数组对象，或称为伪数组，它可以像数组一样用索引来访问元素，但不能使用push()等方法，使用Array.isArray()也可以证明它不是一个数组。

<body>
    <div id="box"></div>
    <script>
        var d = document.getElementsByTagName("div");
        console.log(d);
        console.log(Array.isArray(d));    //结果为false
    <