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对象集合

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

横版动作闯关游戏:幽灵之歌 GHOST SONG 中文版

在洛里安荒凉的卫星上,一件长期休眠的死亡服从沉睡中醒来。踏上发现自我、古老谜团和宇宙骇物的氛围2D冒险之旅。探索蜿蜒的洞穴,获得新的能力来揭开这个外星世界埋藏已久的秘密。 游戏特点 发现地下之物 探索这个广阔而美丽如画,充满密室和诡…

【算法笔记】状态压缩dp(noip)

在acwing学习算法的一点思考和总结 状态压缩dp可以用来解决两种问题:一种是棋盘式的,也就是表示一行有2^N种摆法,另一种是表示一类集合 状压——棋盘式 思路:可以类比一下蒙德里安的梦想的解题过程,每一行的状态都只会…

数据库悲观锁 select for update的详解

一 作用 1.1 结论 在mysql中,select ... for update 仅适用于InnoDB,且必须在事务块中才能生效。Innodb引擎默认是行锁。 Select .... from where .... for update 如果在where的查询条件字段使用了【主键|索引】,则此命令上行锁。否…

“Frontiers”系列多本期刊分区下跌,1本SCI被踢,2本SCI升为Top,还可投吗?

近期,2023年中科院分区正式发布,不少学者都很关心期刊变动情况。此次分区更新中,Frontiers出版社旗下的医学期刊表现让人大跌眼镜。 据汇总来看,32本大类医学SCI期刊中,Frontiers of Hormone Research直接从原来的医学…

C语言操作符详解与进制

目录 一:操作符的分类 二:二进制和进制转换 2.1 2进制转10进制 2.1.1 10进制转2进制数字 2.2 2进制转8进制和16进制 2.2.1 2进制转8进制 2.2.2 2进制转16进制 三: 原码、反码、补码 四:移位操作符 4.1左移操作符 4.2 右…

AOT-GAN-for-Inpainting项目解读|使用AOT-GAN进行图像修复

项目地址: https://github.com/researchmm/AOT-GAN-for-Inpainting 基于pytorch实现 论文地址: https://arxiv.org/abs/2104.01431 开源时间: 2021年 项目简介: AOT-GAN-for-Inpainting是一个开源的图像修复项目,其对 …

c++学习笔记-STL案例-机房预约系统3-登录模块

前言 衔接上一篇“c学习笔记-STL案例-机房预约系统2-创建身份类”,本文主要设计登录模块,建立globalFile.h头文件定义使用的文件名字符串,登录函数封装,并对学生登录、老师登录、管理员登录进行了具体实现。 目录 6 登录模块 6…

外卖骑手与行人之间的非零和博弈

一、背景 自2013年成立以来,美团外卖一直保持着高速增长,通过提供便捷、高效的外卖服务,满足了大量消费者的需求。美团外卖的服务不仅限于基础的送餐服务,还涵盖了多种生活服务,如超市便利、药品配送等,满…

记录汇川:H5U与Fctory IO测试10

主程序: 子程序: IO映射 子程序: 自动程序 Fctory IO配置: HMI配置: 实际动作如下: Fctory IO测试10

档案数字化怎样快速整理资料

对于机构和组织来说,档案数字化是一个重要的信息管理和保护措施。要快速整理资料进行档案数字化,可以遵循以下步骤: 1. 准备工具和设备:确保有一台计算机、扫描仪和相关软件。 2. 分类和组织资料:先将资料分类&#xf…

一文解析Web缓存代理

Web缓存代理在现代网络架构中起着非常重要的作用,它可以减少网络传输延迟,提高网站的性能和用户体验。本文将深入解析Web缓存代理的原理、工作方式以及优势,帮助读者更好地理解和应用这一技术。 在Web应用中,数据的快速传输是至关…

[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-5稳定性stability-李雅普诺夫Lyapunov

本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记-Advanced控制理论 Ch04-5稳定性stability-李雅普诺夫Lyapunov Stability in the sense of Lyapunov Assympototic Stability

关于白盒测试,这些技巧你得游刃有余~

对于很多刚开始学习软件测试的小伙伴来说,如果能尽早将黑盒、白盒测试弄明白,掌握两种测试的结论和基本原理,将对自己后期的学习有较好的帮助。今天,我们就来聊聊黑盒、白盒测试的相关话题。 1、黑盒测试的方法和小结 最常见黑盒…

Elasticsearch倒排索引详解

倒排索引: 组成 term index(词项索引 ,存放前后缀指针) Term Dictionary(词项字典,所有词项经过文档与处理后按照字典顺序组成的一个字典(相关度)) Posting List(倒排表&#xf…

Asp .Net Core 系列: 集成 Consul 实现 服务注册与健康检查

文章目录 什么是 Consul?安装和运行 ConsulAsp .Net Core 如何集成 Consul 实现服务注册和健康检查Consul.AspNetCore 中的 AddConsul 和 AddConsulServiceRegistration 方法 究竟做了什么?AddConsul 方法AddConsulServiceRegistration 方法 配置 Consul 检查服务封…

16 张动图讲透网络原理

网络其实存在于日常生活中的每一个角落。 你的电脑,打印机,手机,甚至电视等等都属于网络设备。通常,你需要将这些设备通过网络连接起来,这样就可以实现数据的传输和共享,让工作生活更加便捷。 如果你的连接…

云服务器哪家强?当属阿里云腾讯云or华为云?

云服务器哪家强?当属阿里云腾讯云or华为云?云服务器哪家便宜?2024最新整理你要的都在这!头部云厂商阿里云、腾讯云、华为云、京东云、UCloud等都在降价,阿腾云atengyun.com分享2024年云服务器租用价格给你惊喜! 便宜云…

乱 弹 篇(一)

题记 对于“乱弹”这个词汇的释义,《辞海》上仅有“ 戏曲剧种,亦指声腔 ”8个字。而由于“乱弹 ”的“ 弹”谐音“谈”,这就容易让人联想到“乱谈”。不过从文体上看,“乱谈”也非乱七八糟之谈,反倒是“东西南北&…

系分笔记数据库反规范化、SQL语句和大数据

文章目录 1、概要2、反规范化3、大数据4、SQL语句5、总结 1、概要 数据库设计是考试重点,常考和必考内容,本篇主要记录了知识点:反规范化、SQL语句及大数据。 2、反规范化 数据库遵循范式的设计,使得多表查询和连接表查询较多的时…

Tomcat简介及搭建

1、Tomcat概述 自2017年11月编程语言排行榜 Java 占比 13%,高居榜首,Tomcat也一度成为Java开发人员的首选。其开源、占用系统资源少、跨平台等特性深受广大程序员喜爱。本篇文章主要讲解如何部署 Tomcat 服务,根据生产环境实现多个虚拟主机的…