10、DOM基础（元素节点、属性节点、文本节点、轮播图、改变颜色、选中取消）

jasmine_qiqi

已于 2022-04-08 14:55:22 修改

阅读量392

点赞数

分类专栏： JS 文章标签： javascript 前端

于 2022-04-07 22:21:51 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/124026547

版权

JS 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

1、什么是DOM

1、DOM一般指文档对象模型。文档对象模型（Document Object Model，简称DOM），DOM通过document对象，为开发者提供大量的接口（api），来获取节点，操作DOM树。

节点类型	分类
元素节点	获取元素节点：`querySelector()`
属性节点	`element.src`、`element.id`
文本节点	`innerHTML`
网页效果	操作元素节点、属性节点、文本节点、以及修改元素的样式

获取节点方法
`getElementById()`	通过id获取节点
`getElementsByClassName()`	通过类获取节点集合
`querySelector()`	通过选择器获取节点
`querySelectorAll()`	通过选择器获取节点集合

	<script>
		// 1、通过getElementById()方法，返回一个dom节点
		var container = document.getElementById('container');
		console.log(container.innerHTML);		// 通过innerHTML获取文本节点的内容，输出结果为：Hello world!
		container.innerHTML = 'Hello jasmine!';		// 也可以修改文本节点的内容
		console.log(container.innerHTML);		// 输出结果为：Hello jasmine!

		// 2、通过getElementsByClassName()方法，返回一个dom集合
		var btn = document.getElementsByClassName('btn');
		// 想要获取内容需要遍历
		for (let i = 0; i < btn.length; i++) {
			console.log(btn[i].innerHTML);
		}

		// 3、通过querySelector()方法，返回一个dom节点，推荐使用选择器方法
		var container = document.querySelector('#container');
		console.log(container.innerHTML);
		container.innerHTML = 'Hello jasmine_qiqi!';
		console.log(container.innerHTML);

		// 4、通过querySelectorAll()方法，返回一个dom集合，推荐使用选择器方法
		var btn = document.querySelectorAll('.btn');
		for (let i = 0; i < btn.length; i++) {
			console.log(btn[i].innerHTML);
		}
	</script>

2、事件类型（轮播图、改变颜色、选中取消）

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body {
			display: flex;
			justify-content: space-around;
			border: 1px solid black;
			margin: 0px;
			padding: 0px;
		}

		/* 案例一 */
		.box {
			width: 100px;
			height: 100px;
			background-color: antiquewhite;
		}

		/* 案例二 */
		.box1 {
			width: 200px;
			height: 100px;
			display: flex;
			justify-items: center;
			align-items: flex-end;
			position: relative;
		}

		.box1_button {
			position: absolute;
			bottom: 0px;
			left: 50%;
			transform: translateX(-50%);
		}

		.box1 img {
			max-width: auto;
			max-height: auto;
			width: 100%;
			height: 100%;
		}

		/* 案例三 */
		.case3 p {
			cursor: pointer;
		}

		.active {
			background-color: antiquewhite;
			cursor: pointer;
		}

		/* 案例四 */
		.case4 {
			width: 150px;
			height: 200px;
			overflow: hidden;
		}

		.case4 .container {
			width: 450px;
			height: 80px;
			display: flex;
			transition: transform 0.3s;
		}

		/* .case4 .container:hover {
			transform: translate(-150px);
		} */

		.case4 .container img {
			width: 150px;
			height: 80px;
		}

		.case4 .btnList {
			display: flex;
			align-content: center;
			justify-content: center;
		}
	</style>
</head>

<body>
	<!-- 案例一 -->
	<div class="case1">
		<h1>案例一</h1>
		<div class="box">
			<button>按钮</button>
		</div>
	</div>
	<!-- 案例二 -->
	<div class="case2">
		<h1>案例二</h1>
		<div class="box1">
			<img src="../image//1.jpg" alt="">
			<div class="box1_button">
				<button class="btn">1</button><button class="btn">2</button><button class="btn">3</button>
			</div>
		</div>
	</div>
	<!-- 案例三 -->
	<div class="case3">
		<h1>案例三</h1>
		<p>Hello world!</p>
		<p>Hello world!</p>
		<p>Hello world!</p>
		<p>Hello world!</p>
		<p>Hello world!</p>
	</div>
	<!-- 案例四 -->
	<div class="case4">
		<h1>案例四</h1>
		<div class="container">
			<img src="../image//1.jpg" alt="">
			<img src="../image//2.jpg" alt="">
			<img src="../image//3.jpg" alt="">
		</div>
		<div class="btnList">
			<button class="button">1</button>
			<button class="button">2</button>
			<button class="button">3</button>
		</div>
	</div>

	<script>
		// 设置样式
		var btn = document.querySelector('button');
		// 1、通过backgroundColor属性，事件监听函数(点击)，颜色变黄色
		btn.onclick = function () {
			box.style.backgroundColor = 'yellow';
		}
		// 2、鼠标移入，颜色变黑色
		var box = document.querySelector('.box');
		box.onmouseenter = function () {
			this.style.backgroundColor = 'black';
		}
		// 3、鼠标移出，恢复颜色
		box.onmouseleave = function () {
			this.style.backgroundColor = 'antiquewhite';
		}

		// 4、通过src属性，按钮切换图片
		var img = document.querySelector('img');
		var imageSrcList = ['../image//1.jpg', '../image//2.jpg', '../image//3.jpg']
		var btn = document.querySelectorAll('.btn');
		for (let i = 0; i < btn.length; i++) {
			btn[i].onclick = function () {
				img.src = imageSrcList[i];
			}
		}

		// 5、通过className属性，设置选中样式
		var pList = document.querySelectorAll('p');
		for (let i in pList) {
			pList[i].onclick = function () {
				if (this.className === 'active') {
					this.className = '';
				} else {
					this.className = 'active';
				}
			}
		}

		// 6、通过transform属性，点击按钮切换图片（过渡效果）
		var btnList = document.querySelectorAll('.button');
		var container = document.querySelector('.container');
		for (let i in btnList) {
			btnList[i].onclick = function () {
				console.log(btnList[i].innerHTML);
				container.style.transform = `translate(${-150 * i}px)`;
			}
		}


	</script>
</body>

</html>