Document Object Mode （DOM）补充_jsdom 补 document-CSDN博客

本文链接：https://blog.csdn.net/qq_62230186/article/details/124914992

1、查看节点的关系

<div id="parent">
			<p>数据1</p>
			<p id="me">数据2</p>
			<p>数据3</p>
		</div>
		<script type="text/javascript">
			var me = document.getElementById("me");//获取me节点
			console.log(me.parentElement);//获取父节点
			console.log(me.previousElementSibling);//上一个兄弟节点
			console.log(me.nextElementSibling);//下一个兄弟节点

			var parent = document.getElementById("parent");//获取父节点
			console.log(parent.children[0]);//索引为0的子节点
			console.log(parent.firstElementChild);//第一个子节点
			console.log(parent.lastElementChild);//最后一个子节点
		</script>

2、属性修改

<h1>属性修改</h1>
		<img src="img/1440%20(1).jpg" style="height: 150px;" alt="好图"><br>
		<button type="button" onclick="changeImg()">修改图片</button>
		<script type="text/javascript">
			function changeImg(){
				var img = document.querySelector("img");//获取图片
				console.log(img.getAttribute("src"));//获取图片src的属性
				img.setAttribute("src",'img/1439 (2).jpg');//修改图片src属性
				img.removeAttribute("alt");//删除alt属性
			}
		</script>

3、步进值实例

<h1>步进值</h1>
		<p>
			<button type="button" onclick="minus(this)">-</button>
			<input type="text" value="1" />
			<button type="button" onclick="add(this)">+</button>
		</p>
		<script type="text/javascript">
			//单击＋，让input值+1，单击-，让input值-1
			//this必须加，就是btn，只有通过btn才能找到对应的input
			function add(btn){
				var input = btn.previousElementSibling;//通过btn获取到input
				input.value = input.value * 1 + 1;//重新设置input的值为：原来input值*1转换为数字 + 1
			}
			function minus(btn){
				var input = btn.nextElementSibling;//通过btn获取到input
				input.value = input.value * 1 - 1;
			}
		</script>

4、tab选项卡

<button type="button">按钮1</button>
		<button type="button">按钮2</button>
		<button type="button">按钮3</button>
		<div class="content show">内容1</div>
		<div class="content">内容2</div>
		<div class="content">内容3</div>
		<script type="text/javascript">
			//单击第i个按钮让对应的第i个content显示
			//默认只显示第0个content
			var buts = document.getElementsByTagName("button");//获取三个按钮
			var cons = document.getElementsByClassName("content");//获取content内容
			for(let i = 0;i < buts.length; i++){
				// console.log(buts[i]);//依次访问节点中的每个元素，并输出i
				// console.log(cons[i]);
				buts[i].onclick = function(){//给每个按钮添加单击事件
					document.querySelector(".show").classList.remove("show");//有show类名的content移除show
					cons[i].classList.add("show");//对应的第i个content添加show
				}
			}
		</script>

5、节点信息

<h1>节点信息</h1>
		<p>文本内容</p>
		<script type="text/javascript">
			var p = document.querySelector("p");
			console.log("nodeName",p.nodeName);//大写P
			console.log("nodeType",p.nodeType);//1 代表元素
			console.log("nodeValue",p.nodeValue);//元素节点nodeValue为None
			
			var text = p.firstChild;//p的第一个子元素是文本节点（文本也是节点）
			console.log("nodeName",text.nodeName);
			console.log("nodeType",text.nodeType);//3 代表文本节点
			console.log("nodeValue",text.nodeValue);//文本节点是文本内容
		</script>

6、节点操作

<button type="button" onclick="createImg()">创建并插入</button>
		<button type="button" onclick="copyImg()">复制图片</button>
		<button type="button" onclick="delImg()">删除</button>
		<button type="button" onclick="insertImg()">指定位置插入</button>
		<br>
		<p id="myp">一个p标签</p>
		<img src="img/pic1.png" id="pic1" >
		<script type="text/javascript">
			function createImg(){
				var img = document.createElement("img");//通过js创建一张图片
				img.setAttribute("src",'img/pic2.png');//指定图片的src值
				document.body.appendChild(img);//插入到body标签
			}
			function copyImg(){
				var pic1 = document.getElementById("pic1");//获取要被复制的图片
				var img = pic1.cloneNode(false);//复制，true包含子节点，false只是当前节点
				document.body.appendChild(img);//插入到body中（document.body直接获取body元素节点）
			}
			function delImg(){
				var img = document.querySelector("img:last-of-type");//获取要删除的图片
				// img.remove(img);//自己删除自己
				img.parentElement.removeChild(img);//用父节点来删除
			}
			function insertImg(){
				var img = document.createElement("img");//创建图片
				img.setAttribute("src",'img/pic3.png');//指定要插入图片的位置
				var myp = document.getElementById("myp");//获取要插入图片的节点
				document.body.insertBefore(img,myp);//执行插入
			}
		</script>

7、表格操作

<table border="1" cellpadding="" cellspacing="">
			<tr>
				<td>书名</td>
				<td>价格</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>精通js</td>
				<td>16.8</td>
				<td>删除</td>
			</tr>
			<tr>
				<td>60个瞬间</td>
				<td>32.2</td>
				<td>删除</td>
			</tr>
		</table>
		<button type="button" onclick="addRow()">增加一行</button>
		<button type="button" onclick="delRow()">删除一行</button>
		<button type="button" onclick="changeTitle()">修改标题</button>
		<script type="text/javascript">
			function addRow(){
				var table = document.getElementsByTagName("table")[0];//通过标签名table获取节点列表
				var row = table.insertRow(2);//插入行
				var td1 = row.insertCell(0);//一行要插入的列
				var td2 = row.insertCell(1);
				var td3 = row.insertCell(2);
				td1.innerText = "精通Vue3.0";//设置列的内容
				td2.innerText = "18.8";
				td3.innerHTML = '<button>删除</button>' ;
			}
			function delRow(){
				var table = document.getElementsByTagName("table")[0];//通过标签名table获取节点列表
				table.deleteRow(1);//删除第1行
			}
			function changeTitle(){
				var table = document.getElementsByTagName("table")[0];
				//table会默认添加一个tbody标签
				var row = table.firstElementChild.firstElementChild;//table第一个子节点是tbody tbody第一个子节点是tr
				row.style.background = "#f30";
				console.log(row);
			}
		</script>

8、select下拉框

创建一个option:var.option = new Option(text,value)
插入一个option:Select.add(option,before)

9、事件的注册

<h1 onclick="callMe()">事件的监听</h1>
		<button id="btn">点我</button>
		<button id="btn2">随意</button>
		<script type="text/javascript">
			// js响应事件有三种监听方式
			//1、事件响应写在html标签属性里面
			// function callMe(){
			// 	alert("aoo!");
			// }
			//2、再js对象的属性中监听（和html分离）
			var btn = document.getElementById("btn");
			btn.onclick = callMe;//不要圆括号
			// btn.onclick = function(){
			// 	alert("开心！");
			// }
			//3、通过addEventListener 注册（可以注册多个）
			// var btns = document.getElementById("btn2");
			// // btn2.addEventListener("click",callMe);
			// btn2.addEventListener("click",function(){
			// 	alert("呜呼~");
			// })
		</script>