更多课程 选择中心


Web培训

400-111-8989

Web培训

web前端培训中HTML DOM - 修改的教程


这篇文章讲述的是web前端培训中HTML DOM - 修改的教程。达内web前端培训班正在火热招生中,同学你要不要加入我们呐?在这里小编每天也会分享一下干货给大家。那么今天说道的就是web前端培训课程中的章节。

HTML DOM - 修改

DOM 访问

DOM 内容

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

修改 HTML 元素

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

改变 HTML 内容

改变 CSS 样式

改变 HTML 属性

创建新的 HTML 元素

删除已有的 HTML 元素

改变事件(处理程序)

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

创建 HTML 内容

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

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

实例

<html>

<body>

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

<script>

document.getElementById("p1").innerHTML="New text!";

</script>

</body>

</html>

亲自试一试

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

改变 HTML 样式

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

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

实例

<html>

<body>

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

<script>

document.getElementById("p2").style.color="blue";

</script>

</body>

</html>

亲自试一试

创建新的 HTML 元素

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

实例

<div id="d1">

<p id="p1">This is a paragraph.</p>

<p id="p2">This is another paragraph.</p>

</div>

<script>

var para=document.createElement("p");

var node=document.createTextNode("This is new.");

para.appendChild(node);

var element=document.getElementById("d1");

element.appendChild(para);

</script>

免责声明:内容和图片源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容

预约申请免费试听课

填写下面表单即可预约申请免费试听! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:web前端培训中HTML DOM 方法的教程
下一篇:web前端开发中CSS Id 和 Class的教程

Web前端开发培训学习

微信小游戏怎么开发?

Web前端工程师需要掌握哪些知识?

html怎么复制css样式

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

Copyright © 2023 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省