src/JavaScript/JS事件/根据id获取元素.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>根据id获取页面中的某个节点</title>
	</head>
	<body>
		
		<!-- 脚本快 -->
		<script type="text/javascript">
			function getDivElt(){
				/* 获取div节点对象 */
				/* 
					document对象是JS内置的对象，全部小写，可以直接拿来使用。
					document对象代表的是浏览器窗口中的网页(文档)
					document代表整个HTML文档。
					DOM树：
						对于document来说是一个HTML文档。
						对于这个文档来说我们称为DOM树。
						DOM树上有很多节点，每一个节点都有ID属性。
						获取DOM树上的一个节点，可以根据id来获取。
					window对象是JS内置的对象，全部小写，可以直接拿来使用。
					window对象代表当前浏览器窗口。

					在JS当中有一个内置的隐含的对象叫做：document
					document代表整个HTML文档

					在JS当中有一个内置的隐含的对象叫做：window
					window代表整个浏览器窗口

					window对象是BOM的顶级对象，BOM中的老大。
					document对象是DOM的顶级对象，DOM中的老大。
					ECMAScript:JS语法的核心
					DOM:是对网页中文档中的节点进行增删改。
					BOM:操作浏览器窗口的，列如：前进、后退、地址栏、关闭窗口


					严格意义上讲，window是包含document的。
				 */
				var mydivElt = document.getElementById("mydiv");
				console.log(mydivElt);
				
				var usernameElt = document.getElementById("username");
				 console.log(usernameElt);
			}
		</script>
		
		<!-- div节点对象 -->
		<div id="mydiv">我是一个div对象</div>
		
		<!-- input输入域 -->
		
		<input type="text" id="username"/>
		
		<input type="button" value="获取div节点元素" onclick="getDivElt()"/>

		<hr>


		<intput  type="button" id="mybtn" value="按钮"/>
		<script type="text/javascript">
			alert("阻止程序的执行！");

			var mybtnElt = document.getElementById("mybtn");

			console.log(mybtnElt);
			alert(mybtnElt);

			// 重点：在JS当中，当获取了一个节点之后，这个节点中有什么属性你就可以“点”什么。
			// 可以改变mybtnElt对象中的 type属性
			mybtnElt.type = "checkbox";
			// 可以改变mybtnElt对象中的 value 属性，也可以改变id属性，但是没有意义。
			mybtnElt.value = "我是一个按钮对象";
		</script>

	</body>
</html>