Javascript节点部分介绍

最新推荐文章于 2024-10-01 20:12:28 发布

yorup

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量204

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_48639378/article/details/125626994

版权

1.给标签添加自定义属性

1）建立一个ul标签，添加了一个自定义属性

<ul>
	<li class="hover" index="11" ssddc="qqqq"></li>
</ul>

2）获取li标签的类名

<script type="text/javascript">
			var lis = document.querySelector('li');
			//打印的是标签固有的class属性值 hover
			console.log(lis.className);
</script>

结果只有‘hover’，没有‘11’：

3）获取li标签添加的自定义属性的值

<script>
    console.log(lis.getAttribute('index'));
	console.log(lis.getAttribute('ssddc'));
</script>

结果展示：

4）更改自定义属性的值

<script>
    lis.setAttribute('index','2');
	console.log(lis.getAttribute('index'));
</script>

结果展示：

2.认识节点

1）网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。

标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示。

还有文本节点，属性节点，下面举例说明：

<div class="demo">里面的内容</div>

div是元素节点

“里面的内容”是文本节点/内容节点

class是属性节点

2）获取节点的名称==>nodeType，类型==>nodeName，值（元素节点没有值）==>nodeValue

var demo  = document.querySelector('.demo');
console.log(demo.nodeType);//1->元素节点
console.log(demo.nodeName);//div
console.log(demo.nodeValue);//null

节点的类型返回值为：元素节点nodeType=1，属性节点nodeType=2，文本节点nodeType=3；

3）父节点和子节点的查询获取操作，具体操作和代码如下

<body>
		<div class="demo">
			<!-- <span></span> -->
			文本1
			<div class="box1">盒子1</div>
			<div class="box2">盒子2</div>
			文本2
		</div>
		
		<!-- 认识节点 -->
		<script type="text/javascript">
			var box1 = document.querySelector('.box1');
			//获取父级节点
			console.log(box1.parentNode);
			var demo = document.querySelector('.demo');
			//子节点与子元素节点  子节点包含文本   注意这里多了一个换行文本
			//获取所有子节点
			console.log(demo.childNodes);
			console.log(demo.childNodes[2]);//访问具体某个节点
			
			//获得子元素节点  这里获得的是2个div标签
			console.log(demo.children);
			console.log(demo.children[1]);
			
			// 获得第一个节点
			console.log(demo.firstChild);
			//获得第一个元素节点
			console.log(demo.firstElementChild);
			
			//获得最后一个节点
			console.log(demo.lastChild);
			//获得最后一个元素节点
			console.log(demo.lastElementChild);
			
			//寻找下一个节点
			console.log(box1.nextSibling);
			//寻找下一个元素节点
			console.log(box1.nextElementSibling);
			
			//寻找上一个节点
			console.log(box1.previousSibling);
			// 寻找上一个元素节点 
			console.log(box1.previousElementSibling);//如果没有结果为null
		</script>
	</body>

结果如下：

4）添加删除子节点

通过父级元素添加和删除子节点

代码如下：

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul>
			
			<li>列表1</li>
			<li>列表2</li>
			<li>列表3</li>
		</ul>
		<input type="button" value="删除节点" id="delbtn">
		
		
		<script type="text/javascript">
			var ulNode = document.querySelector('ul');
			// 操作节点
			// 01创建节点
			// 创建一个li标签节点
			var liNode1 = document.createElement('li');
			var liNode2 = document.createElement('li');
			// console.log(liNode1);
			
			
			
			//给标签添加节点内容
			// liNode1.innerText = '列表0';
			liNode1.innerHTML = '<a href="">超链接1</a>';
			liNode2.innerHTML = '<a href="">超链接2</a>';
			// console.log(liNode1);
			
			// 02克隆一个节点 cloneNode()单克隆 标签 不克隆内容
			// cloneNode(true)克隆完整标签信息
			// var liNode3 = liNode1.cloneNode();
			var liNode3 = liNode1.cloneNode(true);
			
			
			//再ul标签的尾部 插入节点
			ulNode.appendChild(liNode2);
			
			//再ul标签的尾部 插入克隆的标签
			ulNode.appendChild(liNode3);
			//再指定节点之前插入节点
			ulNode.insertBefore(liNode1,ulNode.children[0]);
			
			
			// 03删除节点 removeChild()
			var delbtn = document.querySelector('#delbtn');
			delbtn.onclick = function(){
				ulNode.removeChild(ulNode.children[0]);
			}
		</script>
	</body>

结果如下：