JS-DOM树和DOM对象

news2024/11/17 11:56:20

作用和分类

作用:就是使用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.coloradmin.cn/o/1377406.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Laravel 框架中队列的使用

概述 Laravel 框架内置了强大的队列系统,用于处理异步任务、提高系统性能等。队列可以让任务异步执行,而不会阻塞当前进程,可以提高系统的处理能力。 Laravel 的队列系统支持多种驱动,如 Redis、Beanstalkd、SQS 等,…

静态代理IP是如何助力跨境电商运营的?我的跨境电商发展史

跨境电商这几年的火爆程度已经不需要我多说什么了,我自己与跨境电商结缘还是无意之间在某乎上看了那种所谓的“0基础小白如何在家做跨境电商,副业月入XX,附选品指南!”。 我不知道你们刷到过这种类似的帖子没有,当时…

InternLM第3节课笔记

基于 InternLM 和 LangChain 搭建你的知识库 1 大模型开发范式 LLM局限性:时效性、专业能力有限、定制化成本高 RAG(检索、增强、生成) 外挂知识库 微调 2 LangChain简介 LangChain 核心组成模块 Chains:组件组合实现端到…

MATLAB--pie函数绘制分类饼图(1)--附案例代码

MATLAB–pie函数绘制分类饼图(1) 目录 MATLAB--pie函数绘制分类饼图(1)摘要1. pie函数概述2. 使用pie函数绘制分类图的步骤步骤1:准备数据步骤2:调用pie函数步骤3:定制图形(可选&…

杭州中科微 BDS/GNSS 全星座定位导航模块 ATGM332D-5N31使用笔记

一、BDS/GNSS 全星座定位导航模块 ATGM332D-5N31 介绍 ATGM332D-5N 系列模块是 12X16 尺寸的高性能 BDS/GNSS 全星座定位导航模块系列的总称。该系列模块产品都是基于中科微第四代低功耗 GNSS SOC 单芯片—AT6558,支持多种卫星导航系统,包括中国的 BDS&a…

LeetCode+ 56 - 60

合并区间 双指针算法、位运算、离散化、区间合并_小雪菜本菜的博客-CSDN博客 class Solution { public:vector<vector<int>> merge(vector<vector<int>>& a) {vector<vector<int>> res;if(a.empty()) return res;sort(a.begin(),a.en…

数据结构二叉树创建及例题(上)

今天就带领大家来到树的世界,树无论是在考试上还是实际学习方面都是比较重点的,大家在这块知识要花时间搞懂. 文章目录 前言 一、树的二叉链表定义 二、二叉树三种遍历方式(递归方式) 1.先序遍历方式(根左右) 2.中序遍历方式(左根右) 3.后序遍历方式(左右根) 三、二叉树的…

智能小程序小部件(Widget)开发详解

Widget 代表应用的一个小部件&#xff0c;负责小部件的展示和交互。 小部件(Widget) 的开发在智能小程序的基础上增加一个目录即可&#xff0c;用于存放小部件(Widget)的代码。并在 project.tuya.json 中增加一个声明。 创建小部件(Widget)项目 在 Tuya MiniApp Tools 中&…

强化学习应用(一):基于Q-learning的无人机物流路径规划研究(提供Python代码)

一、Q-learning简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个价值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是通过不断更新一个称为Q值的…

在windows11系统上利用docker搭建linux记录

我的windows11系统上&#xff0c;之前已经安装好了window版本的docker&#xff0c;没有安装的小伙伴需要去安装一下。 下面直接记录安装linux的步骤&#xff1a; 一、创建linux容器 1、拉取镜像 docker pull ubuntu 2、查看镜像 docker images 3、创建容器 docker run --…

Ubuntu 22.04 编译安装 Qt mysql驱动

参考自 Ubuntu20.04.3 QT5.15.2 MySQL驱动编译 Ubuntu 18.04 编译安装 Qt mysql驱动 下边这篇博客不是主要参考的, 但是似乎解决了我的难题(找不到 libmysqlclient.so) ubuntu18.04.2 LTS 系统关于Qt5.12.3 无法加载mysql驱动&#xff0c;需要重新编译MYSQL数据库驱动的问题以…

代码随想录算法训练营第六天|哈希表理论基础,242.有效的字母异位词,349. 两个数组的交集,202. 快乐数,1. 两数之和

刷题建议 刷题建议与debug 代码随想录目前基本都有了视频讲解&#xff0c;一定要先看视频&#xff0c;事半功倍。写博客&#xff0c;将自己的感悟沉淀下来&#xff0c;不然会忘大家提问的时候&#xff0c;记得要把问题描述清楚&#xff0c;自己在哪一步遇到了问题&#xff0c…

虚幻UE 材质-材质图层、材质图层混合

学习材质图层和材质图层混合的使用&#xff0c;便于节点扫盲。 文章目录 前言一、材质图层混合二、使用步骤总结 前言 材质混合我们之前用Bridge的插件进行混合过 而此次我们的材质混合使用UE自带的材质图层和材质图层混合来实现 一、材质图层混合 材质图层混合是一种允许将…

数据结构初阶之插入排序与希尔排序详解

个人主页&#xff1a;点我进入主页 专栏分类&#xff1a;C语言初阶 C语言程序设计————KTV C语言小游戏 C语言进阶 C语言刷题 数据结构初阶 Linux 欢迎大家点赞&#xff0c;评论&#xff0c;收藏。 一起努力,共赴大厂。 目录 一.前言 二.插入排序 …

jmeter分布式服务搭建

目录 一、环境准备 二、 安装包下载 三 、安装jdk 四 、控制机安装 4.1 解压压缩包 4.2 修改 bin/jmeter.properties 4.3 修改 bin/system.properties 五、执行机安装 5.1 解压安装包 5.2 修改 bin/jmeter.properties 5.3 修改 bin/system.properties 5.4 启动执行机 …

常见的AdX程序化广告交易模式有哪些?媒体如何选择恰当的交易模式?

程序化广告的核心目的是&#xff1a;让需求方能自由地选择流量与出价&#xff0c;程序化广告在数字广告投放中的主导地位日益巩固。 程序化广告“交易模式”有哪些&#xff1f;以下是详细解读&#xff0c;帮助媒体选择恰当的交易方式&#xff0c;从而实现广告价值的最大化。 …

python netCDF4

NetCDF简介 NetCDF 即 network Common Data Form&#xff08;网络通用数据格式&#xff09;&#xff0c;是一种面向数组型并适于网络共享的数据的描述和编码标准。文件的后缀是 .nc。nc 在气象领域应用很广&#xff0c;因为它可以存储不同波段的长时间观测结果。 NetCDF 文件…

全志V853 NPU开发之工具安装

V853支持最高1T NPU算力&#xff0c;在进行NPU相关开发前&#xff0c;需要先配置NPU开发环境。 Linux系统准备 NPU开发环境依赖于Linux系统&#xff0c;需要先准备 Linux 开发环境。 经测试NPU 工具支持下列 Linux 发行版&#xff1a; Ubuntu 20.04 其他部分 Linux 发行版…

基于python的室内老人实时摔倒智能监测系统(康复训练检测+代码)

概述 导入所需的库&#xff0c;包括cv2、和numpy。 定义了一个用于计算角度的函数calculate_angle(a, b, c)&#xff0c;其中a、b和c是三个关键点的坐标。 初始化姿态检测和绘图工具。 打开并读取视频文件。 -摔倒检测&#xff08;fallen&#xff09; 循环遍历视频的每一帧…

用友BI方案是干嘛的?能起到什么作用?

用友BI是一套用于无缝对接用友系统&#xff0c;让BI从用友系统中直接取数、分析&#xff0c;完成对企业数据的全面剖析&#xff0c;并为决策提供必不可少的支持的标准化方案。 为什么会有用友BI方案&#xff1f; 因为用友ERP和BI&#xff08;商业智能&#xff09;系统虽然都是…