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

Web基础关键_007_JavaScript 的 DOM

news 2025/7/4 6:54:37

目  录

一、概述

二、对象

1.Document 对象

2.Element 对象

三、标签体内容操作

四、元素关系操作

五、插入节点

六、删除节点

七、表单操作

八、事件

1.说明

2.点击事件

3.焦点事件

4.改变事件

5.鼠标移动事件

6.页面加载事件

7.表单事件

一、概述

  1. Document Object Model，文档对象模型；
  2. 文档会加载进内存，形成一棵文档树。然后将文档各部分封装为对象，通过操作这些对象，可以实现对文档各节点的增、删、改、查操作；
  3. 对象：
    1. Document：整个文档对象；
    2. Element：元素对象；
    3. Attribute：属性对象；
    4. Text：文本对象；
    5. Comment：注释对象。

二、对象

1.Document 对象

  1. getElementById：根据 id 值获取，返回单个 Element 对象；
  2. getElementsByTagName：根据标签名称获取，返回 Element 对象数组；
  3. getElementsByClassName：根据 class 值获取，返回 Element 对象数组；
  4. getElementsByName：根据 name 值获取，返回 Element 对象数组。
<html><head><title>Test Javascript</title>
</head><body><div id="i" class="c">I Love You!</div><div class="c">If you don't completely forget me.</div><p name="p">And occasionally think of me.</p><p name="p">Then my heart will be tortured by you.</p><p name="p">Abandoning everything and indulging with you.</p><script>var e1 = document.getElementById("i");var e2 = document.getElementsByClassName("c");var e3 = document.getElementsByTagName("div");var e4 = document.getElementsByName("p");console.log(e1);console.log(e2);console.log(e3);console.log(e4);</script>
</body></html>

2.Element 对象

  1. getAttribute：获取属性值；
  2. hasAttribute：判断属性是否存在；
  3. setAttribute：设置或添加属性；
  4. removeAttribute：移除属性。
<html><head><title>Test Javascript</title>
</head><body><div id="i" class="c">I Love You!</div><div class="c">If you don't completely forget me.</div><p name="p">And occasionally think of me.</p><p name="p">Then my heart will be tortured by you.</p><p name="p">Abandoning everything and indulging with you.</p><script>var e1 = document.getElementById("i");var a1 = e1.getAttribute("class");var a2 = e1.hasAttribute("class");// 设置属性// var a3 = e1.setAttribute("name", "n");// 修改属性// var a4 = e1.setAttribute("name", "name");// 删除属性// var a5 = e1.removeAttribute("name");console.log(a1);    // cconsole.log(a2);    // true</script>
</body></html>

三、标签体内容操作

  1. innerHTML：获取元素内容，包括标签；
  2. innerText：获取元素内容，不包括标签。
<html><head><title>Test Javascript</title>
</head><body><div id="d"><span id="s" class="c">I Love You!</span><span class="c">If you don't completely forget me.</span><p name="p">And occasionally think of me.</p><p name="p">Then my heart will be tortured by you.</p><p name="p">Abandoning everything and indulging with you.</p></div><script>var e1 = document.getElementById("d");var inHTML = e1.innerHTML;var inText = e1.innerText;console.log(inHTML); console.log(inText);    </script>
</body></html>

四、元素关系操作

<html><head><title>Test Javascript</title>
</head><body><div id="d"><span id="s" class="c">I Love You!</span><span class="c">If you don't completely forget me.</span><p name="p">And occasionally think of me.</p><p name="p">Then my heart will be tortured by you.</p><p name="p">Abandoning everything and indulging with you.</p></div><script>// 获取父元素var e1 = document.getElementById("s");var parent = e1.parentNode;// 获取子元素var e2 = document.getElementById("d");var child = e2.children;console.log(parent);console.log(child);</script>
</body></html>

五、插入节点

<html><head><title>Test Javascript</title>
</head><body><div id="d"><h3 id="h">插入节点</h3></div><script>// 创建节点var e1 = document.createElement("p1");e1.innerHTML = "这是插入的节点1";var e2 = document.createElement("p2");e2.innerHTML = "这是插入的节点2";// 获取节点var e3 = document.getElementById("d");var e4 = document.getElementById("h");// 向父节点内插入子节点e3.appendChild(e1);// 向父节点内指定位置插入子节点 e3.insertBefore(e2, e4);</script>
</body></html>

