WEB APIs-----基本认知及如何获取DOM对象

1.1作用和分类

作用:就是使用js去操作html和浏览器

分类：DOM（文档对象模型），BOM（浏览器对象模型）

 

1.2 什么是DOM

DOM是用来呈现以及与任意html或XML文档交互的API

解释：DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用

开发网页内容特效和实现用户交互

例如：

 

1.3 DOM树

DOM树是什么

将htm文档以树状结构直观的表现出来，我们称之为文档树或DOM树

如下图：

 

描述网页内容关系的名词

作用: 文档树直观的体现了标签与标签之间的关系

1.4 DOM对象（重要）

DOM对象：浏览器根据html标签生成的JS对象

修改这个对象的属性会自动映射到标签身上

在html获取过来的标签在JS里是对象形式存在的

所有的标签属性都可以在这个对象上面找到

DOM的核心思想

把网页内容当作对象来处理

doncument对象

是DOM里提供的一个对象

所以它提供的属性和方法都是用来访问和操作网页内容的

例如;

document.write()

网页所有内容 都在document里面

获取DOM对象

查找，获取DOM对象

我们想要操作某个标签首先肯定需要选中这个标签，跟CSS选择器类似，选中标签才能操作

查找DOM元素就是利用JS选择页面中的标签元素

2.1 根据css选择器来获取DOM元素（重点）

1.选择匹配的第一个元素

语法：

 

注意：这个只选中第一个匹配的元素

括号内记得加引号

最后注意：

1.选取DOM元素返回值是一个包含标签所有内容的一个

对象!

2.该选择对象选择的是符合条件的第一个对象，意思是只选择一个

2.选择匹配的多个元素

 

通过css选择器选择到多个元素之后返回的是一个对象为元素组成的伪数组：

有长度有索引号的数组

但是不能增删查改元素

可以通过遍历的方式修改每一个对象

注意：
哪怕只有一个元素，通过querySelectAll（）获取过来的也是一个伪数组，内部元素只有一个而已，数组长度为1而已

2.2 其他获取DOM元素的方式（了解）