Web API基本认识（1）

最新推荐文章于 2024-08-11 18:40:36 发布

biub_

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量31

点赞数 2

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/biub_/article/details/134230472

版权

1.作用和分类

作用：使用JS去操作html和浏览器

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

2.DOM（Document Object Model）

用来呈现以及任意HTML或XML文档交互的API

------浏览器提供专门用来操作网页内容的功能

3.DOM树

将HTML文档以树状的结构直观的表现出来，也称文档树
描述网页内容关系的名词
作用：文档树直观的体现了标签与标签之间的关系

4.DOM对象

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

所有标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

<body>
    <div>123</div>    //标签
    <script>
        const div = document.querSelector('div')

        //dir打印对象
        console.dir(div)
            //div虽然在html里面是标签，但通过JS获取在DOM树中是对象
    </script>
</body>

核心思想：把网页内容当作对象来处理
document对象

是DOM里提供的一个对象

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

例：document.write()

网页所有内容都在document里面

5.获取DOM对象

通过CSS选择器获取DOM元素

5.1选择匹配的第一个元素

语法：

document.querSelector('css选择器')

参数：

包含一个或多个有效的CSS选择器字符串

返回值：

CSS选择器匹配的第一个元素，是对象

注：只能选择一个元素，可以直接操作

5.2选择匹配多个元素

语法：

document.querySelectorALL('css选择器')

参数：

包含一个或多个有效的css选择器字符串

返回值：

CSS选择器匹配的NodeList 对象集合

例如：

document.querySelectorAll('ul li')

注：可以选择多个对象，得到伪数组，需要遍历得到每一个元素

biub_

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web API基本认识（1）

-----浏览器提供专门用来操作网页内容的功能。注：可以选择多个对象，得到伪数组，需要遍历得到每一个元素。CSS选择器匹配的NodeList 对象集合。分类：DOM（文档对象模型）、BOM（浏览器对象模型）包含一个或多个有效的CSS选择器。包含一个或多个有效的css选择器。CSS选择器匹配的第一个元素，是对象。文档树直观的体现了标签与标签之间的关系。他提供的属性和方法都是。是DOM里提供的一个。定义：浏览器根据html标签生成的。5.1选择匹配的第一个元素。注：只能选择一个元素，可以直接操作。
复制链接

扫一扫