JavaScript操作DOM（二）

又一年764

已于 2022-05-25 20:48:44 修改

阅读量80

点赞数

文章标签： vue.js 前端 javascript

于 2022-05-22 01:14:07 首次发布

本文链接：https://blog.csdn.net/topuu/article/details/124905690

版权

一、节点关系

父子

父节点 --parentElement
所有子节点 --children
第一个子节点-- firstElementChild
最后个子节点 --lastElementChild

兄弟

上一个兄弟 previousElementSibling
下一个兄弟 nextElementSibling

例：

<body>
		<h1>节点关系查找</h1>
		<div id="parent">
			<p>你好我是p1</p>
			<p id="me">你好我是p2</p>
			<p>你好我是p3</p>
			<h5>小小标题</h5>
		</div>
		<script>
			// 获取到父节点
			var parent  =  document.getElementById("parent");
			// 获取到所有的子节点
			console.log(parent.children);
			// 第一个子节点
			var first = parent.firstElementChild;
			console.log("第一个子节点",first);
			// 最后一个子节点
			var last  = parent.lastElementChild;
			console.log("最后一个",last);
			// children 子（复数） first第一个 Element元素 Child子
			// last 最后一个
			/*
			// 获取me节点
			var me = document.getElementById("me");
			console.log(me);
			// me的父节点
			console.log(me.parentElement);
			// me的上一个兄弟节点
			var pre = me.previousElementSibling;
			console.log(pre);
			// me的下一个兄弟节点
			var next = me.nextElementSibling;
			console.log(next);
			// parent 父 Element元素   parentElement父元素
			// previous之前、上一个 Element 元素   Sibling兄弟 
			// previousElementSibling 上一个兄弟节点
			// next 下一个;Element元素;Sibling兄弟
			// nextElementSibling下一个兄弟关系
			
		</script>

二、属性操作

getAttribute --获取属性
setAttribute --设置属性
removeAttribute --移除属性

例：

	<body>
		<h1>属性修改</h1>
		<img src="images/pic1.png" alt="一张好图"><br/>
		<button onclick="changeImg()">修改图片</button>
		<script>
			function changeImg(){
				// 获取图片
				var img = document.querySelector("img");
				// 获取图片的src属性
				console.log(img.getAttribute("src"))
				// 修改图片的src属性
				img.setAttribute("src",'./images/pic2.png');
				// 删除alt属性
				img.removeAttribute("alt");
			}
		</script>
	</body>

三、节点信息

js的DOM核心编程，每个元素都是一个节点，节点有不同类型有不同信息。

nodeName（节点的名称）

元素节点：返回的是元素标签名大写例P。

文本节点：返回#text。

nodeType（节点的类型）

元素节点：1

文本节点：3

nodeValue(节点的值)

元素节点：none

文本节点：文本内容

例：

<body>
		<h1>属性修改</h1>
		<p><strong>HI</strong>我是文本内容ABC</p>
		<script>
			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>
	</body>

四、节点的操作

1、创建节点--document.createElement(tag)

2、删除节点：
elem.remove()
elem.parentElment.removeChild(elem)

3、复制节点

复制节点 ,不带子节点
var elem2 = elem.cloneNode(false)

复制节点，带子节点
var elem3 = elem.cloneNode(true)

4、插入节点
parent.insertBefore(新的节点，相关节点)
把新的节点插入到相关节点的前面

5、替换节点
parent.replaceChild(新的节点，被替换的节点)

例：

<body>
		<h1>节点的创建与插入</h1>
		<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="images/pic1.png" id="pic1">
		<script>
			function insertImg(){
				// 创建图片
				var img = document.createElement("img");
				// 指定图片的src
				img.setAttribute("src",'images/pic3.png');
				// 选中要插入的相关节点
				var myp = document.getElementById("myp");
				// 执行插入
				document.body.insertBefore(img,myp);
			}
			function delImg(){
				// 找到要删除的图片(last-of-type 选中最后一张图片)
				var img = document.querySelector("img:last-of-type");
				// 执行删除
				// img.remove();//自己删除自己
				// 用父节点来删除
				img.parentElement.removeChild(img);
			}
			function copyImg(){
				// 01 选中被复制的图片
				var pic1 = document.getElementById("pic1");
				// 02 复制
				var img = pic1.cloneNode(false); //true包含子节点，false只是当前节点
				// 03 插入到body中(document.body 直接获取body元素节点)
				document.body.appendChild(img);
			}
			function createImg(){
				// 通过js创建一张图片
				var img = document.createElement("img");
				// 指定图片的src值
				img.setAttribute("src",'images/pic2.png');
				// 插入到body标签
				document.body.appendChild(img);
			}
		</script>
	</body>

五、表格操作

1、创建行
row = table.insertRow(index)

2、创建列
col = row.insertCell(index)

3、设置列的内容
col.innerText="xxx"

4、选择第一行
table.firstElementChild.fristElementChild

例：

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

六、select下拉框

1、创建一个option
var option = new Option(text,value)

2、插入一个option
select.add(option,before)

七、事件的注册

1、DOM()在html标签中。例<h1 οnclick="callMe()"></h1>

2、DOM1 实现js与html分离。
btn.οnclick=callMe;
btn.onclick = function(){}
(多次注册，只会执行最后一个)

3、DOM2 可以添加多个，也可以移除。
btn.addEventListener(“click”,callMe)
btn.addEventListener("click",function(){})

4、移除全部click。
btn.removeEventListenter("click")
移除一个
btn.removeEventListenter("click",callMe)

<body>
	   <h1 onclick="callMe()">事件的监听</h1>
	   <button>点我</button>
	   <script>
	   //js响应事件有三种监听方式
	   //01事件响应写在HTML标签属性里面
	       function callMe(){
			   alert("我被点到了")
		   }
		   //在js对象的属性中监听
		   var btn=document.getElementById("btn");
		   // btn.onclick=callMe;//不要圆括号
		   btn.onclick=function(){
			   alert("要线下了，我很开心")
		   }
		   //通过addEventListener注册（可以注册多个）
		   var btn2=document.getElementById("btn2");
		   btn2.addEventListener("click",callMe)
		   btn2.addEventListener("click",function(){
			   alert("开心要见到你们了")；
		   })
	   </script>
	</body>

又一年764

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript操作DOM（二）

一、节点关系父子父节点 --parentElement所有子节点 --children第一个子节点-- firstElementChild最后个子节点 --lastElementChild兄弟上一个兄弟 previousElementSibling下一个兄弟 nextElementSibling例：<body> <h1>节点关系查找</h1> <div id="parent"> <p>你好我是p1&l
复制链接

扫一扫