当前位置： 首页 > news >正文

JavaScript DOM使用

news 2026/4/2 12:52:54

        DOM Document Object Model

        简单而言，就是JavaScript将HTML文档的各个组成部分封装为对象。

        封装的对象分别为：

        Document：整个HTML的文档对象

        Element：元素对象（也就是HTML中的标签）

        Attribute：属性对象（HTML标签中的属性）

        Text：文本对象（标签中的文本）

        Comment：注释对象

         js获得了HTML中各个组成部分的对象，就可以添加和删除HTML元素、改变HTML元素的内容、样式和对HTML DOM事件做出反应。

        DOM核心思想：将网页的所有内容当作对象进行处理，标签的所有属性在该对象上都可以找到，并且修改这个对象的属性，就会自动映射到对应标签上。

        document对象

        网页中所有内容都封装在document对象中

        document对象提供的属性和方法都是用来访问和操作网页内容的，如：document.write()

        DOM操作步骤：

        1.获取DOM元素对象

        2.操作DOM对象的属性或方法

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScriptDOM使用</title>
</head>
<body><h1>我是用于测试JavaScriptDOM的h1</h1><h1>我是用于测试JavaScriptDOM的h1 2.0</h1><h2>我是用于测试JavaScriptDOM的h2</h2><script>// JS DOM// DOM：Document Object Model 文档对象模型。也就是JavaScript将HTML文档的各个组成部分封装为对象// 封装的对象分别为：// Document：整个HTML的文档对象// Element：元素对象（也就是HTML中的标签）// Attribute：属性对象（HTML标签中的属性）// Text：文本对象（标签中的文本）// Comment：注释对象// js获得了HTML中各个组成部分的对象，就可以添加和删除HTML元素、改变HTML元素的内容、样式和对HTML DOM事件做出反应// DOM核心思想：将网页的所有内容当作对象进行处理，标签的所有属性在该对象上都可以找到，// 并且修改这个对象的属性，就会自动映射到对应标签上// document对象// 网页中所有内容都封装在document对象中// document对象提供的属性和方法都是用来访问和操作网页内容的，如：document.write()// DOM操作步骤：// 1.获取DOM元素对象// 2.操作DOM对象的属性或方法// 如何获取DOM元素// 1.通过CSS的选择器获取：document.querySelector('CSS选择器'); 获取选择器匹配到的第一个元素// 2.通过CSS的选择器获取：document.querySelectAll('CSS选择器'); 获取选择器匹配到的所有元素// 获取到的所有元素，会封装到一个NodeList对象中返回，NodeList就相当于一个伪数组（有长度、索引的数组；但是不完全是数组）// 测试// HTML中有两个h1标签，通过querySelector('h1')只能获取匹配到的第一个h1let hs = document.querySelector('h1');hs.innerHTML = "我是h1，我将被修改";// 通过querySelector('h1')可以获得所有匹配的h1，存储到了NodeList中let allHs = document.querySelectorAll('h1');allHs[0].innerHTML = '我是第一个h1，我将被修改';allHs[1].innerHTML = '我是第二个h1，我将被修改';</script></body>
</html>

相关文章：

JavaScript DOM使用

DOM Document Object Model 简单而言&#xff0c;就是JavaScript将HTML文档的各个组成部分封装为对象。 封装的对象分别为&#xff1a; Document&#xff1a;整个HTML的文档对象 Element&#xff1a;元素对象&#xff08;也就是HTML中的标签&#xff09; Attribute&#xff1a;…...

编程日记 2024/11/23 21:39:04

人工智能|计算机视觉——微表情识别（Micro expression recognition）的研究现状

一、简述 微表情是一种特殊的面部表情，与普通的表情相比，微表情主要有以下特点： 持续时间短，通常只有1/25s~1/3s；动作强度低，难以察觉；在无意识状态下产生，通常难以掩饰或伪装；对微表情的分析通常需要在视频中，而普通表情在图像中就可以分析。由于微表情在无意识状态…...

编程日记 2024/11/23 21:35:59

耿恭坚守城池的方法