六、删除节点

<html><head><title>Test Javascript</title>
</head><body><div id="d"><h3 id="h">删除节点</h3><p id="p">让不让删呢？</p><span id="s1">需要通过父容器删除，演示1</span><span id="s2">需要通过父容器删除，演示2</span></div><script>// 删除节点第一种写法var e1 = document.getElementById("d");var e2 = document.getElementById("s1");e1.removeChild(e2);// 删除节点第二种写法var e3 = document.getElementById("s2");e3.parentNode.removeChild(e3);</script>
</body></html>

七、表单操作

<html><head><title>Test Javascript</title>
</head><body><form action="#" method="get">姓名：<input type="text" name="name" id="name"><br>性别：男<input type="radio" name="gender" value="man" id="1">女<input type="radio" name="gender" value="woman" id="2"><br>城市：<select name="city" id="city"><option id="beijing">北京</option><option id="shanghai">上海</option><option id="guangzhou">广州</option><option id="shenzhen">深圳</option><option id="hangzhou">杭州</option><option id="wuhan">武汉</option></select></form><script>// 获取或设置表单 value 属性var e1 = document.getElementById("name");e1.value = "张筱筱";console.log(e1.value);// 获取或设置单选框选中状态var e2 = document.getElementById("2");e2.checked = true;// 设置下拉框var e3 = document.getElementById("hangzhou");e3.selected = true;// 设置禁用效果var e4 = document.getElementById("1");e4.disabled = true;</script>
</body></html>

八、事件

1.说明

  1. 事件是前端触发的一些行为，当这些行为触发时，可以执行对应的代码；
  2. 三要素：
    1. 事件源：事件在哪里发生；
    2. 事件：在该事件源上发生了什么事情；
    3. 事件驱动程序：触发哪些代码，实现什么效果。
  3. 可以参考【HTML DOM 事件】，以下部分内容摘录于此。
事件

描述

属于

abort

媒体加载中止时发生该事件。

UiEvent

Event

afterprint当页面开始打印时，或者关闭打印对话框时，发生此事件。Event
animationendCSS 动画完成时发生此事件。AnimationEvent
animationiteration重复 CSS 动画时发生此事件。AnimationEvent
animationstartCSS 动画开始时发生此事件。AnimationEvent
beforeprint即将打印页面时发生此事件。Event
beforeunload

在文档即将被卸载之前发生此事件。

UiEvent

Event

blur当元素失去焦点时发生此事件。FocusEvent
canplay当浏览器可以开始播放媒体时，发生此事件。Event
canplaythrough当浏览器可以在不停止缓冲的情况下播放媒体时发生此事件。Event
change当form元素的内容、选择的内容或选中的状态发生改变时，发生此事件Event
click当用户单击元素时发生此事件。MouseEvent
contextmenu当用户右键单击某个元素以打开上下文菜单时，发生此事件。MouseEvent
copy当用户复制元素的内容时发生此事件。ClipboardEvent
cut当用户剪切元素的内容时发生此事件。ClipboardEvent
dblclick当用户双击元素时发生此事件。MouseEvent
drag拖动元素时发生此事件。DragEvent
dragend当用户完成拖动元素后，发生此事件。DragEvent
dragenter当拖动的元素进入放置目标时，发生此事件。DragEvent
dragleave当拖动的元素离开放置目标时，发生此事件。DragEvent
dragover当拖动的元素位于放置目标之上时，发生此事件。DragEvent
dragstart当用户开始拖动元素时发生此事件。DragEvent
drop当将拖动的元素放置在放置目标上时，发生此事件。DragEvent
durationchange媒体时长改变时发生此事件。Event
ended在媒体播放到尽头时发生此事件。Event
error当加载外部文件时发生错误后，发生此事件。

ProgressEvent

UiEvent

Event

focus在元素获得焦点时发生此事件。FocusEvent
focusin在元素即将获得焦点时发生此事件。FocusEvent
focusout在元素即将失去焦点时发生此事件。FocusEvent
fullscreenchange当元素以全屏模式显示时，发生此事件。Event
fullscreenerror当元素无法在全屏模式下显示时，发生此事件。Event
hashchange当 URL 的锚部分发生改变时，发生此事件。HashChangeEvent
input当元素获得用户输入时，发生此事件。

