JavaScript|DOM初步(含各种小案例)_jsdom案例大全-CSDN博客

本文链接：https://blog.csdn.net/m0_37149062/article/details/106276746

引言

DOM全称是：Document Object Model(文档对象模型)是浏览器提供给JavaScript使用的操作HTML和CSS的接口。js通过DOM操作HTML和CSS。DOM不是一个新的语言，本质上他就是给js提供一些新的对象和方法而已。js、DOM、HTML和CSS的关系是(如一座敲梁一般)：
在这里插入图片描述

DOM节点

在这里插入图片描述

HTML元素的方法

如果要操作某个HTML元素，首先要得到这个标签。通俗地说，就是把HTML标签"拿到"JavaScript里面来.DOM提供了几个非常实用的得到元素的方法。

getElementById()

格式如下：

document.getElementById("id");

id属性是任何HTML标签都可以添加的属性，一个页面中的任何两个标签绝对不能有相同的id属性。正因如此，使用document.getElementById()方法得到的元素一定只有1个。大小写非常敏感。

例子：修改div标签内部文本

实验效果

在这里插入图片描述

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test1-2</title>
	</head>
	<body>
		<div id = "box"></div>
		<script type="text/javascript">
			var oBox = document.getElementById("box");
			oBox.innerHTML = "你好.JavaScript!";
		</script>
	</body>
</html>

编程时要将<script标签放在<div标签后面，而不能放在它的前面。这是因为网页从上到下运行，只有先写<div标签，才能保证<script标签中的Js代码执行时已经加载好了<div标签。 可以使用window.onload事件来延迟程序的加载,从而可以将程序写在<head标签内,这也是常见的书写习惯.代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test1-2</title>
		<script type="text/javascript">
			window.onload = function() {
			var oBox = document.getElementById("box");
			oBox.innerHTML = "你好.JavaScript!";}
		</script>
	</head>
	<body>
		<div id = "box">saad</div>
	</body>
</html>

getElementByTagName()

格式如下：

document.getElementByTagName("p");

使用这个方法得到的不是1个标签，而是标签数组，Elements中的字母s表示复数。

例子：使用标签数组遍历h1

实验效果

在这里插入图片描述

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test1-2</title>
		<script type="text/javascript">
			window.onload = function() {
				var oTitles = document.getElementsByTagName("h1");
				for(var i = 0;i<oTitles.length;i++)
				{
					oTitles[i].innerHTML = "我是第" + i + "个h1标签"
				}
			}
		</script>
	</head>
	<body>
		<h1></h1>
		<h1></h1>
		<h1></h1>
		<h1></h1>
		<h1></h1>
		<h1></h1>
		<h1></h1>
	</body>
</html>

getElementByClassName()

格式如下：

document.getElementsByClassName()

例子：选择得到所有携带box类名的盒子数组

实验效果

在这里插入图片描述
网页运行后，弹出对话框显示数字2，表示得到了2个携带box类名的元素。

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test1-3</title>
		<script type="text/javascript">
			window.onload = function() {
				var oBox = document.getElementsByClassName("box");
				alert(oBox.length);
			}
		</script>
	</head>
	<body>
		<div class="box"></div>
		<div></div>
		<div class="box"></div>
	</body>
</html>

querySelector()和querySelectorAll()

例子：控制后代改变颜色

实验效果

在这里插入图片描述

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload = function () {
				var oLi = document.querySelector("#box ul li.spec");
				oLi.style.backgroundColor = "red";
			}
		</script>
	</head>
	<body>
		<div id = "box">
			<ul>
				<li>我是列表项</li>
				<li class="spec">我是特殊的列表项</li>
				<li>我是列表项</li>
				<li class="spec">我是特殊的列表项</li>
				<li>我是列表项</li>
			</ul>
		</div>
	</body>
</html>

HTML元素的操作

改变内部文字

格式：

变量.innerHTML = "";

例子1：改变innerHtml

实验效果

在这里插入图片描述

实验代码

	<body>
		<div id="box1"></div>
		<div id="box2"></div>
		<script>
			var box1 = document.getElementById("box1");
			var box2 = document.getElementById("box2");
			box1.innerHTML = "你好";
			box2.innerHTML = "你好！";
		</script>
	</body>

例子2：比较innerHTML和innerText

实验效果

在这里插入图片描述

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "box1"></div>
		<div id = "box2"></div>
		<script type="text/javascript">
			var oBox1 = document.getElementById("box1");
			var oBox2 = document.getElementById("box2");
			
			oBox1.innerHTML = "<ul><li>苹果</li><li>西瓜</li></ul>";
			oBox.innerText = "<ul><li>苹果</li><li>西瓜</li></ul>";
		</script>
	</body>
</html>

改变标签的属性

例子：改变img的src

实验效果

在这里插入图片描述

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img />
		<img />
		<img />
		<img />
		<img />
		<img />
		<script type = "text/javascript">
			var oImgs = document.getElementsByTagName("img");
			
			for(var i = 0;i<oImgs.length;i++) {
				oImgs[i].src = "../numbers/" + i + ".png";
			}
			
		</script>
	</body>
</html>

改变类名

例子：将div从“box”改成“one”

实验效果

箭头是指它被成功更改
在这里插入图片描述

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "box"></div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			box.className = "one";
		</script>
	</body>
</html>

改变CSS样式

改变HTML元素的CSS样式是网页特效时频繁实用的功能，通过这样的语法来设置HTML元素的CSS样式

oDiv.style.backgroundColor = "red"

这里需要注意的是，CSS属性的名称必须变为驼峰写法，例如：

background-color 要变为backgroundColor
font-size 要变为fontSize
border-top-color要变为borderTopColor

例子：改变div的大小和颜色

测试效果

在这里插入图片描述

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "box"></div>
		<script type="text/javascript">
			var box = document.getElementById("box");
			box.style.backgroundColor = "red";
			box.style.width = "200px";
			box.style.height = "200px";
		</script>
	</body>
</html>

事件监听

事件是由访问web页面的用户引起的操作，如鼠标点击按钮、滑过某个图片都可能会触发事件。js通过给HTML元素添加“事件监听”，从而让此元素对各种事件作出反应。

常见事件监听

js中，事件监听的名字基本上都是以on开头，表示“当”，如onClick就是“当单击时”的意思。

事件名	意义
onclick	单击
onmouseover	鼠标进入
onmouseout	鼠标离开
ondblclick	双击
onmousedown	鼠标按下
onmouseup	鼠标按键抬起

格式

元素.事件名 = function() {
}

例子：设置按钮单击事件，并按下作提示

测试效果

在这里插入图片描述

附上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test1-10</title>
	</head>
	<body>
		<button id="btn">按我</button>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function() {
				alert("你好,js");
			}
			
		</script>
	</body>
</html>