DOM操作

已于 2022-03-05 13:34:40 修改
阅读量586 收藏
点赞数
分类专栏： dom 文章标签： javascript
于 2022-03-05 13:32:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42917020/article/details/123251270
版权

这里写目录标题

查找 HTML 元素

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

通过 id 查找 HTML 元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p id="abc">你好dom</p>
    <script>
      x = document.getElementById("abc");
      document.write("<p>文本来自" + x.innerHTML + "</p>");
    </script>
  </body>
</html>

在这里插入图片描述

通过标签名查找 HTML 元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p>你坏dom</p>
    <script>
      y = document.getElementsByTagName("p");
      document.write(y[0].innerHTML);
      //注意这里的y是一个数组，如果不加下标会显示undefined
    </script>
  </body>
</html>

在这里插入图片描述

通过类名找到 HTML 元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p class="abc">你真是个傻瓜</p>
    <script>
      x = document.getElementsByClassName("abc");
      document.write(x[0].innerHTML);
    </script>
  </body>
</html>

在这里插入图片描述
getElementsByTagName 和 getElementsByClassName 这两个方法查找多个 dom 元素，返回的是 htmlcollection 类型，是伪数组而不是真数组，故不能使用数组的方法。

javascript改变html

改变 HTML 输出流

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p class="abc">你真是个傻瓜</p>
    <script>
      document.write(Date());
    </script>
  </body>
</html>

在这里插入图片描述

改变 HTML 内容

如需改变 HTML 元素的内容，请使用这个语法：document.getElementById(id).innerHTML=新的 HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p id="abc">你真是个傻瓜</p>
    <script>
      document.getElementById("abc").innerHTML = "新文本!";
    </script>
  </body>
</html>

在这里插入图片描述

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：document.getElementById(id).attribute=新属性值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

</body>
</html>

DOM - 改变CSS

如需改变 HTML 元素的样式，请使用这个语法：document.getElementById(id).style.property=新样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

</body>
</html>

在这里插入图片描述

HTML DOM 允许我们通过触发事件来执行代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>

</body>
</html>

DOM 事件

HTML 事件的例子：

  1. 当用户点击鼠标时
  2. 当网页已加载时
  3. 当图像已加载时
  4. 当鼠标移动到元素上时
  5. 当输入字段被改变时
  6. 当提交 HTML 表单时
  7. 当用户触发按键时

当用户点击鼠标时

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

HTML 事件属性

如需向 HTML 元素分配 事件，您可以使用事件属性。
向 button 元素分配 onclick 事件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button onclick="displayDate()">点我</button>
    <script>
      function displayDate() {
        document.getElementById("abc").innerHTML = Date();
      }
    </script>
    <p id="abc"></p>
  </body>
</html>

在这里插入图片描述

使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <button id="cba">点我</button>
    <script>
      document.getElementById("cba").onclick = function () {
        displayDate();
      };
      function displayDate() {
        document.getElementById("abc").innerHTML = Date();
      }
    </script>
    <p id="abc"></p>
  </body>
</html>

在这里插入图片描述

onload 和 onunload 事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
	if (navigator.cookieEnabled==true){
		alert("Cookies 可用")
	}
	else{
		alert("Cookies 不可用")
	}
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
	
</body>
</html>

onchange 事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

onmouseover 和 onmouseout 事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>runoob.com)</title>
</head>
<body>

<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
<script>
function mOver(obj){
	obj.innerHTML="Thank You"
}
function mOut(obj){
	obj.innerHTML="Mouse Over Me"
}
</script>

</body>
</html>

在这里插入图片描述

DOM EventListener

addEventListener() 方法

在用户点击按钮时触发监听事件：
addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 “click” 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

在这里插入图片描述

语法

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

向原元素添加事件句柄

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

</body>
</html>

在这里插入图片描述

向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

</body>
</html>

传递参数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

</body>
</html>

事件冒泡或事件捕获

document.getElementById(“myDiv”).addEventListener(“click”, myFunction, true);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

removeEventListener() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
<style>
#myDIV {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white;
}
</style>
</head>
<body>

<div id="myDIV"> div 元素添加了 onmousemove 事件句柄，鼠标在桔红色的框内移动时会显示随机数。
  <p>点击按钮移除 DIV 的事件句柄。</p>
  <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
    document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

DOM 元素 (节点)

创建新的 HTML 元素 (节点) - appendChild()

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="abc">
      <p id="p1">这是一个段落</p>
      <p id="p2">这是另一个段落</p>
    </div>
    <script>
      var para = document.createElement("p");
      var node = document.createTextNode("这是新的段落");
      para.appendChild(node);

      document.getElementById("abc").appendChild(para);
    </script>
  </body>
</html>

在这里插入图片描述

insertBefore()

以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>(runoob.com)</title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

</body>
</html>

在这里插入图片描述

移除已存在的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

