JavaScript 操作 HTML DOM

最新推荐文章于 2024-01-04 20:20:53 发布
最新推荐文章于 2024-01-04 20:20:53 发布
阅读量75 收藏
点赞数
分类专栏： JavaScript 文章标签： JavaScript HTML DOM ViewUI
[b]JavaScript 操作 HTML DOM[/b]


[b]JavaScript HTML DOM - 改变 HTML[/b]
改变 HTML 输出流
<script>
document.write(Date());
</script>


[b]改变 HTML 内容[/b]
document.getElementById(id).innerHTML=new HTML

实例:
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>


[b]改变 HTML 属性[/b]
document.getElementById(id).attribute=new value

实例:
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>


[b]改变 HTML 样式[/b]
document.getElementById(id).style.property=new style

实例:
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>

实例:
<h1 id="id1">My Heading 1</h1>
<button type="button" οnclick="document.getElementById('id1').style.color='red'">
点击这里
</button>


[b]JavaScript HTML DOM 事件[/b]
οnclick=JavaScript

实例:
<h1 οnclick="this.innerHTML='谢谢!'">请点击该文本</h1>

实例:
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 οnclick="changetext(this)">请点击该文本</h1>
</body>
</html>


[b]HTML 事件属性[/b]
<button οnclick="displayDate()">点击这里</button>

[b]使用 HTML DOM 来分配事件[/b]
<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>


[b]onload 和 onunload 事件[/b]
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

实例:
<body οnlοad="checkCookies()">


[b]onchange 事件[/b]
[b]onmouseover 和 onmouseout 事件[/b]
[b]onmousedown、onmouseup 以及 onclick 事件[/b]


[b]JavaScript HTML DOM 元素（节点）[/b]

[b]创建新的 HTML 元素[/b]
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

实例:
<div id="div1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</div>

<script>
var para=document.createElement("p"); //建新的 <p> 元素
var node=document.createTextNode("这是新段落。"); //先创建文本节点
para.appendChild(node); //向 <p> 元素追加这个文本节点

var element=document.getElementById("div1"); //找到一个已有的元素
element.appendChild(para); //向这个已有的元素追加新元素
</script>


[b]删除已有的 HTML 元素[/b]

实例:
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var parent=document.getElementById("div1"); //找到 id="div1" 的元素
var child=document.getElementById("p1"); //找到 id="p1" 的 <p> 元素
parent.removeChild(child); //从父元素中删除子元素
</script>

[b]DOM 需要清楚您需要删除的元素，以及它的父元素。[/b]
可以简化为：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);


