JS常见Dom节点操作

最新推荐文章于 2024-06-25 19:24:28 发布

小梦新靓

最新推荐文章于 2024-06-25 19:24:28 发布

阅读量391

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_43712187/article/details/90708853

版权

JS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一、创造节点
1.1、创建标签节点：document.createElement();

var Div=createElement("标签名")；
例子：
var snakeDiv=document.createElement("div");-----创建一个div元素，
因为是document对象的方法。
snakeDiv.setAttribute("class","snake");

1.2、创建文本节点：document.createTextNode();

var oDivText = document.createTextNode("1314");
//创建一个文本节点内容是“1314”，因为是document对象的方法。

1.3、把创建的文本节点添加给标签节点

Div.appendChild(oDivText);
//父级.appendChild(子节点);在div元素中添加“1314”

二、添加节点
2.1、把新创建的标签添加给父元素的末尾

父元素.appendChild(新建的标签);
map.appendChild(snakeDiv);
document.documentElement.appendChild(createNode);
document.body.appendChild(oDiv);
//父级.appendChild(子节点);;document.body是指向<body>元素

2.2、把新建的标签添加给父元素的首结点

父元素.insertBefore(a,b)；
insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末

案例：

	<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.sdiv{
		width:200px;
		height: 200px;
		background: red;
	}
	div{
		width: 100px;
		height: 100px;
		background: skyblue;
	}
	</style>
	<script>
//	后插入：
	window.onload=function()
	{
		var Div=document.createElement("div");
		Div.setAttribute("class","sdiv");
		document.body.appendChild(Div);
	}
	//前插入
	window.onload=function()
	{
		var Div=document.createElement("div");
		var oDiv=document.getElementsByTagName("div")[0];
		Div.setAttribute("class","sdiv");
		document.body.insertBefore(Div,oDiv);
	}
	window.onload=function()
	{
		var Div=document.createElement("div");
		var divText=document.createTextNode("hhhh");
		Div.appendChild(divText);
		var oDiv=document.getElementsByTagName("div")[0];
		Div.setAttribute("class","sdiv");
		// document.body.appendChild(Div);
		document.body.insertBefore(Div,oDiv);
	}
	</script>
</head>
<body>
	<div></div>
</body>
</html>

结果：后插

前插入

三、删除节点
removeChild(节点) 删除一个子节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。
obj. removeChild(oldChild)
oldChild：表示需要删除的节点。

!DOCTYPE html>
<html>
<head>
<title>www.jb51.net 删除节点</title>
<script language="javascript">
function delNode()
{
var deleteN=document.getElementById('di');
--------if(deleteN.hasChildNodes())
{
  deleteN.removeChild(deleteN.lastChild);
}
}
</script>
</head>
<body>
<h1>删除节点</h1>
<div id="di">
<p>第一行文本</p>
<p>第二行文本</p>
<p>第三行文本</p>
</div>
<form>
<input type="button" value="删除" onclick="delNode();"/>
</form>
</body>
</html>

2、
<div id="f"> 
 <div>a</div> 
 <div>b</div> 
 <div>c</div> 
</div>
var f = document.getElementById("f"); 
var childs = f.children; 
for(var i = 0; i < childs.length; i++) { 
  alert(childs[i].nodeName); 
  f.removeChild(childs[i]); 
}

问题如何删除父节点？
四、替换节点
replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。

var replaceChild= document.body.replaceChild(div1,div2);
 //将div1替换div2

五、查找结点
5.1、childNodes 包含文本节点和元素节点的子节点:父元素.childNodes
这里有一个判别方法nodeType节点的类型

元素节点 nodeType = 1
属性节点 nodeType = 2
文本节点 nodeType = 3
注释节点 nodeType = 8
文档节点 nodeType = 9
fragment节点 nodeType = 11

for (var i = 0; i < oList.childNodes.length; i++) 
{//oList是做的ul的对象。
  if (oList.childNodes[i].nodeType == 1)
   {//查找到oList内的元素节点
    console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
  }
}

5.2、children也可以获取子节点，而且兼容各种浏览器。包括IE6-8而且只获取元素节点
5.3、parentNode：获取父节点
5.4、firstChild ;
firstElementChild查找第一个子节点。此存在浏览器兼容问题：firstChild是IE兼容，firstElementChild是非IE兼容。

//查找第一个子节点的封装函数
function firstChild(ele) {
if (ele.firstElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
return ele.firstElementChild;
} else {
return ele.firstChild;
}
}
firstChild(oList).style.background = ‘red’;//将获得的节点的背景变成红色
5.4、lastChild ; lastElementChild查找最后一个子节点。此存在浏览器兼容问题：lastChild 是IE兼容，lastElementChild是非IE兼容。

//查找最后一个子节点的封装函数
function lastChild(ele) {
if (ele.lastElementChild) {//如果该条件是true则在该浏览器（IE或非IE）中兼容
return ele.lastElementChild;
} else {
return ele.lastChild;
}
}
lastChild(oList).style.background = ‘red’;//将获得的节点的背景变成红色
5.5、、nextSibling ; nextElementSibling查找下一个兄弟节点。也是存在兼容性问题。

//查找下一个兄弟节点的封装函数
function nextSibling(ele) {
if (ele.nextElementSibling) {
return ele.nextElementSibling;
} else {
return ele.nextSibling;
}
}
nextSibling(oMid).style.background = ‘red’;
5.6、previousSibling ; previousElementSibling查找上一个兄弟节点。也是存在兼容性问题。
//查找上一个兄弟节点的封装函数
function previousSibling(ele) {
if (ele.nextElementSibling) {
return ele.previousElementSibling;
} else {
return ele.previousSibling;
}
}
previousSibling(oMid).style.background = ‘red’;

Document：是根节点
ParentNode：获取父节点
childNodes：获取所有子节点
firstChild：第一个子节点
lastChlid：获取最后一个子节点

小梦新靓

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS常见Dom节点操作

一、创造节点1.1、创建标签节点：document.createElement();var Div=createElement("标签名")；例子：var snakeDiv=document.createElement("div");-----创建一个div元素，因为是document对象的方法。snakeDiv.setAttribute("class","snake");1.2、...
复制链接

扫一扫

专栏目录