JS-DOM树和DOM对象

作用和分类

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

分类:DOM(文档对象模型)、BOM(浏览器对象模型)

什么是DOM

DOM(Document Object Model--文档对象模型)是用来呈现以及与任意HTML或XML文档交互的API

白话文:DOM是浏览器提供的一套专门用来操作网页内容的功能

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

DOM树

定义:将HTML文档以树状结构直观的表现出来,我们称之为文档树或DOM树,描述网页内容关系的名词

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

DOM对象(重要)

DOM对象

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

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

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

console.dir()//打印对象,获取的信息比较清晰

DOM的核心思想

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

document对象

1)是DOM里提供的一个对象

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

3)网页所有内容都在document里面

获取DOM元素

根据css选择器来获取DOM元素(重点)

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

document.querySelector('css选择器')

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

返回值:css选择器匹配的第一个元素,一个HTMLElement对象;如果没有匹配到,则返回null

可以直接操作修改

2.选择匹配的全部元素

document.querySelectorAll('css选择器')

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

返回值:css选择器匹配的NodeList对象集合

不能直接修改,只能通过遍历的方式一次给里面的元素做修改

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/342999.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python商业数据挖掘实战——爬取网页并将其转为Markdown

前言 「作者主页」:雪碧有白泡泡 「个人网站」:雪碧的个人网站 ChatGPT体验地址 文章目录 前言前言正则表达式进行转换送书活动 前言 在信息爆炸的时代,互联网上的海量文字信息如同无尽的沙滩。然而,其中真正有价值的信息往往埋…

在 The Sandbox 见证元宇宙新地标:Playboy 推出 MetaMansion 特别预览

元宇宙诞生了新地标!The Sandbox 联手 Playboy推出 MetaMansion,重新演绎了传说级别的现实版 Playboy Mansion,你可以在 The Sandbox 中一睹它的风采。 今天,Playboy 公布了 MetaMansion 的首次预览,用虚拟方式呈现了 …

Postgresql常见(花式)操作完全示例

案例说明 将Excel数据导入Postgresql,并实现常见统计(数据示例如下) 导入Excel数据到数据库 使用Navicat工具连接数据库,使用导入功能可直接导入,此处不做过多介绍,详细操作请看下图: 点击“下…

直播带货2024:洗牌、阵痛和暗流涌动

文 | 螳螂观察 作者 | 青月 一天前,大学生齐夏根本不会在直播间购买《额尔古纳河右岸》这种书籍。 她是喜欢看小说,但只钟爱悬疑无限流题材,至于《额尔古纳河右岸》这种讲述一个弱小民族顽强的抗争和优美的爱情的长篇小说,用齐…

训练营第四十二天 | 01背包问题,你该了解这些! ● 01背包问题,你该了解这些! 滚动数组 ● 416. 分割等和子集

01背包问题 二维 代码随想录 dp二维数组 优化 01背包问题 一维 代码随想录 dp一维数组 416. 分割等和子集 把数组分成总和相等的两份,如果数组总和为奇数,不能分割,若有符合的数组子集,返回true 代码随想录 class Solution {p…

Nginx服务配置文件

在Nginx服务器的主配置文件/usr/local/nginx/conf/nginx.conf 中,包括全局配置、I/O事件配置 和HTTP配置这三大块内容,配置语句的格式为“关键字 值:”(末尾以分号表示结束),以“#” 开始的部分表示注释。 …

Swoft - Bean

一、Bean 在 Swoft 中,一个 Bean 就是一个类的一个对象实例。 它(Bean)是通过容器来存放和管理整个生命周期的。 最直观的感受就是省去了频繁new的过程,节省了资源的开销。 二、Bean的使用 1、创建Bean 在【gateway/app/Http/Controller】下新建一个名为…

springIoc依赖注入循环依赖三级缓存

springIoc的理解,原理和实现 控制反转: 理论思想,原来的对象是由使用者来进行控制,有了spring之后,可以把整个对象交给spring来帮我们进行管理 依赖注入DI: 依赖注入,把对应的属性的值注入到…

生成式AI,发展可持续吗?

最近有消息透露,OpenAI预计在2024年实现16亿美元的年化收入。相较于去年10月预测的13亿美元,这一数字增长了3亿美元,增长部分主要来源于ChatGPT订阅、API接入以及其他业务。 与此同时,其竞争对手Anthropic预计年化收入至少为8.5亿…

代码随想录算法训练营第三天 | 203.移除链表元素、707.设计链表、206.反转链表

代码随想录算法训练营第三天 | 203.移除链表元素、707.设计链表、206.反转链表 文章目录 代码随想录算法训练营第三天 | 203.移除链表元素、707.设计链表、206.反转链表1 链表理论基础1.1 链表的定义1.2 链表的类型1.3 链表的存储方式1.4 链表的操作性能分析1.5 链表和数组的区…

结队编程 - 华为OD统一考试

OD统一考试 题解: Java / Python / C++ 题目描述 某部门计划通过结队编程来进行项目开发,已知该部门有 N 名员工,每个员工有独一无二的职级,每三个员工形成一个小组进行结队编程,结队分组规则如下: 从部门中选出序号分别为 i、j、k 的3名员工,他们的职级分别为 level[…

JavaScript保留字和预定义的全局变量及函数汇总

保留字也称关键字,每种语言中都有该语言本身规定的一些关键字,这些关键字都是该语言的语法实现基础,JavaScript中规定了一些标识符作为现行版本的关键字或者将来版本中可能会用到的关键字,所以当我们定义标识符时就不能使用这些关…