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

回复“前端”即可获赠前端相关学习资料

今

日

鸡

汤

散入珠帘湿罗幕，狐裘不暖锦衾薄。

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 语言，方便大家更好理解，希望对大家的学习有帮助。

------------------- End -------------------

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。