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”