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

JavaScript的基本组成

news 2026/2/8 1:44:08

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的基本组成

3.2 元素的事件

3.3 元素的属性操作

3.4 元素的创建

相关文章：

JavaScript的基本组成

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

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

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

算法随笔_35: 每日温度

嵌入式硬件篇---CPUGPUTPU

STM32 PWM驱动舵机

设计心得——平衡和冗余

webrtc协议详细解释

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

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

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

Elasticsearch的开发工具（Dev Tools）

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

小程序-视图与逻辑

UE5制作视差图

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

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

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

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

Spark 之入门讲解详细版（1）

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

基于Flask实现的医疗保险欺诈识别监测模型

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

用机器学习破解新能源领域的“弃风”难题

Linux部署私有文件管理系统MinIO

API网关Kong的鉴权与限流：高并发场景下的核心实践

在Spring Boot中集成RabbitMQ的完整指南

CppCon 2015 学习:Simple, Extensible Pattern Matching in C++14

SOC-ESP32S3部分：30-I2S音频-麦克风扬声器驱动