《JavaScript视频14》DOM-CSDN博客

本文链接：https://blog.csdn.net/Han_python/article/details/113092760

DOM

Document Object Model文档对象模型

JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作web页面

文档：整个html文档
对象：将网页中的每个部分都转换为一个对象
模型：表示对象之间的关系

HTML DOM 树

节点Node：构成我们网页的最基本组成部分，网页中的每一个部分都是一个节点：

元素节点：html标签
属性节点：元素的属性
文本节点：html中的文本内容
文档节点：整个html文档

浏览器已经为我们提供了文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页，这个节点就是document。

比如要获取一个button对象：

<body> 
	<button id="btn">我是一个按钮</button>
</body>
<script type="text/javascript">
	var btn = document.getElementById("btn");
	btn.innerHTML = "I am Button";
	btn.onclick = function(){
		alert("你点我干嘛");
	};
</script>

innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义。

如果要读取元素节点属性，直接使用：元素.属性名
例如元素.id 元素.name 元素.value

但是class不能采用这种属性，因为class是保留字，如果想要读取元素的class属性时，需要使用：

元素.className

事件

onload事件：一张页面或者一幅图像完成加载。支持该事件的JS对象有：image、layer、window

可以使用window.onload = function(){};来使script中的代码在页面加载完成之后执行。

<script type="text/javascript">
	window.onload = function(){
		var btn = document.getElementById("btn");
		btn.innerHTML = "I am Button";
		btn.onclick = function(){
			alert("你点我干嘛");
		};	
	};
</script>