疏勒城之战中&#xff0c;耿恭坚守城池的方法主要有以下几点&#xff1a; 选择有利地势&#xff1a;耿恭深知疏勒城依山傍水、地势险要&#xff0c;易守难攻&#xff0c;于是果断放弃金满城&#xff0c;移师至疏勒城据守&#xff0c;为长期坚守创造了良好的地理条件.运用心理战…...

编程日记 2024/11/23 21:34:57

小兔鲜项目总结——项目亮点

目录 1、基于业务的逻辑组件拆分思想2、长页面吸顶交互的实现3、自定义图片懒加载指令并封装为插件4、画板插槽组件等业务通用组件封装5、通用逻辑函数的封装6、列表无限加载7、路由缓存问题的处理 小兔鲜项目其实在暑假之前就已经做完了&#xff0c;但是一直没有空做总结&…...

编程日记 2024/11/23 21:31:52

Cesium的ClearCommand的流程

ClearCommand是在每帧渲染前可以将显存的一些状态置为初始值&#xff0c;就如同把擦黑板。当然也包括在绘制过程中擦掉部分的数据&#xff0c;就如同画家在开始绘制的时候会画导览线&#xff08;如透视线&#xff09;&#xff0c;轮廓出来后这些导览线就会被擦除。 我画了一个…...

编程日记 2024/11/23 21:28:49

Fakelocation Server服务器/专业版 ubuntu

前言:需要Ubuntu系统 Fakelocation开源文件系统需求 Ubuntu | Fakelocation | 任务一 任务一 更新Ubuntu&#xff08;安装下载不再赘述&#xff09; sudo -i # 提权 sudo apt update # 更新软件包列表 sudo apt upgrade # 升级已安装的软…...

编程日记 2024/11/23 21:26:47

Spring AI Alibaba 快速入门

Spring AI Alibaba 实现了与阿里云通义模型的完整适配&#xff0c;接下来&#xff0c;我们将学习如何使用 spring ai alibaba 开发一个基于通义模型服务的智能聊天应用。 一、快速体验示例 注意&#xff1a;因为 Spring AI Alibaba 基于 Spring Boot 3.x 开发&#xff0c;因此…...

编程日记 2024/11/23 21:23:43

Docker Registry（镜像仓库）详解

Docker Registry&#xff08;镜像仓库&#xff09;详解 Docker Registry&#xff0c;即Docker镜像仓库&#xff0c;是Docker生态系统中一个至关重要的组件。它负责存储、管理和分发Docker镜像&#xff0c;为Docker容器提供镜像资源。本文将深入探讨Docker Registry的功能、结构…...

编程日记 2024/11/23 21:22:39

RTOS学习笔记---“二值信号量”和“互斥信号量”

在实时操作系统&#xff08;RTOS&#xff09;中&#xff0c;“二值信号量”和“互斥信号量”是两种常见的同步机制&#xff0c;用于线程之间的协调与资源管理。尽管它们有相似之处&#xff0c;都基于信号量概念&#xff0c;但它们的用途和行为存在重要区别。 1. 二值信号量&…...

编程日记 2024/11/23 21:21:37

Oracle-物化视图基本操作

-- 物化视图 -- 与普通视图的区别&#xff1a;真实存在数据的 普通视图的数据在基表 物化视图看成是, 一个定时运行的计算JOB一个存计算结果的表 创建时生成数据&#xff1a; 分为两种&#xff1a;build immediate 和 build deferred&#xff0c; build immediate是在创…...

编程日记 2024/11/23 21:18:33

（功能测试）测试报告

其中的统计分析和测试结果确认是必须要有的&#xff1b; 测试过程回顾&#xff1a;测试的时间和阶段&#xff0c;是否出现延期&#xff0c;与预期的任务计划是否匹配&#xff1b; &#xff01;统计分析&#xff1a;统计写多少用例&#xff0c;用例覆盖情况如何&#xff08;100%…...

编程日记 2024/11/23 21:09:25

【LeetCode每日一题】——746.使用最小花费爬楼梯

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 数组 二【题目难度】 简单 三【题目编号】 746.使用最小花费爬楼梯 四【题目描述】 给你一…...

编程日记 2024/11/23 21:08:23

