一篇文章带你了解JavaScript Html DOM html

前端进阶者

发布于 2021-01-22 10:10:18

6090

发布于 2021-01-22 10:10:18

文章被收录于专栏：前端进阶交流

HTML DOM允许JavaScript来修改HTML元素的内容。

一、修改HTML输出流

JavaScript可以创建动态的HTML内容。

/*Date: Sat Feb 11 2017 00:17:17 GMT+0800 (中国标准时间)*/

使用JavaScript, document.write() 可以直接写到HTML输出流。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;">

        <script>
            document.write(Date());
</script>
    </body>
</html>

文档加载以后，不要使用document.write()，它将覆盖文档。

二、改变HTML内容

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

修改HTML元素的内容，使用如下语法:

document.getElementById(id).innerHTML = new HTML

这个实例修改段落元素<p>的内容:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;">

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

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

        <p>上面的段落被脚本改变。</p>

    </body>
</html>

这个实例修改 <h1> 元素内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;">

        <h1 id="header">旧标题</h1>

        <script>
            var element = document.getElementById("header");
            element.innerHTML = "新标题";
</script>

        <p>"就标题" 被修改为"新标题"</p>

    </body>
</html>

代码解析

在HTML文档中包含一个id="header" 的<h1>元素。
我们使用HTML DOM得到id="header"元素。
JavaScript 修改这个元素的内容 (innerHTML)。

三、修改属性值

改变一个HTML属性的值，使用如下语法:

document.getElementById(id).attribute = new value

此示例修改<img>元素的src属性:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;">

        <img id="image" src="img/17I_hd.mp4.gif" width="160" height="120">

        <script>
            document.getElementById("image").src ="img/musicimg.png";
</script>

        <p>The original image was smiley.gif, but the script changed it to musicimg.png</p>

    </body>
</html>

代码解析

HTML文档包含一个id="myImage"的<img>元素。
我们使用HTML DOM 得到id="myImage"的元素。
JavaScript 修改元素的src属性由 "img/17I_hd.mp4.gif" 改为 "img/landscape.jpg" 。

四、总结

本文基于JavaScript基础，介绍了通过JavaScript修改Html输出流，改变Html内容，介绍了如何修改属性值，以及在for...in 语句遍历对象的属性的应用，都做了详细的讲解。通过用丰富的案例帮助大家更好理解。

希望大家可以根据文章的内容，积极尝试，有时候看到别人实现起来很简单，但是到自己动手实现的时候，总会有各种各样的问题，切勿眼高手低，勤动手，才可以理解的更加深刻。

使用JavaScript 语言，方便大家更好理解，希望对大家的学习有帮助。

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-09-29，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

html

本文分享自前端进阶学习交流微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

javascript

html

登录后参与评论

0 条评论

热度