JS 节点

让我打个盹

于 2022-04-24 19:17:03 发布

阅读量506

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_48494427/article/details/124387605

版权

1.查看元素节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			hello world
		</div>
	</body>
	<script>
		var odiv = document.getElementById("box");
		//var odiv = document.getElementsByTagName("div")[0];
		// console.log(odiv.nodeName);// 节点名称 div
		// console.log(odiv.tagName);//标签名称 div
		// console.log(odiv.nodeType);//1  节点类型
		// console.log(odiv.nodeValue);//null 节点值
		var attr = odiv.getAttributeNode("id");
		console.log(attr);
		alert(attr);//[object Attr] 属性对象
		console.log(attr.nodeName);//节点名称 属性名
		// console.log(attr.nodeType);//2  节点类型
		// console.log(attr.nodeValue);// 节点值 属性值
		 var ch = odiv.firstChild;//第一个子节点
		 console.log(ch);
		 alert(ch);//[object text] 文本对象节点
		 console.log(ch.nodeName);//节点名称 文本
		 // console.log(ch.nodeType);//3  节点类型
		 // console.log(ch.nodeValue);// 节点值 属性值
	</script>
</html>

2.节点父子之间查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="box">
			<li>列表1</li>
			<li id="list">列表2</li>
			<li>列表3</li>
		</ul>
	</body>
	<script>
		var oul = document.getElementById("box");
		// console.log(oul.firstChild);第一个子节点 可能有文本节点 换行
		console.log(oul.firstElementChild);//第一个子元素节点
		console.log(oul.lastChild);//最后一个子节点 可能有文本节点 换行
		console.log(oul.lastElementChild);//最后一个子元素节点
		console.log(oul.childNodes)/ul 里的所有的子节点  可能有文本节点 换行
		console.log(children);ul 里的所有的子元素节点对象
		// console.log(oul.firstChild.nodeType);
		// console.log(oul.firstChild.nodeValue);
		// console.log(oul.childNodes.length);
		var elArr = [];
		for (var i = 0; i < oul.childNodes.length; i++) {
			//console.log(oul.childNodes[i]);
			if (oul.childNodes[i].nodeType === 1) {
				elArr.push(oul.childNodes[i]);
			};
		};
		console.log(elArr);
		console.log(oli.parentNode);//查找父节点
		console.log(oli.parentElement);
		//父节点查找子节点：
		
		//通过父节点对象查找子节点对象（可能会议节点对象）
		// 父节点对象.firstChild 查找父节点下的第一个子节点
		// 父节点对象.lastChild  查找父节点下的最后一个子节点
		// 父节点对象.childNodes 多个  查找父节点下的所有的子节点
		
		//通过父节点对象查找子节点对象
		// 父节点对象.firstElementChild 查找父节点下的第一个子元素节点
		// 父节点对象.lastElementChild  查找父节点下的最后一个子元素节点
		// 父节点对象.children 多个  查找父节点下的所有的子元素节点
		
		//子节点查找父节点
		子节点对象.parentNode  通过子节点查找父节点
		子节点对象.parentElement  通过子节点查找父节点元素
	</script>
</html>

3.节点兄弟之间查找

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="box">
			<li>列表1</li>
			<li id="list">列表2</li>
			<li>列表3</li>
		</ul>
	</body>
	<script>
		var oli = document.getElementById("list");
		console.log(oli.nextSibling);//查找下一个兄弟节点  可能为文本
		console.log(oli.nextElementSibling);//查找下一个元素兄弟节点
		console.log(oli.nextElementSibling.nodeValue);
		console.log(oli.previousSibling);//查找上一个兄弟节点  可能为文本
		console.log(oli.previousElementSibling);//查找上一个元素兄弟节点
	</script>
</html>

4.属性操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<ul id="box" a=10>
			<li>列表1</li>
			<li id="list">列表2</li>
			<li>列表3</li>
		</ul>
	</body>
	<script>
		var oul = document.getElementById("box");
		console.log(oul.id);
		console.log(oul.a); //无法获取自定义的属性值
		console.log(oul.getAttribute("id"));
		console.log(oul.getAttribute("a")); //可以获取自定义的属性值
		//节点对象.getAttribute("属性名") 根据属性名获取属性值
		//设置
		oul.title = "hello"
		oul.b = 100;
		oul.setAttribute("title", "hello")
		oul.setAttribute("b", 100);
		节点对象.setAttribute("属性名", "属性值");
		oul.removeAttribute("a");
		oul.removeAttribute("title");
		节点对象.removeAttribute("属性名");删除对应的这对属性
	</script>
</html>

5.创建元素对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box">
			hello world
		</div>
		<button id="Btn">点击添加图片</button>
	</body>
	<script>
		var odiv = document.getElementById("box");
		var oBtn = document.getElementById("Btn");
		var ospan = document.createElement("span");
		
		oBtn.onclick=function(){
			var oimg = document.createElement("img");
					//oimg.src=""
		oimg.setAttribute("src","img/heart1.png")
			odiv.appendChild(oimg);
			document.body.appendChild(oimg);//把创建好的图片添加到body内部最后
		}
		console.log(ospan);//元素对象
		console.log(oimg);//元素对象

		//alert(ospan);
		ospan.innerHTML = "我是span";
		console.log(ospan);//元素对象
		//追加
		odiv.appendChild(ospan);
		//创建元素对象
		document.createElement("元素名称");
		//追加元素到
	</script>
</html>