js的DOM一遍过

一、获取元素

1.根据id获取

document.getElementById('id');

2.根据标签名获取

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName('标签名');

获取某个元素(父元素)内部所有指定标签名的子元素。

element.getElementsByTagName('标签名');

3.根据类名返回元素对象集合

document.getElementsByClassName('类名');

4.获取特殊元素（body，html）

doucumnet.body  // 返回body元素对象
document.documentElement  // 返回html元素对象

5.选择器获取

//根据指定选择器返回第一个元素对象
document.querySelector('选择器');

//根据指定选择器返回
document.querySelectorAll('选择器');

二、事件

1.常见的鼠标事件

<!DOCTYPE html>
<html lang="zh-CN">
	<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>事件三要素</title>
	</head>
	<body>
		<button id="btn">点击一下</button>
		<script>
			// 点击一个按钮，弹出对话框
			// 1.事件是有三部分：事件源、事件类型、事件处理程序
			//(1)事件源：事件被触发的对象。谁--按钮
			var btn = document.getElementById("btn");
			//(2)事件类型：如何触发，什么事件，比如鼠标点击还是鼠标经过，还是键盘按下
			//(3)事件处理程序，通过一个函数赋值的方式完成
			btn.onclick = function () {
				alert("点击了按钮");
			};
		</script>
	</body>
</html>

三、DOM操作

①修改元素内容

innerText innerHTML 改变元素内容

element.innerHTML  = '新的内容';

②修改元素样式

element.style.color  = 'red';
element.style.fontSize  = '16px';

③修改元素属性

element.setAttribute('id',  'newId');
element.setAttribute('class',  'newClass');

④创建新元素

var newElement = document.createElement('div'); 
newElement.innerHTML  = '新元素的内容';
document.body.appendChild(newElement); //将新元素添加入body子节点

⑤删除元素

document.body.removeChild(newElement);

⑥绑定事件监听

<!DOCTYPE html>
<html lang="zh-CN">
	<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>
	</head>
	<body>
		<button>按钮</button>
		<input type="text" value="输入内容" />
		<script>
			// 1.获取元素
			var btn = document.querySelector("button");
			var input = document.querySelector("input");
			// 2.注册事件 处理程序
			btn.onclick = function () {
				// 表单里面的值，文字内容是通过 value来修改的
				input.value = "被点击了";
			};
		</script>
	</body>
</html>

⑦样式属性操作

<!DOCTYPE html>
<html lang="zh-CN">
	<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>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script>
			var div = document.querySelector("div");
			div.onclick = function () {
				// div.style.backgroundColor = "green";
				// div.style里面的属性，采用驼峰命名法
				this.style.backgroundColor = "purple";
				this.style.width = "250px";
			};
		</script>
	</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
	<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>
			div {
				width: 200px;
				height: 200px;
				background-color: pink;
			}
			.change {
				background-color: purple;
				color: #fff;
				font-size: 25px;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div>文本</div>
		<script>
			var div = document.querySelector("div");
			div.onclick = function () {
				// this.style.backgroundColor = "purple";
				// this.style.color = "#fff";
				// this.style.fontSize = "25px";
				// this.style.marginTop = "100px";
				// 让我们当前元素的类名改为了 change
				this.className = "change";
			};
		</script>
	</body>
</html>

⑧排他思想

<!DOCTYPE html>
<html lang="zh-CN">
	<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>
	</head>
	<body>
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
		<script>
			// 1.获取所有按钮元素
			var btns = document.getElementsByTagName("button");
			for (var i = 0; i < btns.length; i++) {
				btns[i].onclick = function () {
					// (1)我们先把所有的按钮背景颜色去掉
					for (var i = 0; i < btns.length; i++) {
						btns[i].style.backgroundColor = "";
					}

					// (2)然后才让当前的元素背景颜色为 pink
					this.style.backgroundColor = "pink";
				};
			}
		</script>
	</body>
</html>

⑨自定义属性操作

获取属性值

（1）element.属性获取内置属性值（元素本身自带的属性）

（2）element.getAttribute(‘属性’); 主要获得自定义的属性（标准）我们程序员自定义的属性

移除属性

（1）element.removeAttribute(‘属性’);

四、节点操作

①父子节点的获取

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定的节点没有父节点则返回 null

<!DOCTYPE html>
<html lang="zh-CN">
	<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>
	</head>
	<body>
		<div>我是div</div>
		<span>我是span</span>
		<ul>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
		</ul>
		<div class="demo">
			<div class="box">
				<div class="erweima">x</div>
			</div>
		</div>

		<script>
			// 1. 父节点 parentNode
			var erweima = document.querySelector(".erweima");
			// var box = document.querySelector('.box');
			// 得到的是离元素最近的父级节点,如果找不到父节点就返回为 null
			console.log(erweima.parentNode);
		</script>
	</body>
</html>

子节点：

1. parentNode.childNode   //标准
2. parentNode.children	  //非标准

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）。
虽然children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用。

案例

<!DOCTYPE html>
<html lang="zh-CN">
	<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>
	</head>
	<body>
		<div>我是div</div>
		<span>我是span</span>
		<ul>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
		</ul>
		<ol>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
		</ol>
		<div class="demo">
			<div class="box">
				<div class="erweima">x</div>
			</div>
		</div>

		<script>
			// DOM 提供的方法 (API) 获取
			var ul = document.querySelector("ul");
			// var lis = ul.querySelect('li');
			// 1.子节点 childNodes 所有的子节点，包含：元素节点，文本节点等等
			console.log(ul.childNodes);
			// 1.children 获取所有的子节点元素 也是我们实际开发常用的
			console.log(ul.children);
		</script>
	</body>
</html>

3. parentNode.firstChild
4. parentNode.lastChild
5. parentNode.firstElementChild
6. parentNode.lastElementChild

firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
firstElementChild 返回第一个子元素节点，找不到则返回null。
lastElementChild 返回最后一个子元素节点，找不到则返回null。

注意：firstElementChild和lastElementChild，这两个方法有兼容性问题，IE9 以上才支持。

剩下的看原文吧
原文链接：https://blog.csdn.net/m0_48964052/article/details/125962081