JS之BOM操作 window.onload何时使用 document.getElementsByTagName() document.getElementById

news/2024/7/19 16:29:47 标签: js

JS-BOM
BOM 就是浏览器的对象模型，浏览器可以通过调用系统对话框，
向用户显示信息。
系统提供了三个函数，可以完成系统对话框的操作
分别是：
window.alert();
window.confirm();
window.prompt();
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.alert("hello");
			var res = window.confirm("请选择 yes or no");
			window.alert(res);
			window.prompt("please","aaa");
		</script>
	</head>
	<body>
	</body>
</html>

JS-DOM
DOM是文档对象模型：开始到结束
HTML+CS->页面内容
JS->页面行为操作
注：DOM是打通HTML与CS和JS壁垒的工具

window.onload（）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			var res = document.getElementById("div1");
			alert(res);
		</script>
	</head>
	<body>
		<div id="div1">
			hello world
		</div>
	</body>
</html>

这样做时无法通过ID获取到div1的，获得的是null，因为代码是由上向下执行的，执行到这个位置无法获得div1,通过window.onload 可以在执行完body后再获取；
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var res = document.getElementById("div1");
				alert(res);
			}
		</script>
	</head>
	<body>
		<div id="div1">
			hello world
		</div>
	</body>
</html>

getElementById 这是通过ID方式获取元素，也可以通过其他ul li无序列表获取
快速生成ul li 无序列表方式：
ul>li*4 + tab可以生成4个

		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>

同理ol>li*4 + tab也可以生成有序列表如下：

<ol>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>

也可以通过document.getElementsByTagName()可以通过目标名字获取多个元素
代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<script type="text/javascript">
			window.onload = function(){
				var Lis = document.getElementsByTagName("li");
				alert(Lis.length);
				var ul1 = document.getElementById("ul1");
				// 可以通过定义的ID获取到ul
				var uLis = ul1.getElementsByTagName("li");
				alert(uLis.length);
				for(var i=0;i<uLis.length;i++){
					alert(uLis[i].innerHTML);
					// 弹出取到的内容
				}
			}
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li>1111</li>
			<li>2222</li>
			<li>3333</li>
			<li>4444</li>
		</ul>
		<ol>
			<li>5555</li>
			<li>6666</li>
			<li>7777</li>
			<li>8888</li>
		</ol>
		
	</body>
</html>