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

Web基础关键_007_JavaScript 的 DOM

news 2025/7/4 21:25:06

目  录

一、概述

二、对象

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.xdnf.cn/news/1079893.html

相关文章：

  • 34. 在排序数组中查找元素的第一个和最后一个位置
  • WPF学习笔记（22）项面板模板ltemsPanelTemplate与三种模板总结
  • 【进阶篇-消息队列】——Kafka如何实现事务的
  • R 语言安装使用教程
  • 物联网MQTT协议与实践：从零到精通的硬核指南
  • 【2.4 漫画SpringBoot实战】
  • Java的SpringAI+Deepseek大模型实战之会话记忆
  • Qt Creator自定义控件开发流程
  • Windows 10 2016 长期服务版
  • WPF学习笔记（16）树控件TreeView与数据模板
  • 刷卡登入数据获取
  • MySQL的窗口函数介绍
  • Redis—哨兵模式
  • 相机光学（四十八）——渐晕
  • [自然语言处理]计算语言的熵
  • Qt宝藏库：20+实用开源项目合集
  • ReentrantLock 原理
  • Euler2203安装.NetCore6.0环境操作步骤
  • 前端单元测试覆盖率工具有哪些，分别有什么优缺点
  • Java中的volatile到底是什么来路
  • RAG实战指南 Day 4：LlamaIndex框架实战指南
  • CentOS系统高效部署fastGPT全攻略
  • 21、MQ常见问题梳理
  • 【论】电力-交通融合网协同优化：迎接电动汽车时代的挑战
  • thinkphp8接管异常处理类
  • 【第三章:神经网络原理详解与Pytorch入门】01.神经网络算法理论详解与实践-(2)神经网络整体结构
  • STM32-第二节-GPIO输入（按键，传感器）
  • C盘爆满元凶！WinSxS组件解密
  • JsonCpp的核心类及核心函数使用汇总
  • Web 服务器架构选择深度解析