JS BOM & DOM

最新推荐文章于 2023-02-20 01:28:01 发布

白菜执笔人

最新推荐文章于 2023-02-20 01:28:01 发布

阅读量94

点赞数

分类专栏： Web 前端基础

本文链接：https://blog.csdn.net/qq_43621629/article/details/102650064

版权

Web 前端基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Web前端基础学习笔记

一、JS - BOM

1.1、什么是 BOM

BOM 就是浏览器的对象模型，浏览器可以通过调用系统对话框，向用户显示信息。

1.2、系统提供了三个函数，可以完成系统对话框的操作

window.alert("警告框");
window.confirm("请选择确定和取消");
window.prompt("请输入一个数","默认值");

<head>
	<script>
		var age = 18;
		var Age = 20;
		alert(age);
		alert(Age);
		alert(typeof(Age));
	</script>
</head>

二、JS - DOM —— 通过 id 获取节点

DOM是打通HTML与CSS和JS壁垒的工具

2.1、通过 id 获取节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS DOM-Id</title>
	<script type="text/javascript">
		var res = document.getElementById("div1");				// document.getElementById()
		alert(res);
	</script>
</head>
<body>
	<div id="div1">1.这是通过id获取的节点</div>
</body>
</html>

问题： 以上代码获取到的是 null
原因： 因为代码从上往下执行，当执行到 var res = document.getElementById(“div1”); 时，还没有读取到 id

解决方法 1：

script 放置到 body 后面，但语法规范 script 要放在 head 标签中，所以不采用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS DOM-Id</title>
</head>
<body>
	<div id="div1">1.这是通过id获取的节点</div>
</body>
	<script type="text/javascript">
		var res = document.getElementById("div1");
		alert(res);
	</script>
</html>

解决方法 2：

使用：window.onload = function(){ // 在页面加载完成以后执行的函数 }

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS DOM-Id</title>
	<script type="text/javascript">
		window.onload = function() {
			var res = document.getElementById("div1");
			alert(res);											// 获取节点
		}
	</script>
</head>
<body>		
	<div id="div1" class="box" style="width: 200px;height: 200px;background-color: pink;">
		1.这是通过id获取的节点
	</div>
</body>
</html>

2.2、获取该标签属性

<head>
	<script type="text/javascript">
		window.onload = function() {
			var res = document.getElementById("div1");
			alert(res.tagName);									// 获取该 id 所属的标签名
			alert(res.innerHTML);								// 获取内容
			res.innerHTML = "<h1>wow</h1>";						// 会解析标签
		}
	</script>
</head>
<body>		
	<div> 1.这是通过id获取的节点 </div>
</body>
</html>

2.3、获取 HTML属性

<head>
	<script type="text/javascript">
		window.onload = function() {
			var res = document.getElementById("div1");
			alert(res.className);								// 获取 class 名
			alert(res.id);										// 获取 id
			alert(res.title);									// 获取 title
			alert(res.style);									// 获取 style
			alert(res.style.backgroundColor);					// 获取 背景色(注意使用驼峰格式, 即不要‘-’, 第二个单词首字母大写)
		}
	</script>
</head>
<body>		
	<div id="div1" class="box" style="width: 200px;height: 200px;background-color: pink;">
		1.这是通过id获取的节点
	</div>
</body>
</html>

2.4、手动添加一个属性

<head>
	<script type="text/javascript">
		window.onload = function() {
			var res = document.getElementById("div1");
			
			// 手动添加一个属性
			res.setAttribute("属性名","属性值");

			// 若添加的是已有的属性，则会将其替换
			res.setAttribute("style","font-size: 24px;");
			alert(res.getAttribute("class"));					// 获取 class 名
		}
	</script>
</head>
<body>		
	<div id="div1" class="box" style="width: 200px;height: 200px;background-color: pink;">
		1.这是通过id获取的节点
	</div>
</body>
</html>

三、JS - DOM —— 通过 Tag 获取节点

3.1、通过 tag 获取节点

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS DOM-Tag</title>
	<script>
		window.onload = function() {
			var Lis = document.getElementsByTagName("li");		// document.getElementsByTagName()
			// alert(Lis);
			alert(Lis.length);									// 所有 li 标签的个数 (8个)

			// ul 下的所有 li 标签
			var ul1 = document.getElementById("ul1");
			var uLis = ul1.getElementsByTagName("li");
			alert(uLis.length);									// 4个
			for (var i=0; i<uLis.length; i++){
				alert(uLis[i].innerHTML);						// 遍历 ul 里每一个 li 的内容
			}
		}
	</script>
</head>
<body>
	<ul id="ul1">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>
	<ol>
		<li>555</li>
		<li>666</li>
		<li>777</li>
		<li>888</li>
	</ol>
</body>
</html>

四、JS - DOM —— 通过 Class 获取节点

4.1、通过 class 获取节点及其内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS DOM-Class</title>
	<script type="text/javascript">
		window.onload = function(){
			var Lis = document.getElementsByClassName("li1");
			alert(Lis);											// 获取所有 class="li1" 的节点

			for (var i=0; i<Lis.length; i++){					// 获取所有 class="li1" 节点的内容(用innerHTML获取内容)
				alert(Lis[i].innerHTML);
			}
		}
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li class="li1">222</li>
		<li>333</li>
		<li class="li1">444</li>
	</ul>
</body>
</html>

4.2、通过 class 获取节点的嵌入样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS DOM-Class</title>
	<style>
		ul { background-color: pink; }							// 如何获取这个 ？
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oul = document.getElementsByTagName("ul")[0];	// 获取第一个 ul
			alert(oul.style.backgroundColor);					// 只能获取行内的样式，无法获取到嵌入的样式


			// 解决方法：getComputedStyle(元素节点)[获取样式类型]
			
			var ulstyle = getComputedStyle(oul)["background-color"];
			alert(ulstyle);										// 注意，获取的是 rgb 格式
		}
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li class="li1">222</li>
		<li>333</li>
		<li class="li1">444</li>
	</ul>
