HTML DOM 修改 HTML 内容

最新推荐文章于 2023-02-27 23:06:08 发布
最新推荐文章于 2023-02-27 23:06:08 发布
阅读量522 收藏
点赞数
分类专栏： HTML DOM 文章标签： HTML DOM 修改HTML内容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80279666
版权

改变HTML 内容

   改变元素内容的最简单的方法是使用 innerHTML 属性。

   下面的例子更改 <p>元素的HTML 内容：

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

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

<p>段落通过脚本来修改内容。</p>

</body>
</html>

 

改变 HTML 样式

 

   通过 HTML DOM，您能够访问HTML对象的样式对象

   下面的例子更改段落的HTML样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</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>

</body>
</html>

 

使用事件

 

   HTML DOM 允许您在事件发生时执行代码。

   当 HTML元素"有事情发生"时，浏览器就会生成事件：

   ·在元素上点击

   ·加载页面

   ·改变输入字段

   下面两个例子在按钮点击时改变<body>元素的背景色：

<!DOCTYPE html>
<html>  
<head>  
    <meta charset="utf-8">  
    <title>自学教程(如约智惠.com)</title>  
</head>  
<body>  
	<input type="button" onclick="document.body.style.backgroundColor='lavender'" value="修改背景颜色">
</body>  
</html>

 

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

<script>
function ChangeBackground()
{
    document.body.style.backgroundColor="lavender";
}
</script>

<input type="button" onclick="ChangeBackground()" value="修改背景颜色" />

</body>
</html>

下面的例子在按钮被点击时改变 <p> 元素的文本：

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

<p id="p1">Hello world!</p>

<script>
function ChangeText()
{
    document.getElementById("p1").innerHTML="Hello Runoob!";
}
</script>

<input type="button" onclick="ChangeText()" value="修改文本" />

</body>
</html>

参考：

https://www.yuque.com/docs/share/ce0e49dd-35a7-4ee2-9f82-037416e885a3