程序里sendStringParametersAsUnicode=true的配置导致sql server cpu使用率高问题处理

一 问题描述 近期生产环境几台sql server从库cpu使用率总是打满&#xff0c;发现抓的带变量值的慢sql&#xff0c;手动代入变量值执行并不慢&#xff0c;秒级返回&#xff0c;不知道问题出在哪里。 二 问题排查 用扩展事件或者sql profiler抓慢sql&#xff0c;抓到了变量值&…...

编程日记 2024/11/23 21:07:21

Vue3 el-table 默认选中 传入的数组

一、效果&#xff1a; 二、官网是VUE2 现更改为Vue3写法 <template><el-table:data"tableData"border striperow-key"id"ref"tableRef":cell-style"{ text-align: center }":header-cell-style"{background: #b7babd…...

编程日记 2024/11/23 21:06:17

最后一个单词的长度

题目详情&#xff1a; 解题思路&#xff1a; 用两个变量分别存储当前值和上次值&#xff0c;就可保证当前移动时记录字符个数&#xff0c;当遇到空格时&#xff0c;这次值保存到上次值&#xff0c;并清空。 代码解析&#xff1a; /* 最后一个单词的长度 */ #include <st…...

编程日记 2024/11/23 21:05:12

2024-11-19 kron积

若A[a11 a12; a21 a22]; B[b11 b12; b21 b22]; 则C[a11*b11 a12*b11 a21*b11 a22*b11; a11*b12 a12*b12 a21*b12 a22*b12; a11*b21 a12*b21 a21*b21 a22*b21; a11*b22 a12*b22 a21*b22 a22*b22] 用MATLAB实现 方法1&#xff1a; A [a11 a12; a21 a22]; B [b11 b12; b21 b22]…...

编程日记 2024/11/23 21:03:10

Redis ⽀持哪⼏种数据类型？适⽤场景，底层结构

目录 Redis 数据类型 一、String&#xff08;字符串&#xff09; 二、Hash&#xff08;哈希&#xff09; 三、List&#xff08;列表&#xff09; 四、Set&#xff08;集合&#xff09; 五、ZSet(sorted set&#xff1a;有序集合) 六、BitMap 七、HyperLogLog 八、GEO …...

编程日记 2024/11/23 21:00:06

树莓派2 安装raspberry os 并修改成固定ip

安装 安装raspberry os 没啥说的&#xff0c;到树莓派官网&#xff0c;下载制作启动映像盘的软件&#xff1a; https://www.raspberrypi.com/software/ 下载后&#xff0c;直接安装该软件&#xff0c;然后运行&#xff0c;选择好开发板的型号和操作系统型号&#xff0c;按照…...

编程日记 2024/11/23 20:59:05

11月第3周AI资讯

阅读时间：3-4min 更新时间：2024.9.9-2024.9.13 目录 DIAMOND：扩散模型在世界构建中的应用 阿里云推出Qwen2.5-Turbo：高效长文本处理，性价比卓越 微软：AI已实现几乎无限的记忆 Comfyui_Object_Migration一致性换衣模型 DeepSeek发布R1-Lite-Preview：推理AI竞争愈发…...

编程日记 2024/11/23 20:57:03

一次封装，解放双手：Requests如何实现0入侵请求与响应的智能加解密

引言 之前写了 Requests 自动重试的文章&#xff0c;突然想到&#xff0c;之前还用到过 Requests 自动加解密请求的逻辑&#xff0c;分享一下。之前在做逆向的时候&#xff0c;发现一般医院的小程序请求会这么玩&#xff0c;请求数据可能加密也可能不加密&#xff0c;但是返回…...

编程日记 2024/11/23 20:56:02

Ubuntu上彻底卸载Ollama的保姆级命令指南（附残留文件清理）

Ubuntu上彻底卸载Ollama的深度清理指南&#xff1a;从基础命令到系统级排查 在AI工具快速迭代的今天&#xff0c;许多开发者都会在本地环境测试各种大模型框架。Ollama作为轻量级的大模型运行工具&#xff0c;虽然安装便捷&#xff0c;但当需要彻底移除时&#xff0c;简单的删除…...

编程新知 2026/4/2 12:38:06