</body>
</html>

4.3、获取 ul 下所有子节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS DOM-Class</title>
	<style>
		ul { background-color: pink; }
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var ul2 = document.getElementsByTagName("ul")[1];	// 获取第二个 ul
			alert(ul2);
			alert(ul2.childNodes.length);						// 7 个
		}
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li class="li1">222</li>
		<li>333</li>
		<li class="li1">444</li>
	</ul>
	
	<ul><!-- 这里是一个
	TextNode对象	--><li>这里是一个 HTML 元素</li><!-- 这里是一个
	TextNode对象	--><li>这里是一个 HTML 元素</li><!-- 这里是一个
	TextNode对象	--><li>这里是一个 HTML 元素</li><!-- 这里是一个
	TextNode对象	--></ul>
</body>
</html>

注意： ul2.childNodes.length 获取的是，作为指定对象直接后代的 HTML元素和 TextNode对象的集合的长度。

在这里插入图片描述

在看看

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS DOM-Class</title>
	<style>
		ul { background-color: pink; }
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var ul2 = document.getElementsByTagName("ul")[1];	// 获取第二个 ul
			alert(ul2);
			alert(ul2.childNodes.length);						// 7 个

			var ul3 = document.getElementsByTagName("ul")[2];	// 获取第三个 ul
			alert(ul3.childNodes.length);						// 3 个

			var ul4 = document.getElementsByTagName("ul")[3];	// 获取第四个 ul
			alert(ul4.childNodes.length);						// 15 个
			for (var i=0; i<ul4.childNodes.length; i++){
				alert(ul4.childNodes[i]);
			}
		}
	</script>
</head>
<body>
	<ul>
		<li>111</li>
		<li class="li1">222</li>
		<li>333</li>
		<li class="li1">444</li>
	</ul>
	
	<ul><!-- 这里是一个
	TextNode对象	--><li>这里是一个 HTML 元素</li><!-- 这里是一个
	TextNode对象	--><li>这里是一个 HTML 元素</li><!-- 这里是一个
	TextNode对象	--><li>这里是一个 HTML 元素</li><!-- 这里是一个
	TextNode对象	--></ul>
	
	<ul><!-- 这里是一个
	TextNode对象	--><li>这里是一个 HTML 元素</li><!-- 这里是一个
	TextNode对象	--><li>这里是一个 HTML 元素</li><!-- 这里是一个
	TextNode对象	--><li>这里是一个 HTML 元素</li><!-- 这里是一个
	TextNode对象	--></ul>

	<ul><li>111</li><li>222</li><li>333</li></ul>

	<ul> <!-- 这里是一个
	TextNode对象	--> <li>111</li> <!-- 这里是一个
	TextNode对象	--> <li>222</li> <!-- 这里是一个
	TextNode对象	--> <li>333</li> <!-- 这里是一个
	TextNode对象	--> </ul>
</body>
</html>

在这里插入图片描述

4.4、获取 ul 的第一个和最后一个子节点

<head>
	<script type="text/javascript">
	
		window.onload = function(){
			var oul = document.getElementsByTagName("ul")[0];
			alert(oul.firstChild);								// 获取第一个子节点
			alert(oul.lastChild);								// 获取最后一个子节点
		}
	</script>
</head>

白菜执笔人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS BOM & DOM

Web前端基础学习笔记一、JS - BOM1.1、什么是 BOMBOM 就是浏览器的对象模型，浏览器可以通过调用系统对话框，向用户显示信息。1.2、系统提供了三个函数，可以完成系统对话框的操作window.alert("警告框");window.confirm("请选择确定和取消");window.prompt("请输入一个数","默认值");<head> ...
复制链接

扫一扫