一、改变 HTML
1.改变 HTML 输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
document.write(Date());
2.改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
3.改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值
<script> document.getElementById("image").src="landscape.jpg"; </script>
二、HTML DOM - 改变CSS
1.改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
<script> document.getElementById("p2").style.color="blue"; </script>
2.使用事件
HTML DOM 允许我们通过触发事件来执行代码。
<button type="button" onclick="document.getElementById('id1').style.color='red'"> 点我!</button>
3.Visibility
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" /> <input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
三、HTML DOM 事件
1.
onclick=JavaScript
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
2.
<!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="Ooops!"; } </script> </head> <body> <h1 onclick="changetext(this)">点击文本!</h1> </body> </html>
3.
<button onclick="displayDate()">点这里</button>
4.
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script>
四、HTML DOM EventListener
1.addEventListener() 方法
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
 |
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。 |
|---|