InputEvent

Event

invalid当元素无效时，发生此事件。Event
keydown当用户正在按下键时，发生此事件。KeyboardEvent
keypress当用户按下键时，发生此事件。KeyboardEvent
keyup当用户松开键时，发生此事件。KeyboardEvent
load在对象已加载时，发生此事件。

UiEvent

Event

loadeddata媒体数据加载后，发生此事件。Event
loadedmetadata加载元数据（比如尺寸和持续时间）时，发生此事件。Event
loadstart当浏览器开始查找指定的媒体时，发生此事件。ProgressEvent
message在通过此事件源接收消息时，发生此事件。Event
mousedown当用户在元素上按下鼠标按钮时，发生此事件。MouseEvent
mouseenter当指针移动到元素上时，发生此事件。MouseEvent
mouseleave当指针从元素上移出时，发生此事件。MouseEvent
mousemove当指针在元素上方移动时，发生此事件。MouseEvent
mouseout当用户将鼠标指针移出元素或其中的子元素时，发生此事件。MouseEvent
mouseover当指针移动到元素或其中的子元素上时，发生此事件。MouseEvent
mouseup当用户在元素上释放鼠标按钮时，发生此事件。MouseEvent
mousewheel不推荐使用。请改用 wheel 事件。WheelEvent
offline当浏览器开始脱机工作时，发生此事件。Event
online当浏览器开始在线工作时，发生此事件。Event
open当打开与事件源的连接时，发生此事件。Event
pagehide当用户离开某张网页进行导航时，发生此事件。PageTransitionEvent
pageshow在用户导航到某张网页时，发生此事件。PageTransitionEvent
paste当用户将一些内容粘贴到元素中时，发生此事件。ClipboardEvent
pause当媒体被用户暂停或以编程方式暂停时，发生此事件。Event
play当媒体已启动或不再暂停时，发生此事件。Event
playing在媒体被暂停或停止以缓冲后播放时，发生此事件。Event
popstate窗口的历史记录改变时，发生此事件。PopStateEvent
progress当浏览器正处于获得媒体数据的过程中时，发生此事件。Event
ratechange媒体播放速度改变时发生此事件。Event
reset重置表单时发生此事件。Event
resize调整文档视图的大小时发生此事件。

UiEvent

Event

scroll滚动元素的滚动条时发生此事件。

UiEvent

Event

search当用户在搜索字段中输入内容时，发生此事件。Event
seeked当用户完成移动/跳到媒体中的新位置时，发生该事件。Event
seeking当用户开始移动/跳到媒体中的新位置时，发生该事件。Event
select用户选择文本后（对于<input>和<textarea>）发生此事件

UiEvent

Event

show当 <menu> 元素显示为上下文菜单时，发生此事件。Event
stalled当浏览器尝试获取媒体数据但数据不可用时，发生此事件。Event
storageWeb 存储区域更新时发生此事件。StorageEvent
submit在提交表单时发生此事件。Event
suspend当浏览器有意不获取媒体数据时，发生此事件。Event
timeupdate当播放位置更改时发生此事件。Event
toggle当用户打开或关闭 <details> 元素时，发生此事件。Event
touchcancel在触摸被中断时，发生此事件。TouchEvent
touchend当手指从触摸屏上移开时，发生此事件。TouchEvent
touchmove当手指在屏幕上拖动时，发生此事件。TouchEvent
touchstart当手指放在触摸屏上时，发生此事件。TouchEvent
transitionendCSS 转换完成时，发生此事件。TransitionEvent
unload页面卸载后（对于 <body>），发生此事件。

UiEvent

Event

volumechange当媒体的音量已更改时，发生此事件。Event
waiting当媒体已暂停但预期会恢复时，发生此事件。Event
wheel当鼠标滚轮在元素向上或向下滚动时，发生此事件。WheelEvent

2.点击事件

<html><head><title>Test Javascript</title>
</head><body><p id="p">I Love You!</p><input type="button" id="btn" value="click me"><script>var btn = document.getElementById("btn");btn.onclick = function () {var p = document.getElementById("p");p.innerText = "我爱你！";}</script>
</body></html>

3.焦点事件