替换 HTML 元素 - replaceChild()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

</body>
</html>
王源偷我华子抽
关注
专栏目录
jQuery常见面试题之DOM操作详析
12-10
关于JQ的DOM操作面试问题很多，可以从各个点问，所以列举几个常见问题，毕竟面试只是过程，重要的是知识自己掌握了。 面试题一：JQ中html()、text()和val()区别？ 面试题二：JQ中find()、has()和filter()区别？ 面试...
Angular2学习教程之组件中的DOM操作详解
08-30
在Angular2的学习过程中，了解如何在组件中进行DOM操作是非常重要的技能。Angular提供了一套API，使得开发者可以在不直接触碰原始DOM元素的情况下，安全、有效地进行DOM操作。本教程将详细讲解Angular2中组件内DOM...
JavaScript DOM操作
好好学习天天向上
03-27 5250
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
TypeScript Dom操作
Errol's Blog
05-06 7752
Typescript Dom操作
DOM操作汇总
weixin_47450807的博客
02-05 3448
DOM节点通常对应着一个标签，文本或者一个innerHTML属性。DOM节点存在nodeType属性表示当前节点类型。其中标签类型nodeType为1，属性类型的nodeType为2，文本类型的nodeType为3。 一、创建节点 let input1 = document.createElement("input") //创建标签节点 let textNode = document.createTextNode("hello world") //创建文本节点 二、DOM查询 let els = do
常见的DOM操作有哪些
热门推荐
IT修真院：初学者转行到互联网的聚集地
05-16 2万+
这里是修真院前端小课堂，本篇分析的主题是 【常见的DOM操作有哪些】 这里是修真院前端小课堂，每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能，本篇分享的是： 【常见的DOM操作有哪些】 1.背景介绍 什么是DOM？简单地说，DOM是一套对文档的内容进行抽象和概念化...
js中Dom操作
weixin_52346897的博客
04-07 5099
简单的Dom获取 什么是Dom操作？ 1.DOM使一个"使程序"和"脚本"有能力的"动态地访问"和"更新文档内容结构"，以及"样式"的平台和语言中立的接口. 2.在HTML和JavaScript的学习中，DOM操作可谓时重中之重. Dom树 //html dom树 如图： DOM节点的分类： DOM节点分为三大类： 1.元素（标签）节点， 2.属性节点， 3.文本节点； 查找dom节点: 1.通过id获取 <div id="box"></div> <script&
DOM操作,隔行换色
weixin_65014714的博客
02-04 1272
这两种方法都是行内样式,都是点击事件,后续我还会上传通过css样式,控制背景色,还有鼠标进入离开的隔行换色
JavaScript 之 DOM 操作（一）
m0_73759720的博客
08-11 2225
本文主要讲了获取标签的方法、设置标签的样式、设置文本、标签操作及事件的一些操作。
js 原生dom 操作
SK_study的博客
03-26 3453
js 原生操作dom的方法
Educoder jQuery DOM操作
m0_65391975的博客
12-05 2023
Educoder jQuery DOM操作 第1关：jQuery获取内容和属性 第2关：jQuery设置内容和属性 第3关：jQuery添加元素 第4关：jQuery删除元素
易语言源码超文本浏览框全套DOM操作.rar
07-08
《易语言源码超文本浏览框全套DOM操作》是一份专为易语言用户设计的编程资源，它提供了在易语言环境中对超文本浏览框进行深入DOM（Document Object Model）操作的完整解决方案。DOM是HTML和XML文档的标准表示，通过...
JavaScript dom操作 趣味案例
06-25
本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可直接打开查看本资源为JavaScript的dom操作的趣味案例，可...
学习DOM操作第一个小例子
02-04
点击隔行换色 点击元素,背景色要发生改变 之前的元素恢复默认的背景色
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 445
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
如何编译 Cesium 源码
ismartcube的博客
11-13 1183
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 904
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
【Node.js】Node.js 和浏览器之间的差异
最新发布
佚名程序员
11-16 897
Node.js 是一个基于 Chrome V8 引擎构建的开源 JavaScript 运行时，它使开发者能够在服务端运行 JavaScript 代码。Node.js 提供了高效的事件驱动和非阻塞 I/O 模型，广泛应用于构建快速、可扩展的网络应用。核心特性单线程：使用事件循环机制实现并发。非阻塞 I/O：适合高并发应用。模块化：采用 CommonJS 模块系统。浏览器是前端开发的主要运行环境。其核心任务是解析 HTML、CSS 和 JavaScript，并呈现网页内容。
JavaScript DOM操作表格与样式完全指南
"这篇文档详细阐述了如何使用JavaScript DOM来操作HTML中的表格及其样式，适合对JavaScript和DOM操作感兴趣的开发者参考学习。" 在JavaScript中，DOM（Document Object Model）是HTML和XML文档的一种编程接口，它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王源偷我华子抽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值