DOM Core 获取某节点下最后一个子元素节点、第一个子元素节点、下一个兄弟元素节点、上一个兄弟元素节点

时间：2022-12-04 15:24:24

关于浏览器对于换行符等理解成文本节点的问题，这个文章有详细讲解 浏览器对换行符理解成文本节点的原因研究

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript获取某节点下最后一个子元素节点 和 第一个子元素节点</title>
</head>

<body>
<p>
0
<em>aaa</em>
<em>bbb</em>
</p>
<script>
//通过通配符获取到P元素节点下所有的元素节点，然后把节点数组长度-1，就是数组中最后一个数组元素的下标，由此可以得到最后一个元素节点
var txt = document.getElementsByTagName("p")[0];
var alle = txt.getElementsByTagName("*");
//最后一个子元素节点
alert(alle[alle.length-1].nodeName);
//第一个子元素节点
alert(alle[0].nodeName);
//lastChild可以获取某节点下的最后一个节点，但是并不一定是元素节点，可能是文本节点，例如上面的html代码中</em>和</p>之间因为换行符而被浏览器理解成一个文本节点
var e = txt.lastChild;
alert(e.nodeName);
//firstChild可以获取某节点下的第一个节点，但是并不一定是元素节点，可能是文本节点，例如上面的html代码中<p>和<em>之间的0
var ee = txt.firstChild;
alert(ee.nodeName);
</script>
</body>
</html>

 

DOM Core 提供了 lastChild 方法可以让我们获取某个节点下的最后一个节点，但是这个节点有可能不是元素节点，有可能是文本节点，因为有的浏览器可能会把换行符解释为一个文本节点，那么我们用 lastChild 就得不到我们想要的最后一个元素节点。上面提供的方法可以获取到。 

总结：

childNodes 可以获取某节点下的所有子节点，但是也包括文本节点，比如换行符就是文本节点

而 getElementsByTagName("*") 则可以获取某节点下的所有子元素节点，不包括文本节点，然后把子元素节点数组的长度-1就得到了最后一个子元素节点

同理，用子元素节点数组下标为0的那个可以获取到第一个子元素节点 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript获取某节点后下一个兄弟元素节点</title>
</head>

<body>
<p id="txt">
<em>aaa</em>
</p>
test
<p>
<em>bbb</em>
</p>
<script>
function getNextElement(node){
	if(node.nodeType == 1){
		return node;
	}
	if(node.nextSibling){
		return getNextElement(node.nextSibling);
	}
	return null;
}
var txt = document.getElementById("txt");
var sib = getNextElement(txt.nextSibling);
alert(sib.nodeName);
alert(txt.nextSibling.nodeName);
</script>
</body>
</html>

DOM Core 提供了 nextSibling 方法可以让我们获取某个节点的下个兄弟节点，但是也有可能这不是个元素节点，是个文本节点，上面提供了一个可以直接获取下个兄弟元素节点的函数

总结：

nextSibling 可以获取某节点下个兄弟节点，但是也可能是文本节点

而 getNextElement(node) 函数则可以获取某节点的下个兄弟元素节点，不包括文本节点，原理就是通过对比节点类型，1 是元素节点 2 是属性节点 3是文本节点

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>javascript获取某节点上一个兄弟元素节点</title>
</head>

<body>
<p>
<em>aaa</em>
</p>
test
<p id="txt">
<em>bbb</em>
</p>
<script>
function getPrevElement(node){
	if(node.nodeType == 1){
		return node;
	}
	if(node.previousSibling){
		return getPrevElement(node.previousSibling);
	}
	return null;
}
var txt = document.getElementById("txt");
var sib = getPrevElement(txt.previousSibling);
alert(sib.nodeName);
alert(txt.previousSibling.nodeName);
</script>
</body>
</html>

根据 getNextElement(node) 可以很容易的就写出获取上一个兄弟元素节点的函数 getPrevElement(node)

 

 

标签：

相关文章