参考原文：[url]http://www.w3school.com.cn/js[/url]
jie310600
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解JavaScript操作HTML DOM的基本方式
10-23
JavaScript操作HTML DOM是一种核心技能，它允许开发者动态地更新、添加和删除网页内容。HTML DOM，全称为“文档对象模型”，是一种W3C标准，它为HTML和XHTML文档提供了一个结构化的表示，并且允许使用JavaScript或...
JavaScript操作HTML DOM节点的基础教程
10-22
主要介绍了JavaScript操作HTML DOM节点的基础入门教程,包括对节点的创建修改删除等操作,还特别提到了其中appendChild()与insertBefore()插入节点时需注意的问题,需要的朋友可以参考下
JavaScript DOM操作
好好学习天天向上
03-27 5112
文章目录JavaScript DOM操作事件的冒泡和事件的委托事件冒泡事件委派 JavaScript DOM操作 事件的冒泡和事件的委托 事件冒泡 同一片区域，给其中的元素都绑定了点击事件，点击公共区域时，触发顺序？ 假设如图，从span->box1->body依次触发 事件的冒泡(Bulle)：事件的向上传导，事件在目标元素处理后，会由内向外的一层层传递 在开发中大部分情况冒泡都是有用了，如果不需要可以通过事件对象event.cancelBubbl取消冒泡。 let span = docum
【JavaScript 】DOM操作快速入门
Joker_ZJN的博客
10-30 2290
相信我，十分钟，快速入门JavaScript dom操作。
JavaScript DOM—节点操作
Jin_Xiang123的博客
01-04 1420
文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。
JavaScript之DOM
qq_43751200的博客
06-05 1752
DOM
一文吃透JavaScript中的DOM知识及用法
不迁怒，不贰过。小知识，大智慧。
11-12 4168
一文带你吃透DOM的知识和用法，绝对实用。 DOM是网页的核心结构，无论是HTML、CSS还是JavaScript，都和DOM 密切相关。HTML的作用是构建DOM结构，CSS的作用是设定样式，JavaScript的作用是读取以及控制、修改DOM。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
Javascript之BOM与DOM讲解
热门推荐
晨港飞燕的专栏
05-13 8万+
一.Javascript组成JavaScript的实现包括以下3个部分：ECMAScript(核心)描述了JS的语法和基本对象。文档对象模型 （DOM）处理网页内容的方法和接口浏览器对象模型（BOM）与浏览器交互的方法和接口javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格迥异,IE 扩展了 BOM，...
JavaScript中DOM操作
10-12 3874
目录 DOM介绍 获取元素 操作元素 节点操作 DOM介绍 JavaScript一共包括三部分，分别是ECMAScript也就是JavaScript基础、DOM和BOM，前面的文章已经讲过ECMAScrit了、这里是ECMAScript的链接：https://blog.csdn.net/HeZhiYing_/article/details/102218018 今天来将一下DO...
Javascript中的DOM操作事件
m0_56457325的博客
04-11 857
概念： DOM是指文档对象模型，是HTML和XML文档的编辑接口 HTMLDOM定义了访问和操作HTML文档的标准方法。 DOM以树结构表达HTML文档 Javascript分三个部分： ECMAScript标准：JS的基本的语法 DOM：documentobjectmodel文档对象模型操作页面的元素 BOM：BrowserobjectModel浏览器对象模型操作的是浏览器 DOM：文档对象模型 文档：把一个html文件看成是一个文档，由于万物皆对象...
JavaScript：DOM对象
盒马的博客
12-23 1286
讲解JavaScript中的DOM对象，并介绍其获取，修改方式
c#操作html dom元素,C#获取与修改HTML DOM元素信息
weixin_39636610的博客
06-23 1413
用C#和JavaScript交互首先要解决C#读取HTML DOM元素的问题。 在System.Windows.Browser命名空间下，有一个HtmlDocument、HtmlPage、HtmlElement等类，可以用来读取HTML DOM元素。其读取方法和JavaScript如出一辙。引用内容： //初始化一个document HtmlDocument document = HtmlPage...
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
javascript中HTMLDOM操作详解
10-25
主要介绍了javascript中HTMLDOM操作详解,需要的朋友可以参考下
使用 React 和 Redux 进行井字游戏并附带源代码.zip
最新发布
07-24
项目：使用 React 和 Redux 进行井字游戏并附带源代码 使用 react 和 redux 的井字游戏是一个简单的 react 项目。整个项目都是使用 react components 和redux制作的。游戏很简单，玩法也很多。要运行此项目，您必须先安装 NodeJS。 关于项目 井字游戏反应而 redux 是使用ReactJS开发的。说到这个游戏，它具有高级功能和游戏玩法。要运行此项目，首先，您必须安装费用到您的系统。然后运行npm安装然后开始运行npm开始。游戏启动后，您可以选择不同的游戏选项。您还可以选择所需的网格框数量。此外，您还可以选择对手的类型。 要运行此项目，您需要 在计算机上安装NodeJS 并使用现代浏览器，例如 Google Chrome、  Mozilla Firefox。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
使用 JavaScript 编写的专注力游戏（附源代码）.zip
07-24
项目：JavaScript 中的专注力游戏（附源代码） 专注力游戏是一个使用 JavaScript、CSS 和 HTML 开发的简单项目。这款游戏很有趣。玩家必须点击移动的框并获得分数。要点击正确的位置，玩家需要在这个游戏中集中注意力。这款游戏可以帮助玩家练习以进一步增强他们的专注力。 游戏制作 这个游戏项目仅使用 HTML、CSS 和 JavaScript。说到这个游戏的特点，用户必须单击移动框并得分。游戏有三种模式：简单、中等和困难。游戏的 PC 控制非常简单。您只需使用光标单击移动框的碎片即可。 该游戏包含大量的 javascript 以确保游戏正常运行。 如何运行该项目？ 要运行此游戏，您不需要任何类型的本地服务器，但需要浏览器。我们建议您使用现代浏览器，如 Google Chrome 和 Mozilla Firefox。要玩游戏，首先，单击 index.html 文件在浏览器中打开游戏。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，需要具备一定基础知识。 注意：如果装有360等杀毒软件，可能会出现误报的情况，源码本身并无病毒，使用源码时可以关闭360，或者添加信任。
人脸识别方案资料61EDA-C1590.zip
07-24
人脸识别方案资料61EDA_C1590.zip
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明）
07-24
316、基于DK124设计的离线式开关电源设计12V 2A（原理图、PCB图、BOM表、设计说明） 该设计为DK124控制的开关电源，实现12V 2A输出； 功能： 1、使用DK124核心控制； 2、反激式开关电源拓扑设计； 3、实现12V 2A输出； 4、市电输入； 5、整流、滤波、变压器等电路； 6、原理图、PCB图、BOM表、设计说明；
基于Springboot和Vue的生鲜超市管理的设计与实现源码 生鲜超市管理的设计与实现代码（优秀毕业设计）
07-24
生鲜超市管理的设计与实现源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
JavaScript操作HTML网页实战：DOM Enlightenment入门指南
《DOM Enlightenment》是Cody Lindley撰写的一本关于JavaScript操作HTML网页的入门级书籍，旨在帮助读者深入理解并熟练运用DOM（Document Object Model）技术。DOM是网页内容的一种结构化表示，它允许通过编程方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值