js对节点属性的操作

最新推荐文章于 2022-08-10 11:27:07 发布

SaiKa563

最新推荐文章于 2022-08-10 11:27:07 发布

阅读量1.1k

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/qq_61896295/article/details/124917251

版权

一. 利用节点关系进行获取

1 . 父子关系

父节点 parentElement

 // 获取到父节点
var parent  =  document.getElementById("parent");

所有子节点 children

// 获取到所有的子节点
console.log(parent.children);

第一个子节点 firstElementChild

// 第一个子节点
var first = parent.firstElementChild;
console.log("第一个子节点",first);

最后个子节点 lastElementChild

// 最后一个子节点
var last  = parent.lastElementChild;
console.log("最后一个",last);

2. 兄弟关系

上一个兄弟 previousElementSibling

//上一个兄弟节点
var pre = me.previousElementSibling;
console.log(pre);

下一个兄弟 nextElementSibling

// 下一个兄弟节点
var next = me.nextElementSibling;
console.log(next);

二 . 对属性的处理

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节点的类型

<body>
		<input type="text" placeholder="请输入用户" id="Input"> 
		<!-- 这是一个注释哦,请不要删除 -->

        <script>
	        //获取注释节点
	        let Input1 = document.getElementById('Input')
	        let nextNode = Input1.nextSibling
	        console.dir(nextNode)

        </script>

</body>

区别

fristChild 第一个子节点（可以是文本，可以是元素）
firstElementChild 第一个元素子节点（只能是元素）

nextSibling nextElementSibling

四. 节点的操作

创建节点 document.createElement(tag)

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

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

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

插入节点 parent.appendChild(elem) 将elem插入到parent最后面

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

替换节点 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>

五. js对表格的操作

创建行 row = table.insertRow(index)

创建列 col = row.insertCell(index)

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

选择第一行 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下拉框

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

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

<form action="http://vip.biancheng.net/login.php" method="post">
     年龄区间：
     <select>
         <option>18岁以下</option>
         <option>18-28岁</option>
         <option>28-38岁</option>
         <option>38岁以上</option>
      </select>
</form>

七. 事件的注册

DOM0 在html标签中
<h1 οnclick="callMe()">

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

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

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

<body>
		<h1 onclick="callMe()">事件的监听</h1>
		<button id="btn">点我</button>
		<button id="btn2">随意</button>
		
		<script>
			//js事件的监听有三种方式
			
			//1.事件响应函数写在标签里
			function callMe(){
				alert('我爱学习')
			}
			
			//2.在js中注册
			var btn = document.getElementById('btn');
			// btn.onclick = callMe;
			btn.onclick= function(){
				alert('我爱学习');
			}
			
			var btn2 = document.getElementById('btn2');
			btn2.addEventListener('click',callMe)
			btn2.addEventListener('click',function(){
				alert('我爱学习');
			})
		</script>
</body>