SEO优化文章标题需要注意的重点有什么

SEO优化文章标题需要注意的重点有什么 在当前数字营销的环境中&#xff0c;SEO优化文章标题是吸引目标用户点击的重要因素之一。拥有一个高效的标题不仅可以提升文章的曝光率&#xff0c;还能提高用户的参与度和转化率。SEO优化文章标题需要注意的重点有哪些呢&#xff1f;本文…...

编程新知 2026/4/2 10:54:21

Java微服务Istio配置必须立即更新的4个安全补丁：CVE-2024-23652等高危漏洞绕过配置详解

第一章&#xff1a;Java微服务Istio配置安全补丁的紧急性与背景近年来&#xff0c;Java微服务架构在云原生环境中广泛应用&#xff0c;而Istio作为主流服务网格控制平面&#xff0c;承担着流量管理、可观测性与零信任安全策略实施的关键角色。然而&#xff0c;2024年披露的CVE-…...

编程新知 2026/4/2 10:40:13

【毕业设计】微信小程序文创商城-从真实支付到模拟支付的实现与优化

1. 微信小程序文创商城支付功能概述 做毕业设计选择微信小程序文创商城是个不错的选题&#xff0c;尤其是支付功能的实现&#xff0c;既能锻炼技术能力&#xff0c;又很实用。我去年指导过几个类似的项目&#xff0c;发现学生们最头疼的就是支付模块。真实支付需要营业执照和公…...

编程新知 2026/4/2 9:51:29

别再死记公式！一个Buck电路实例带你吃透‘小信号建模’到底在干什么

从Buck电路实战理解小信号建模&#xff1a;为什么工程师需要这个"数学翻译器"&#xff1f; 第一次接触小信号建模时&#xff0c;我和大多数电力电子初学者一样困惑——明明电路已经能用状态方程描述&#xff0c;为什么还要大费周章地推导那些看似复杂的传递函数&…...

编程新知 2026/4/2 9:18:57

Windows Cleaner完全指南：如何快速解决C盘爆红和系统卡顿问题

Windows Cleaner完全指南&#xff1a;如何快速解决C盘爆红和系统卡顿问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款专为Windows系统设…...

编程新知 2026/4/2 9:14:51

第21课：把 Qt 常用能力串成实战链路，打通文本、绘图、线程、网络与多媒体

本节路线图 为什么这节课看起来很散， → 先把程序的输入输出拿下： → 让界面真正活起来：`QP 兔兔建议 先顺着路线图跑一遍，再抄命令和代码，学习体验会轻松很多。 前两课我们已经把 Qt 的“界面底座”搭起来了，但真正做项目时，很多同学还是会卡在另一个问题上：界面会做了…...

编程新知 2026/4/2 9:02:39

一天一个开源项目（第61篇）：knowledge_graph - 把任意文本转成知识图谱

引言 “Convert any text to a graph of knowledge. Graph Retrieval Augmented Generation (GRAG) — a new and improved version of RAG.” 这是「一天一个开源项目」系列的第 61 篇文章。今天介绍的项目是 knowledge_graph&#xff08;GitHub&#xff09;。 想把文档、PDF…...

编程新知 2026/4/2 8:24:03

AI Agent不是你以为的那样

系列&#xff1a;《AI Agent 从原理到实战 —— 解密 Claude Code 背后的工程智慧》 第1篇引言 你大概有过这样的体验&#xff1a;打开 ChatGPT&#xff0c;说一句"帮我写封邮件&#xff0c;拒绝周五的会议邀请&#xff0c;语气委婉一点"&#xff0c;几秒钟后一封措辞…...

编程新知 2026/4/2 8:18:01

Anaconda3 2025 安装教程【附安装包】快速安装下载

安装包https://qqstone.top/blog/anaconda3-2025 安装步骤 1. 解压压缩包 下载完成后&#xff0c;鼠标右击【Anaconda3 2025】压缩包&#xff0c;选择【解压至此处】。 2. 以管理员身份运行安装程序 打开解压后的文件夹&#xff0c;鼠标右击【Setup】选择【以管理员身份运行…...

编程新知 2026/4/2 8:01:36