PHP MySQL jquery HTML CSS
HTML DOM 教程 DOM 参考手册
HTML DOM 教程 HTML DOM 简介 HTML DOM 节点 HTML DOM 方法 HTML DOM 属性 HTML DOM 访问 HTML DOM - 修改 HTML DOM - 修改 HTML 内容 HTML DOM - 元素 HTML DOM - 事件 HTML DOM 导航 HTML DOM总结 HTML DOM 实例 HTML DOM 对象

HTML DOM 教程

HTML DOM 教程 HTML DOM 简介 HTML DOM 节点 HTML DOM 方法 HTML DOM 属性 HTML DOM 访问 HTML DOM - 修改 HTML DOM - 修改 HTML 内容 HTML DOM - 元素 HTML DOM - 事件 HTML DOM 导航 HTML DOM总结 HTML DOM 实例

DOM 参考手册

HTML DOM 对象
首页 > 大前端 > HTML >HTML DOM中文参考手册

HTML DOM中文参考手册

收藏
分享
浏览23435
更新时间2022-04-13
HTML DOM 访问 HTML DOM - 修改 HTML 内容

修改 HTML = 改变元素、属性、样式和事件。

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

  • 改变 HTML 内容

  • 改变 CSS 样式

  • 改变 HTML 属性

  • 创建新的 HTML 元素

  • 删除已有的 HTML 元素

  • 改变事件（处理程序）

在接下来的章节，我们会深入学习修改 HTML DOM 的常用方法。

创建 HTML 内容

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

下面的例子改变一个 <p> 元素的 HTML 内容：

实例

<html><!DOCTYPE html>
<html>
<body>

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

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

lamp 我们将在下面的章节为您解释例子中的细节。

改变 HTML 样式

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

下面的例子改变一个段落的 HTML 样式：

实例

<html><!DOCTYPE html>
<html>
<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 元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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");
element.appendChild(para);
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


HTML DOM 访问 HTML DOM - 修改 HTML 内容

相关视频

更多

免费

前端入门_HTML5
初级前端入门_HTML5

65.1万次学习

收藏

免费

30分钟学会网站布局
初级30分钟学会网站布局

24.6万次学习

收藏

免费

CSS视频教程-玉女心经版
初级CSS视频教程-玉女心经版

41.3万次学习

收藏

免费

JavaScript极速入门_玉女心经系列
初级JavaScript极速入门_玉女心经系列

76.8万次学习

收藏

科技资讯

更多
苹果iPhone Duo跑分曝光：性能看齐iPhone 18 Pro
曝iPhone18标准版计划11月底排产 2027年春季发布
苹果首款折叠屏iPhone Duo维修价公布：内屏要7998元！
全球多个城市遭遇地面沉降 墨西哥城局部下沉速率最高
192GB大容量内存超频达成!七彩虹X870E主板超频首秀
iPhone 18 Pro开售不足一月曝出多个问题：部分机型褪色、Face ID异常重启、相机出现绿影
Revel v0.21.0引入Session Engine与HTTP Mux
Revel v1.0.0加入Go module与SameSite Cookie支持
Revel v1.1.0加入SIGTERM优雅关闭等维护更新

24小时阅读榜

更多

1

Pygame Zero 中 Rect 对象的正确创建与使用方法

2

如何优化使用 useContext 的 React 组件（避免不必要的重渲染）

3

让页面中任意位置的多个按钮自动对齐为最宽按钮的宽度

4

如何在 PHP 中安全修改 TXT 文件中指定用户的密码

5

Go 中变量作用域结束后的内存行为详解：从循环与 select 语句说起

6

让页面中任意位置的多个按钮自动统一为最宽按钮的宽度

7

如何在 Polars 中将列表的列表正确导入为多列 DataFrame

8

如何优化使用 useContext 的 React 组件

9

Pandas 中高效实现 VLOOKUP 类查找并构建结果 DataFrame

10

如何正确实现最长回文子串算法（兼顾奇偶长度）

11

Go 中变量作用域结束后的内存管理与性能实践

12

如何正确使用 PHP ZipArchive 解压 ZIP 文件

13

jQuery 脚本因 PHP 变量未加引号导致 JS 解析错误的解决方案

14

如何在页面加载完成时自动点击指定按钮

15

如何在小屏幕下完整显示固定头部中的下拉菜单所有选项

精品课程

更多
PHP实战天龙八部之微信支付视频教程
PHP实战天龙八部之微信支付视频教程

共5课时

18.1万人学习

PHP实战天龙八部之仿爱奇艺电影网站
PHP实战天龙八部之仿爱奇艺电影网站

共49课时

82.4万人学习

前端入门_HTML5
前端入门_HTML5

共29课时

65.1万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

41.4万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

76.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

64.3万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

24.4万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

36.4万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

133.8万人学习

热门下载

更多
phpStudy 2018最新版
phpStudy 2018最新版

集成PHP7，16种组合，超全大合集

下载
vc9-vc14（32+64位）运行库合集（链接在下方）
vc9-vc14（32+64位）运行库合集（链接在下方）

phpStudy安装所需运行库集合下载

下载
VC9 32位
VC9 32位

VC9 32位 phpstudy集成安装环境运行库

下载
VC11 32位
VC11 32位

VC11 32位 phpstudy集成安装环境运行库​

下载
php程序员工具箱完整版
php程序员工具箱完整版

程序员工具箱 v1.0 php集成环境

下载
VC14 32位
VC14 32位

VC14 32位 phpstudy安装环境运行库

下载
SublimeText3汉化版
SublimeText3汉化版

中文版，非常好用

下载
Notepad++ Windows版
Notepad++ Windows版

Notepad++ 8.9.7 Windows版官方安装包，适合 Windows 用户进行代码编辑、文本处理、语法高亮和插件扩展配置。

下载
phpStudy V8.1（Win64位）（已支持php8）
phpStudy V8.1（Win64位）（已支持php8）

Win64位，支持php多版本共存

下载
提交