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

JavaScript的基本组成

news 2025/12/23 10:08:48

1、JavaScript的组成部分
   JavaScript可以分为三个部分：ECMAScript标准、DOM、BOM。

ECMAScript标准
  即JS的基本语法，JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标    准，定义了一种语言的标准与具体实现无关。
DOM
  即文档对象模型，Document Object Model，用于操作页面元素，DOM可以把HTML看做是文档    树，通过DOM提供的API可以对树上的节点进行操作。
-BOM
  即浏览器对象模型，Browser Object Model，用于操作浏览器，比如：弹出框、控制浏览器跳        转、获取分辨率等。
2、DOM介绍
        文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记    语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和 脚本，更新其内容、结构和www文档的风格(目前，HTML和XML文档是通过说明部分定义的)。文 档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

2.1 DOM相关概念：
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {console.log(divs[i]);
}


属性：标签的属性
2.2 DOM常用操作
元素的获取
元素的动态创建
元素属性的操作
元素绑定的事件
3、DOM操作
3.1 元素的获取

根据id获取元素

var div = document.getElementById('main');
  • 根据标签名获取元素 
    var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {console.log(divs[i]);
}

  • 根据类名获取元素 
    var mains = document.getElementsByClassName('main');
for (var i = 0; i < mains.length; i++) {var main = mains[i];console.log(main);
}

  • 根据选择器获取元素 
    var text = document.querySelector('#text');
console.log(text);var boxes = document.querySelectorAll('.box');
for (var i = 0; i < boxes.length; i++) {var box = boxes[i];console.log(box);
}
    3.2 元素的事件

    事件三要素

  • 事件源:触发(被)事件的元素
  • 事件名称: click 点击事件
  • 事件处理程序:事件触发后要执行的代码(函数形式) 
    var box = document.getElementById('box');
box.onclick = function() {console.log('代码会在box被点击后执行');  
};
    3.3 元素的属性操作
  • 操作表单元素属性
    如：value、type、disabled、selected、checked等 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>checkbox和radio</title>
</head>
<body>
<input id="btn" type="button" value="单选"/>
<input type="radio" value="1" name="sex"/>男
<input type="radio" value="2" name="sex" id="nv"/>女
<input type="radio" value="3" name="sex"/>保密<br/>
<input id="btn2" type="button" value="复选框"/>
<input type="checkbox" value="1" name="hobby" class="hobby"/>看书
<input type="checkbox" value="2" name="hobby" class="hobby"/>看电视
<input type="checkbox" value="3" name="hobby" class="hobby"/>打篮球
<input type="checkbox" value="4" name="hobby" class="hobby"/>吃饭
<input type="checkbox" value="5" name="hobby" class="hobby"/>睡觉
<input type="checkbox" value="6" name="hobby" class="hobby"/>打豆豆<br/>
<input id="btn3" type="button" value="下拉框"/>
<select><option value="-1">--请选择--</option><option value="1" id="sel">油闷大虾</option><option value="2">清蒸豆腐</option><option value="3">油炸土豆条</option><option value="4">烤羊腿</option><option value="5">酸菜鱼</option><option value="6">外婆菜</option>
</select><script type="text/javascript">function my$(id) {return document.getElementById(id);}my$("btn").onclick = function () {my$("nv").checked = true;}my$("btn2").onclick = function () {var hobbyObjs = document.getElementsByClassName("hobby");for (var i = 0; i < hobbyObjs.length; i++) {if (i % 2 == 0) {hobbyObjs[i].checked = true;}}}my$("btn3").onclick = function (){my$("sel").selected = true;}</script>
</body>
</html>

  • 操作非表单元素属性
    如href、title、id、src、className等 
    var link = document.getElementById('link');
console.log(link.href);
console.log(link.title);var pic = document.getElementById('pic');
console.log(pic.src);
var box = document.getElementById('box');
box.innerHTML = '我是文本<p>我会生成为标签</p>';
console.log(box.innerHTML);
box.innerText = '我是文本<p>我不会生成为标签</p>';
console.log(box.innerText);

    常用的HTML转义符

    "		&quot;
'		&apos;
&		&amp;
<		&lt;   // less than  小于
>		&gt;   // greater than  大于
空格	   &nbsp;
©		&copy;

  • 操作自定义属性
    getAttribute() 获取标签行内属性
    setAttribute() 设置标签行内属性
    removeAttribute() 移除标签行内属性 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义属性</title>
