JavaScript学习笔记（DOM-改变HTML）

客官°小女子只卖身不卖艺 2023-02-12 12:20 35阅读 0赞

HTML DOM 允许Javascript改变HTML元素的内容。

### 改变 HTML 输出流 ###

JavaScript 能够创建动态 HTML 内容：  
Tue May 26 2020 09:07:47 GMT+0800 (中国标准时间)  
在 JavaScript中，document.write()可用于直接写入HTML输出流中：

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

![在这里插入图片描述][20200526095603706.png]  
千万不要在文档加载后使用document.write()。这么做会覆盖文档。

--------------------

### 改变HTML内容 ###

修改HTML文档内容最简单的方法是，使用innerHTML属性。  
如需要修改HTML元素的内容，请使用此语法 ：

document.getElementById(id).InnerHTML = new text

本例修改了p元素的内容：  
例子：

<body>
        
        <h2>JavaScript 可以更改 HTML</h2>
    
        <p id="p1">Hello World!</p>
    
        <script>
            document.getElementById("p1").innerHTML = "hello 你是不是傻！"
        </script>
    </body>

![在这里插入图片描述][20200526101114183.png]  
例子解释：

*  上面的HTML文档包含id="p1"的p元素
 *  我们使用HTML DOM来获取id="p1"的这个元素
 *  JavaScript把该元素的内容(innerHTML)更改为”hello 你是不是傻!“  
    本例修改了h1元素的内容：  
    实例：

<body>
        
        <h2 id="id02">旧标题</h2>
    
    
        <script>
            var element = document.getElementById("id02");
            element.innerHTML = "新标题";
        </script>
    
        <p>JavaScript 将“旧标题”更改为“新标题”。</p>
    </body>

![在这里插入图片描述][20200526101714203.png]  
例子解释：

*  上面的HTML含有id="header"的一个h1元素
 *  我们使用了HTML DOM来获取id=”header“的元素
 *  JavaScript更改此元素的内容(innerHTML)

--------------------

### 改变属性的值 ###

语法格式：

document.getElementById(id),attribute = new value

本例修改了img元素的src属性的值：  
例子：

<body>
        
        <img id="image" src="img/girl8.jpg">
        <script>
            document.getElementById("image").src = "img/s6.png";
        </script>
    
        <p>原始图像是<b> irl8.jpg</b>,但脚本将其更改为<b>s6.png</b></p>
    </body>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70]  
例子解释：

*  上面的HTML文档含有一个id="myImage"的img元素
 *  我们使用HTML DOM 来获取id="myImage"的元素
 *  JavaScript把此元素的src属性从"girl8.jpg"更改为"s6.png"

[20200526095603706.png]: https://img-blog.csdnimg.cn/20200526095603706.png
[20200526101114183.png]: https://img-blog.csdnimg.cn/20200526101114183.png
[20200526101714203.png]: https://img-blog.csdnimg.cn/20200526101714203.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200526103504416.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjg5MzA4NQ==,size_16,color_FFFFFF,t_70