孤芳自赏的花 - 孤芳自赏,傲然自爱
欢迎光临:孤芳自赏的花 - 孤芳自赏,傲然自爱
更多>> 博客
JS函数:返回下一个元素节点而不是下一个节点
来源:孤芳自赏的花    发表于:2016-11-08 11:00:24    访问量:176
function getNextElement(node)
{    if (node.nodeType == 1) return node;    if (node.nextSibling) return getNextElement(node.nextSibling);    return null;
}

 

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

复制代码

<!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>之间的0var 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)

 


(编辑:孤芳自赏的花)
评论内容
* 请输入内容
是否公开
验证码 * 请输入验证码