冷月醉雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+js实现同页面修改信息效果
07-24
html+js实现同页面修改信息效果。用户体验好，同一个页面用户个人中心安全设置
HTML DOM Viewer
12-12
说明：用来查看DOM的工具，可以当作手册来用，也可以用来Debug,很方便的说 把代码copy到要调试的页面中，浏览时点击DOM Tester链接就会打开DOM查看，双击展开对象，右边的文本框里显示的是属性值，修改文本框会改变...
通过修改 DOM 的文本内容，动态改变网页的内容。
MINX_minx的博客
10-31 408
innerText.innerHTML两者的区别
html最后修改的信息,修改信息.html
weixin_42516575的博客
06-10 123
修改信息#toxiang {display: none;}#kong {content: "";display: none;width: 100px;height: 100px;border-radius: 50%;background-image: url(images/1.png);position: absolute;top: 10px;left: 8px;opacity: 0.5;}img...
html 修改资料,HTML DOM 修改 HTML 内容 - HTML DOM 基础教程
weixin_30458447的博客
06-07 188
通过 HTML DOM，JavaScript 能够访问 HTML 文档中的每个元素。改变 HTML 内容改变元素内容的最简单的方法是使用 innerHTML 属性。下面的例子更改 元素的 HTML 内容：Hello World!document.getElementById("p1").innerHTML="新文本!";段落通过脚本来修改内容。改变 HTML 样式通过 HTML DOM，您能够访...
操作dom元素修改文本属性
m0_47733490的博客
03-16 1037
根据需求，后端将整段html代码传给前端，前端通过一些属性侧边栏来配置其中的内容 这里前端我用ref节点来渲染整段代码，然后根据后端返回的代码中每一个标签有自己的id，用html原生的方法来获取dom节点，然后拿到dom节点的属性再进行赋值，这里我用watch监听，当某个属性发生变化的时候再重新给标签赋值 最后就获取最外层div的dom节点，然后将他的outerHTML代码再与后端交互将后端库里的替换掉就可以了 ...
html dom修改代码
06-23
本篇将深入探讨如何利用HTML DOM来修改这些问题。 首先，理解HTML空行的来源至关重要。HTML中，连续的空格、制表符或换行符在渲染时会被浏览器合并成一个空格。然而，有时候空行出现在不应有的地方，例如在CSS样式...
DOM.zip_HTML dom_zip
09-23
文档对象模型（DOM）是HTML和XML文档的标准表示方法，它允许程序员和脚本语言（如JavaScript）通过结构化的方式访问和操作文档内容。DOM是一个树状结构，其中每个节点代表文档的一部分，从根节点到叶节点分别对应...
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
10-20
本篇文章将详细讲解如何利用DOM操作查找和修改HTML元素的内容及属性。 首先，理解DOM（Document Object Model）是至关重要的。DOM是一个标准，它将HTML或XML文档解析为一个由节点组成的树形结构。每个HTML元素在DOM...
HtmlDom.rar_HTML dom_PHP HTMLdom
09-22
标题“HtmlDom.rar_HTML dom_PHP HTMLdom”指出这个压缩包文件包含与HTML DOM和PHP中处理DOM相关的资源。文件“HtmlDom.chm”很可能是一个帮助文件，提供了关于PHP HTML DOM操作的详细指南。 PHP HTML DOM的核心是`...
HTML个人信息注册页面
12-18
HTML设计一个个人信息注册页面 使用HTML设计一个个人信息注册页面，如下图所示，其中页面的排版可采用或+CSS。当点击“提交”按钮时，使用JavaScript编程在当前页面显示录入信息，并且实现籍贯和城市的级联。（选做：用JQuery实现页面功能）
dom html内容,HTML DOM 改变 HTML 内容
weixin_42377790的博客
06-07 131
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。改变 HTML 输出流JavaScript 能够创建动态的 HTML 内容：今天的日期是：Thu Feb 25 2016 19:25:10 GMT+0800在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。实例document.write(Date());绝对不要在文档加载...
DOM基础（基础操作元素修改内容和样式）
最新发布
weixin_57920269的博客
02-27 1424
设置基础的内容、链接、样式
html dom 修改class,[HTML] HTML DOM classList 属性
weixin_30253461的博客
06-04 223
菜鸟教程(runoob.com).my-style {width: 300px;height: 50px;background-color: coral;color: white;font-size: 25px;}我是一个 DIV 元素。----------------------resultadd "my-style" 类remove "my-style" 类toggle "my-style" ...
html改变内容吗,HTML DOM 改变 HTML 内容
weixin_36040020的博客
06-05 143
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。改变 HTML 输出流JavaScript 能够创建动态的 HTML 内容：今天的日期是：Thu Feb 25 2016 19:25:10 GMT+0800在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。实例document.write(Date());绝对不要在文档加载...
改变 HTML 元素的内容
chuanshu7692的博客
11-25 155
<!DOCTYPEhtml> <html> <body> <h1>我的第一段JavaScript</h1> <pid="demo"> JavaScript能改变HTML元素的内容。 </p> ...
4、jQuery修改DOM（Head First笔记）
罗惠东的博客
06-10 729
jQuery remove 与 jQuery detach jQuery parent jQuery children jQuery prev jQuery next jQuery replaceWith jQuery first过滤器 jQuery eq过滤器 jQuery last过滤器 jQuery slice过滤器 jQuery filter过滤器 jQuery not过滤器 jQuery
cef Renderer 进程修改html DOM
miao136614的博客
10-14 2843
cef Renderer 进程修改html DOM 在参考: https://blog.csdn.net/foruok/article/details/50799518 https://blog.csdn.net/chenlycly/article/details/53355670 内容后 实现了在CefDOMVisitor::Visit(CefRefPtr document) 修改 DOM功能...
CEF中访问修改HTML DOM元素
huang714的专栏
03-25 2528
有时你可能想在C++代码中直接操作HTML中的某个元素，比如改变某个按钮的状态（文字、颜色）等，此时可以使用CEF提供的CefDomVisitor、CefDOMDocument、CefDomNode这三个类，包含cef_dom.h即可。 我们可以用它们完成下列任务： 使用DOM模型访问HTML的各种节点(Element、Attribute、Text、CDATA、Comment、Docum...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值