总结获取原生JS(javascript)的父节点、子节点、兄弟节点
关于原生JS获取节点,一直是个头疼的问题,而且调用方法的名字又贼长了,所以我选择用JQ,好像跑题了--
话不多说看代码
获取父节点 及 父节点下所有子节点(兄弟节点)
<ul>
<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>
<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是获取父级节点下的第一个子节点(一切正常,这是为啥呢!难道脸黑);
总结下:我想有的人大概看出了规律,没错,你没猜错,就是标签与标签之间不能换行,每当你换行JS 默认会把换行当成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
ele.removeChild(elem_child[i]);
}
}
console.log(ele.firstChild);
console.log('---------------------分界线-----------------------');
}
</script>
运行一下
一切正常有没有,终于获取到想要的了。
这里我只做了获取父级节点,子节点,其他的获取雷同,所以一定要console,才能知道这些不为人知的秘密。
为了方便大家我就把JS获取节点的方法粘出来:
var a = document.getElementByIdx_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的最后一个子节点
这次就写到这,如有更好的可以留言分享下,在下先谢谢了!
总结获取原生JS(javascript)的父节点、子节点、兄弟节点的更多相关文章
- jquery 父,子,兄弟节点获取
jquery 父,子,兄弟节点获取 jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父 ...
- 总结获取原生JS(javascript)基本操作
var a = document.getElementByIdx_x_x("dom"); jsCopy(a);//调用清理空格的函数 var b = a.childNodes;// ...
- JQuery获取父,子,兄弟节点
jQuery.parent(expr) // 查找父节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...
- JQuery的父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- JQuery的父、子、兄弟节点查找,节点的子节点循环
Query.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children( ...
- jquery父、子、兄弟节点查找
js var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 var ch ...
- JQuery的父、子、兄弟节点查找,节点的子节点循环
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- jQuery的父,子,兄弟节点查找方法
以下罗列一下jQery下节点查找的方法: jQuery.parent(expr) 找父亲节点.能够传入expr进行过滤,比方$("span").parent()或者$(" ...
- javascript 获取HTML DOM父、子、临近节点
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式.内容等.如何获取要更新的元素,是首先要解决的问题.令人欣慰的是,使用JavaScript获取节点的方法有很 ...
随机推荐
- UTF-8和GBK编码的区别
UTF-8:对英文使用8位(一个字节).中文使用24位(三个字节)编码.对于英文字符比较多的网站一般用utf-8来编码以节省空间:包含全世界所有国家需要用到的字符,其编码的蚊子可以在各国各种支持utf ...
- Disruptor多个消费者不重复处理生产者发送过来的消息
1.定义事件事件(Event)就是通过 Disruptor 进行交换的数据类型. package com.ljq.disruptor; import java.io.Serializable; /** ...
- T-SQL触发器,限制一次只能删除一条数据
/****** Object: Trigger [dbo].[trg_del] Script Date: 01/01/2016 12:58:28 ******/ SET ANSI_NULLS ON G ...
- 对CAP原理的理解
对CAP原理的理解 CAP原理按照定义,指的是C(Consistency)一致性,A(Availability)可用性,P(Partition tolerance)分区容错性在一个完整的计算机系统中三 ...
- ibatis in的用法
<dynamic-mapped-statement name="queryLabelservicecodeLogSize" result-class="java.l ...
- JavaScript回调函数及数组方法测试
JavaScript回调函数及数组方法测试 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> &l ...
- RowFilter遇上特殊字符*%'[]\
开发时,时不时需要分析DataView的数据.计算,过滤等 .但是处理的值有可能会遇上是带有特殊字符*.%.'.[.]和\ .需要手动在表达式中,处理这些特殊字符,需要再使用"[" ...
- 创建自己的共用js库
直至昨晚为止,学习了一个多月的MVC与jQuery,从所做的练习中,发觉jQuery的代码也有跟C#语言一样可以重构,多页面有相同使用的方法函数,均可以放置于一个单独立的js文件或是自定义的js库中. ...
- Visual Studio 命令提示符
Visual Studio 命令提示和 SDK 命令提示会自动设置环境变量,使您能够轻松使用 .NET Framework 工具. 在 .NET Framework 4 版 和更高版本中,应使用 Vi ...
- log4Net配置以及使用入门
<configSections> <section name="log4net" type="System.Configuration.Ignor ...