总结获取原⽣JS（javascript）的⽗节点、⼦节点、兄弟节点关于原⽣JS获取节点，⼀直是个头疼的问题，⽽且调⽤⽅法的名字⼜贼长了，所以我选择⽤JQ，好像跑题了--
话不多说看代码
获取⽗节点 及 ⽗节点下所有⼦节点（兄弟节点）
<ul>
<li>
<textarea>⽂本⼀</textarea>
<input type=button value="复制" onclick="jsCopy(this)">
</li>原生js和js的区别
<li><textarea>⽂本⼆</textarea>
<input type=button value="复制" onclick="jsCopy(this)">
</li>
<li>
<textarea>⽂本三</textarea><input type=button value="复制" onclick="jsCopy(this)">
</li>
<li><textarea>⽂本四</textarea><input type=button value="复制" onclick="jsCopy(this)"></li>
</ul>
<script type="text/javascript">
function jsCopy(ev){
var ele=ev.parentNode;
//获取input的⽗级节点
console.log(ele);
//获取input的⽗级节点下的所有⼦节点（input及它的兄弟节点）
console.log(ele.childNodes);
//获取input的⽗级节点下的第⼀个⼦节点（我的⽬的就是获取到textarea，但是js就是这么坑）
console.log(ele.firstChild);
console.log('--------------------------分界线---------------------------------');
}
</script>
我们来运⾏⼀下
我们 看看数据
⽂本⼀：第⼀条console获取到了⽗级节点正常（很开⼼），第⼆条console返回的是⽗级元素下的所有节点元素（你会说：what？text？没有⽤到text标签啊！怎么出来的）不急，我们继续看，第三条console是获取⽗级节点下的第⼀个⼦节点（what？这是啥？我是获取第⼀个textatea啊，这获取的什么？我⼀⼝⽼⾎）；继续->
⽂本⼆：第⼀条console获取到了⽗级节点正常（很严肃），第⼆条console返回的是⽗级元素下的所有节点元素（你会说：更上⾯的⽂本⼀不是⼀样的吗？）仔细看！是不是少了个‘text‘，我们继续看，第三条console是获取⽗级节点下的第⼀个⼦节点（what？获取到了，开⼼，郁闷了为什么啊）；继续->
⽂本三：第⼆条console返回的是⽗级元素下的所有节点元素（跟⽂本⼀ 差不多⼀样，只是中间少了个text，抓狂了，难道有什么规律？）我们继续看，第三条console是获取⽗级节点下的第⼀个⼦节点（跟⽂本⼀ 差不多⼀样，获取的#Text）；继续->
⽂本三：第⼆条console返回的是⽗级元素下的所有节点元素（超级正常有没有，⾼兴地飞起--这是你们再回去看⼀下⽂本四的代码）我们继续看，第三条console是获取⽗级节点下的第⼀个⼦节点（⼀切正常，这是为啥呢！难道脸⿊）;
总结下：我想有的⼈⼤概看出了规律，没错，你没猜错，就是标签与标签之间不能换⾏，每当你换⾏J
S 默认会把换⾏当成text元素加⼊到数组中，这就是你获取不到想要的节点的原因。
那么问题来了，这个如何解决呢？
答：其实很简单 就是删除  数组中没必要的元素（text）；
（我知道你们再想什么，嘿嘿，讲了⼀堆有的没的，敢不敢上代码）
好我就上代码：
<script type="text/javascript">
function jsCopy(ev){
var ele=ev.parentNode;
var elem_child = ele.childNodes;
for(var i=0 in elem_child){
//遍历⼦元素数组
if(elem_child[i].nodeName == "#text" && !/\S/.test(elem_child[i].nodeValue)) {
//删除数组中的text
}
}
console.log(ele.firstChild);
console.log('---------------------分界线-----------------------');
}
</script>
运⾏⼀下
⼀切正常有没有，终于获取到想要的了。
这⾥我只做了获取⽗级节点，⼦节点，其他的获取雷同，所以⼀定要console，才能知道这些不为⼈知的秘密。为了⽅便⼤家我就把JS获取节点的⽅法粘出来：
var a = ElementByIdx_x_x("dom");
jsCopy(a);//调⽤清理空格的函数
var b = a.childNodes;//获取a的全部⼦节点；
var c = a.parentNode;//获取a的⽗节点；
var d = a.nextSibling;//获取a的下⼀个兄弟节点
var e = a.previousSibling;//获取a的上⼀个兄弟节点
var f = a.firstChild;//获取a的第⼀个⼦节点
var g = a.lastChild; //获取a的最后⼀个⼦节点
这次就写到这，如有更好的可以留⾔分享下，在下先谢谢了！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。