上一节:
下一节:

  JavaScript DOM HTML

  • 更改HTML输出流

    JavaScript可以创建动态HTML内容：
    日期：
    在JavaScript中，document.write()可以用来直接写入HTML输出流： 
    <!DOCTYPE html>
<html>
<body>

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

</body>
</html>
    尝试一下
    document.write()装入文档后切勿使用。它会覆盖文档。

  • 更改HTML内容

    修改HTML元素内容的最简单方法是使用innerHTML属性。要更改HTML元素的内容，请使用以下语法： 
    document.getElementById(id).innerHTML = new HTML
    此示例更改<p>元素的内容： 
    <html>
<body>

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

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

</body>
</html>
    尝试一下
    示例说明：
    • 上面的HTML文档包含一个id="p1"的<p>元素
    • 我们使用HTML DOM来获取id="p1"的元素
    • JavaScript innerHTML将该元素的内容更改为“New text！”
    此示例更改<h1>元素的内容： 
    <!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>
    尝试一下
    示例说明：
    • 上面的HTML文档包含一个id="id01"的<h1>元素
    • 我们使用HTML DOM来获取id="id01"的元素
    • JavaScript innerHTML将该元素的内容更改为“New Heading”

  • 更改属性的值

    要更改HTML属性的值，请使用以下语法： 
    document.getElementById(id).attribute = new value
    此示例更改<img>元素的src属性的值： 
    <!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>
    尝试一下
    示例说明：
    • 上面的HTML文档包含一个id="myImage"的<img>元素
    • 我们使用HTML DOM来获取id="myImage"的元素
    • JavaScript将元素的src属性从“smiley.gif”更改为“landscape.jpg”
上一节:
下一节: