JavaScript HTML DOM - 改变HTML元素的内容和属性
JavaScript HTML DOM - 改变 HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容，如获取当前日期和时间。
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容，如获取当前日期和时间。
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
document.write(Date());提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML下面的实例改变了 <p> 元素的内容：
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>上面的段落被一条 JavaScript 脚本修改了。</p>
</body>
</html>
下面的实例改变了 <h1> 元素的内容：
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
<p>"Old Header" 已被修改为 "New Header"。</p>
</body>
</html>
注释：使用 HTML DOM 来获得 id="header" 的元素，JS 更改此元素的内容 (innerHTML)。改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value下面的实例改变了 <img> 元素的 src 属性：
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原始图片是 smiley.gif，但是已被修改为 landscape.jpg。</p>
</body>
</html>
注释：使用 HTML DOM 来获得 id="image" 的元素，JavaScript 更改此元素的属性。 2016-07-28 2065人浏览
评论