<html><head><title>Test Javascript</title>
</head><body>电话：<input type="tel" id="phone"><span id="phone_msg"></span><script>var phone = document.getElementById("phone");phone.onclick = function () {var phone_msg = document.getElementById("phone_msg");phone_msg.innerHTML = "请输入手机号码";}phone.onblur = function () {var phone_msg = document.getElementById("phone_msg");var reg_tel = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/;var flag = reg_tel.test(phone.value);if (flag) {phone_msg.innerHTML = "手机号码合法";} else {phone_msg.innerHTML = "手机号码不合法";}}</script>
</body></html>

4.改变事件

<html><head><title>Test Javascript</title>
</head><body>爱好：<select id="hobby"><option value="">请选择爱好</option><option value="1">旅行</option><option value="2">写作</option><option value="3">游泳</option><option value="4">电影</option><option value="5">音乐</option><option value="6">摄影</option></select><script>var e1 = document.getElementById("hobby");e1.onchange = function () {alert("爱好是：" + this.value);}</script>
</body></html>

5.鼠标移动事件

<html><head><title>Test Javascript</title><style>.blue {color: blue;}.pink {color: pink;}</style>
</head><body><div id="d" class="blue">鼠标移动事件，看我变颜色！</div><script>var d = document.getElementById("d");d.onmouseover = function () {d.className = "pink";}d.onmouseout = function () {d.className = "blue";}</script>
</body></html>

6.页面加载事件

<html><head><title>Test Javascript</title><script>window.onload = function () {var e = document.getElementById("d");console.log(e);}</script>
</head><body><div id="d">页面加载事件</div>
</body></html>

7.表单事件

<html><head><title>Test Javascript</title>
</head><body><form action="#" id="f">账户：<input type="text" id="name"><br>密码：<input type="password" id="password"></form><button id="submit">提交</button><button id="reset">重置</button><script>var e1 = document.getElementById("f");var e2 = document.getElementById("submit");e2.onclick = function () {f.submit();};var e3 = document.getElementById("reset");e3.onclick = function () {f.reset();};</script>
</body></html>
http://www.dtcms.com/a/265500.html

相关文章：

  • 算法学习笔记：5.后缀数组——从原理到实战，涵盖 LeetCode 与考研 408 例题
  • 华为c编程规范
  • 【大模型】从0到1：DeepSeek + Coze API调用全攻略，企业，开发个人专属AI智能体使用详解，小白也能轻松上手
  • Qt编程-qml操作（js，c++，canvas）
  • spring boot如何只修改配置文件就解决swagger漏洞
  • Spring 6 源码深度掘金：66+核心原理与高频面试攻坚指南
  • 朝鲜APT组织使用Nim语言恶意软件对macOS发起隐秘Web3与加密货币攻击
  • 中国户外品牌全球竞争力榜单发布：科技突围与文化赋能重塑行业格局
  • 现代工程科技杂志投稿
  • 后端MVC（控制器与动作方法的关系）
  • 微服务外联Feign调用：第三方API调用的负载均衡与容灾实战
  • C++之路：类基础、构造析构、拷贝构造函数
  • Rust Web 全栈开发（一）：构建 TCP Server
  • Go基础（Gin）
  • Webpack 5 核心机制详解与打包性能优化实践
  • 牛客：HJ16 购物单【01背包】【华为机考】
  • 前端单元测试覆盖率工具有哪些，分别有什么优缺点
  • 在 Sepolia 上使用 Zama fhEVM 构建隐私代币与流动性池：全流程实战指南
  • Android音视频探索之旅 | CMake基础语法 创建支持Ffmpeg的Android项目
  • 【免费.NET方案】CSV到PDF与DataTable的快速转换
  • 音频动态压缩算法曲线实现
  • C++【成员变量、成员函数、this指针】
  • OSPF高级特性之FRR
  • Vue 项目在哪里加载「字典数据」最好
  • 基于 alpine 构建 .net 的基础镜像
  • 开源模型应用落地-让AI更懂你的每一次交互-Mem0集成Qdrant、Neo4j与Streamlit的创新实践（四）
  • Zookeeper 客户端 .net访问框架 ZookeeperNetEx项目开发编译
  • 开源 C# .net mvc 开发（六）特殊控制控制台、周期、邮件编程
  • 深度实战：Ubuntu服务器宕机排查全记录
  • 月付物理服务器租用平台-青蛙云