DOM
文档对象模型(Document Object Model,简称DOM)
查找html元素
通过id查找
var x=document.getElementById("intro");
通过标签名查找 HTML 元素
var x=document.getElementById("main");var y=x.getElementsByTagName("p");
先找到id为main的元素,再在main中找到标签为<p>的元素
通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
通过HTML DOM 让 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
通过Document.write()改变html输出流。
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
改变html内容
通过document.getElementById("id").innerHTML="新文本";来改变html内容。
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
改变html属性
通过document.getElementById("id").attribute="新属性";
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
改变html样式
通过document.getElementById("id").style.stylename="newstyle";
例
document.getElementById("p2").style.color="blue";
通过触发事件来执行代码。
例
<h1 id="id1">我的标题 1</h1>
<button type="button"
οnclick="document.getElementById('id1').style.color='red'">
点我!</button>
<button type="button"
οnclick="document.getElementById('id1').style.color='red'">
点我!</button>