</head>
<body>
<ul id="score"><li>成绩A</li><li>成绩B</li><li>成绩C</li><li>成绩D</li><li>成绩E</li>
</ul>
<script type="text/javascript">var scoreList = my$("score").getElementsByTagName("li");for (var i=0; i<scoreList.length; i++){//  添加自定义属性scoreList[i].setAttribute("score", (i+1)*10);//  添加点击事件scoreList[i].onclick = function (){//  获取自定义属性   //  注意：不能通过DOM的方式直接获取标签的自定义属性，只能通过getAttribute方法获取alert(this.getAttribute("score"));}}function my$(id){return document.getElementById(id);}
</script>
</body>
</html>
    3.4 元素的创建

    document.write()

        document.write('新设置的内容<p>标签也可以生成</p>');

    innerHTML

        var box = document.getElementById('box');box.innerHTML = '新内容<p>新标签</p>';

    document.createElement()

        var div = document.createElement('div');document.body.appendChild(div);

    性能问题

  • innerHTML方法会对字符串进行解析，需要避免在循环内多次使用。
  • 可以借助字符串或数组的方式进行替换，再设置给innerHTML
  • 优化后与document.createElement性能相近

相关文章：

JavaScript的基本组成

1、JavaScript的组成部分 JavaScript可以分为三个部分&#xff1a;ECMAScript标准、DOM、BOM。 ECMAScript标准 即JS的基本语法&#xff0c;JavaScript的核心&#xff0c;描述了语言的基本语法和数据类型&#xff0c;ECMAScript是一套标 准&#xff0c;定义了一种语言…...

编程日记 2025/2/2 15:37:59

[Linux]从零开始的STM32MP157 U-Boot移植

一、前言 在上一次教程中&#xff0c;我们了解了STM32MP157的启动流程与安全启动机制。我们还将FSBL的相关代码移植成功了。大家还记得FSBL的下一个步骤是什么吗&#xff1f;没错&#xff0c;就是SSBL&#xff0c;而且常见的我们将SSBL作为存放U-Boot的地方。所以本次教程&…...

编程日记 2025/2/2 15:35:54

【Unity3D】实现横版2D游戏——攀爬绳索（简易版）

目录 GeneRope.cs 场景绳索生成类 HeroColliderController.cs 控制角色与单向平台是否忽略碰撞 HeroClampController.cs 控制角色攀爬 OnTriggerEnter2D方法 OnTriggerStay2D方法 OnTriggerExit2D方法 Update方法 开始攀爬 结束攀爬 Sensor_HeroKnight.cs 角色触发器…...

编程日记 2025/2/2 15:34:51

【llm对话系统】大模型 Llama 源码分析之 LoRA 微调

1. 引言 微调 (Fine-tuning) 是将预训练大模型 (LLM) 应用于下游任务的常用方法。然而&#xff0c;直接微调大模型的所有参数通常需要大量的计算资源和内存。LoRA (Low-Rank Adaptation) 是一种高效的微调方法&#xff0c;它通过引入少量可训练参数&#xff0c;固定预训练模型…...

编程日记 2025/2/2 15:33:49

算法随笔_35: 每日温度

上一篇:算法随笔_34: 最后一个单词的长度-CSDN博客 题目描述如下: 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升…...

编程日记 2025/2/2 15:29:44

嵌入式硬件篇---CPUGPUTPU

文章目录 第一部分&#xff1a;处理器CPU&#xff08;中央处理器&#xff09;1.通用性2.核心数3.缓存4.指令集5.功耗和发热 GPU&#xff08;图形处理器&#xff09;1.并行处理2.核心数量3.内存带宽4.专门的应用 TPU&#xff08;张量处理单元&#xff09;1.为深度学习定制2.低精…...

编程日记 2025/2/2 15:23:39

STM32 PWM驱动舵机

接线图&#xff1a; 这里将信号线连接到了开发板的PA1上 代码配置&#xff1a; 这里的PWM配置与呼吸灯一样&#xff0c;呼吸灯连接的是PA0引脚&#xff0c;输出比较单元用的是OC1通道&#xff0c;这里只需改为OC2通道即可。 完整代码&#xff1a; #include "servo.h&quo…...

编程日记 2025/2/2 15:21:37

设计心得——平衡和冗余

一、平衡 在前面分析了一些软件设计的基础和原则后&#xff0c;今天分析一下整体设计上的一些实践问题。首先分析一下设计上的平衡问题。平衡非常好理解&#xff0c;看到过天平或者标称的同学们应该都知道什么平衡。无论在哪个环境里&#xff0c;平衡都是稳定的基础。 既然说到…...

编程日记 2025/2/2 15:20:35

webrtc协议详细解释

### 一、概述与背景 WebRTC&#xff08;Web Real-Time Communication&#xff09;最早由 Google 在 2011 年开源&#xff0c;旨在为浏览器与移动端应用提供客户端直连&#xff08;点对点&#xff09;方式进行实时音视频及数据传输的能力。传统的网络应用在进行高实时性音视频通…...

编程日记 2025/2/2 15:18:32

动手学强化学习(四)——蒙特卡洛方法

一、蒙特卡洛方法 蒙特卡洛方法是一种无模型&#xff08;Model-Free&#xff09;的强化学习算法&#xff0c;它通过直接与环境交互采样轨迹&#xff08;episodes&#xff09;来估计状态或动作的价值函数&#xff08;Value Function&#xff09;&#xff0c;而不需要依赖环境动态…...

编程日记 2025/2/2 15:17:30

网络原理（3）—— 传输层详解

目录 一. 再谈端口号 二. UDP协议(用户数据报协议) 2.1 UDP协议端格式 2.2 UDP报文长度 2.3 UDP校验和 三. TCP协议(传输控制协议) 3.1 TCP协议段格式 3.2 核心机制 3.2.1 确认应答 —— “感知对方是否收到” 3.2.2 超时重传 3.3.3 连接管理 —— 三次握手与四…...

编程日记 2025/2/2 15:15:28

2025美赛美国大学生数学建模竞赛A题完整思路分析论文（43页）（含模型、可运行代码和运行结果）

2025美国大学生数学建模竞赛A题完整思路分析论文 目录 摘要 一、问题重述 二、 问题分析 三、模型假设 四、 模型建立与求解 4.1问题1 4.1.1问题1思路分析 4.1.2问题1模型建立 4.1.3问题1样例代码&#xff08;仅供参考&#xff09; 4.1.4问题1样例代码运行结果&…...

编程日记 2025/2/2 15:09:21

Elasticsearch的开发工具（Dev Tools）

目录 说明1. **Console**2. **Search Profiler**3. **Grok Debugger**4. **Painless Lab**总结 说明 Elasticsearch的开发工具&#xff08;Dev Tools&#xff09;在Kibana中提供了多种功能强大的工具&#xff0c;用于调试、优化和测试Elasticsearch查询和脚本。以下是关于Cons…...

编程日记 2025/2/2 15:03:10

Python-基于PyQt5,pdf2docx,pathlib的PDF转Word工具

前言：日常生活中，我们常常会跟WPS Office打交道。作表格，写报告，写PPT......可以说，我们的生活已经离不开WPS Office了。与此同时，我们在这个过程中也会遇到各种各样的技术阻碍，例如部分软件的PDF转Word需要收取额外费用等。那么，可不可以自己开发一个小工具来实现PDF转…...

编程日记 2025/2/2 15:02:05

小程序-视图与逻辑

前言 1. 声明式导航 open-type"switchTab"如果没有写这个&#xff0c;因为是tabBar所以写这个&#xff0c;就无法跳转。路径开始也必须为斜线 open-type"navigate"这个可以不写 现在开始实现后退的效果 现在我们就在list页面里面实现后退 2.编程式导航…...

编程日记 2025/2/2 14:54:57

UE5制作视差图

双目深度估计开源数据集很多都是用UE制作的&#xff0c;那么我们自己能否通过UE制作自己想要的场景的数据集呢。最近花了点时间研究了一下&#xff0c;分享给需要的小伙伴。 主要使用的是UnrealCV插件&#xff0c;UnrealCV是一个开源项目&#xff0c;旨在帮助计算机视觉研究人…...

编程日记 2025/2/2 14:52:50

海浪波高预测（背景调研）

#新星杯14天创作挑战营第7期# ps&#xff1a;图片由通义千问生成 历史工作&#xff1a; 针对更高细粒度、更高精度的波浪高度预测任务&#xff1a; Mumtaz Ali 等人提出了一种多元线性回归模型&#xff08;MLR-CWLS&#xff09;&#xff0c;该模型利用协方差加权最小二乘法&a…...

编程日记 2025/2/2 14:49:46

代码随想录算法训练营第四十二天-动态规划-股票-188.买卖股票的最佳时机IV

题目要求进行k次买卖其实就是上一题的扩展&#xff0c;把2次扩展为k次定义动规数组依然是二维&#xff0c;第一个维度表示第几天&#xff0c;第二个维度表示第几次买入和卖出所以第二个维度的长度应该是2k1在for循环内&#xff0c;要使用一个内循环来表示第几次买入或卖出&…...

编程日记 2025/2/2 14:48:43

Gradle配置指南：深入解析settings.gradle.kts（Kotlin DSL版）

文章目录 Gradle配置指南&#xff1a;深入解析settings.gradle.kts&#xff08;Kotlin DSL版&#xff09;settings.gradle.kts 基础配置选项单项目配置多项目配置 高级配置选项插件管理&#xff08;Plugin Management&#xff09;基础配置模板案例&#xff1a;Android项目标准配…...

编程日记 2025/2/2 14:43:37

软件工程经济学-日常作业+大作业

目录 一、作业1 作业内容 解答 二、作业2 作业内容 解答 三、作业3 作业内容 解答 四、大作业 作业内容 解答 1.建立层次结构模型 (1)目标层 (2)准则层 (3)方案层 2.构造判断矩阵 (1)准则层判断矩阵 (2)方案层判断矩阵 3.层次单排序及其一致性检验 代码 …...

编程日记 2025/2/2 14:40:34

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/12/22 20:01:43

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

＜6＞-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

编程新知 2025/12/11 18:28:17

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/12/14 7:46:59

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/10/20 9:03:01

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/8/13 15:12:54

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/11/26 20:46:42

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2025/12/5 8:12:50