DOM是文档对象化模型（Document Object Model）的简称。DOM Tree是指通过DOM将HTML页面进行解析，并生成的HTML tree树状结构和对应访问方法。
HTML DOM 模型被构造为对象的树
DOM-树
知识体系
思维导图
改变HTML内容
document.write();可用于直接向 HTML 输出流写内容。
- 绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。
document.getElementById(id).innerHTML=new HTML
- 改变 HTML 元素的内容
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
改变HTML属性
document.getElementById(id).attribute=new value
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
document.getElementById(id).attribute=new value
- 改变 HTML 元素的属性
<style>
.a{
width: 200px;
height: 300px;
background-color: bisque;
}
.b{
width: 200px;
height: 300px;
background-color: black;
}
</style>
<div id="example" class="a"></div>
<input type="button" onclick="changeC()" value="改变颜色">
<script>
function changeC() {
document.getElementById("example").className = "b";
}
</script>
HTML DOM 改变 CSS
- 改变 HTML 元素的样式
document.getElementById(id).style.property=new style
<div id="example" class="a"></div>
<script>
document.getElementById("example").style.color="blue";
</script>
