先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比
JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当最DOM元素
原生的JS获取ID为test的元素下的子元素。可以用：
&div id="dom"&
&wbr&&wbr&&wbr&&div&&/div&&/wbr&&/wbr&&/wbr&
&wbr&&wbr&&wbr&&div&&/div&&/wbr&&/wbr&&/wbr&
&wbr&&wbr&&wbr&&div&&/div&&/wbr&&/wbr&&/wbr&
var a = docuemnt.getElementById("dom").getElementsByTagName_r("div"); 这样是没有问题的
此时a.length=3；
但是我们现在换一种方法获取就是我上章提到的var b = document.getElementByIdx_x("dom").childN如果&wbr&&wbr&这样alert(b.length)IE浏览器上没问题还是3，但是在FF浏览器上会提示是4，这就是因为FF把换行也当做一个元素了。&br&
所以我们必须处理一下才能用JS的那些属性。处理思想很简单就是遍历一下这些元素。把元素类型为空格而且是文本都删除。处理函数是这样的&/wbr&&/wbr&
function del_space(elem){
&wbr&var elem_child = elem.childN//得到参数元素的所有子元素&/wbr&
&wbr&for(var i=0;i&elem_child.i++){&wbr&//遍历子元素&br&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&if(elem_child.nodeName == "#text" && !/\S/.test(elem_child.nodeValue))&wbr&{&wbr&&br&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&elem.removeChild(elem_child)}&br&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&}&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&
&wbr&&wbr&}&/wbr&&/wbr&
上述函数遍历子元素，当元素里面有节点类型是文本并且该节点的节点值是空的。就把他删除。
nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符
test() 方法用于检测一个字符串是否匹配某个模式.语法是： RegExpObject.test(string)
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
nodeValue表示得到这个节点里的值。
removeChild则是删除元素的子元素。
下面就是重点了啊！
&div id = "dom"&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&div&&/div&&wbr&&br&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&wbr&&div&&/div&&wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&
&wbr&&wbr&&wbr&&wbr&&div&&/div&&wbr&&br&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&
&wbr&&/div&&/wbr&
&script&&wbr&&wbr&function dom(){&br&&wbr&&wbr&&wbr&&wbr&&wbr&var a = document.getElementByIdx_x_x("dom");&br&&wbr&&wbr&&wbr&&wbr&&wbr&del_space(a);调用清理空格的函数&br&&wbr&&wbr&&wbr&&wbr&&wbr&var b = a.childN获取a的全部子节点；&br&&wbr&&wbr&&wbr&&wbr&&wbr&var c = a.parentN获取a的父节点；&br&&wbr&&wbr&&wbr&&wbr&&wbr&var d = a.nextS获取a的下一个兄弟节点&br&&wbr&&wbr&&wbr&&wbr&&wbr&var e = a.previousS获取a的上一个兄弟节点&br&&wbr&&wbr&&wbr&&wbr&&wbr&var f = a.firstC获取a的第一个子节点&br&&wbr&&wbr&&wbr&&wbr&&wbr&var g = a.lastC获取a的最后一个子节点&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&&/wbr&
下面介绍JQUERY的父，子，兄弟节点查找方法
jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从
p元素开始找,等同于$("p
——————————————————————————————————————————————————————
上面是我从网络所摘的解决js和jquery得到父子元素等的方法，但在解决的时候还是会产生问题：
&script type="text/javascript"&
var dom=document.getElementById("dom");
//为了避免ff出现的问题，因此对子元素进行过滤处理
del_space(dom);
//1.获取dom下的所有子节点
var a = dom.childN//全部子节点；
var b = dom.parentN//父节点；
var e = dom.firstC//第一个子节点
var f = dom.lastC//最后一个子节点
//不知何原因，待日后研究 下一个兄弟节点和上一个兄弟节点都无法获取的到...--!
var c = dom.nextSbiling.nodeT//下一个兄弟节点
var d = dom.previousS//上一个兄弟节点
//jQuery解决
var a1 = $("#dom").children();//全部子节点；
var b2 = $("#dom").parent();//父节点；
var c3 = $("#dom").next();//下一个兄弟节点
var d4 = $("#dom").prev();//上一个兄弟节点
var e5 = $("#dom").children(":first");//第一个子节点
var f6 = $("#dom").children(":last");//最后一个子节点
alert(a.length);
for(var i=0;i&a.i++){
alert(a[i].nodeName+":"+a[i].nodeValue+":"+/\s/.test(a[i].nodeValue));
//ff下面会默认将你的换行当作dom元素，因此必须进行过滤处理，IE下不会产生类似问题
function del_space(elem){
var elem_child = elem.childN//得到参数元素的所有子元素
for ( var i = 0; i & elem_child. i++) { //遍历子元素
if (elem_child[i].nodeName == "#text") {
elem.removeChild(elem_child[i]);
nodeType常量
nodeType值
Node.ELEMENT_NODE
Node.TEXT_NODE
Node.DOCUMENT_NODE
Node.COMMENT_NODE
注释的文本
DocumentFragment
Node.DOCUMENT_FRAGMENT_NODE
document片断
Node.ATTRIBUTE_NODE
createAttribute()
用指定的名字创建新的Attr节点。
createComment()
用指定的字符串创建新的Comment节点。
createElement()
用指定的标记名创建新的Element节点。
createTextNode()
用指定的文本创建新的TextNode节点。
getElementById()
返回文档中具有指定id属性的Element节点。
getElementsByTagName()
返回文档中具有指定标记名的所有Element节点。
attributes
如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes
以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild
以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点
节点的名字，Element节点则代表Element的标记名称。
代表节点的类型。
parentNode
以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点
appendChild()
通过把一个节点增加到当前节点的childNodes[]组，给文档树增加节点。
cloneNode()
复制当前节点，或者复制当前节点以及它的所有子孙节点。
hasChildNodes()
如果当前节点拥有子节点，则将返回true。
insertBefore()
给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。
removeChild()
从文档树中删除并返回指定的子节点。
replaceChild()
从文档树中删除并返回指定的子节点，用另一个节点替换它。
浏览: 34899 次
WebUI最新版免费下载
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
1.文字描述如下：
有A、B两个同级div，A的z-index为888，B的z-index为999，A下有H，z-index为1000,但是发现H并没有在B的上层，不改变层次结构能否使H在B的上层？
2.代码描述如下
&div class='A' style="background-color:rgba(0, 0, 0, 0.9);position:z-index: 888;"&
&h1 class='H' style="position:color: #z-index: 1000;display:"&
This is a heading
&div class='B' style="position:height: 100%;width: 100%;background: #000;z-index: 999;"&&/div&
3.可以改变任意样式，但是不能改变（A&H,B）的层次结构以及他们的z-index，如何使得H在B之上?
4，划重点！！！！
仅不能改变（A&H,B）的层次结构以及他们的z-index，其他style随便，包括但不限于position、width，height随便改，随便加，随便减”仅不能改变（A&H,B）的层次结构以及他们的z-index，其他style随便，包括但不限于position、width，height随便改，随便加，随便减”仅不能改变（A&H,B）的层次结构以及他们的z-index，其他style随便，包括但不限于position、width，height随便改，随便加，随便减”
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
根据规范，z-index是应用到定位元素的，也就是position属性不为static的元素（感谢@a_dust和@ymwangel），否则，设置z-index是没有意义的；z-index的作用有两点，一是设置在当前堆叠上下文(stacking context)中的层级；二是创建一个新的堆叠上下文；z-index并不是设置的值越高，就会越靠近用户，还和堆叠上下文有关系；
在同一个堆叠上下文中的元素，z-index越高越靠近用户；
在不同堆叠上下文中的元素，如果堆叠上下文一距离用户更近，那么它的所有子元素都在另一个堆叠上下文子元素的前面，也就是离用户更近，不同堆叠上下文中的子元素不可能发生交叉；
所以，z-index其实不是一个绝对值，而是一个相对值；
举例如下：
&div class="div1"&
&div class="div1div1"&
&div class="div1div1div1"&&/div&
&div class="div2"&
&div class="div2div1"&&/div&
margin: 0;
width: 700
height: 700
background:
.div1div1 {
width: 300
height: 300
background:
z-index: 500;
.div1div1div1 {
width: 200
height: 200
background:
z-index: 10;
width: 600
height: 600
background:
z-index: 400;
.div2div1 {
width: 500
height: 500
background:
z-index: 800;
对于.div1div1div1和.div2div1，虽然后者的z-index(800)高于前者(10)，但是因为前者所在的堆叠上下文(.div1div1)的z-index(500)高于后者所在的堆叠上下文(.div2div1)的z-index(400)，所以前者是在后者上面的。
评论里面你设置div{z-index:9;position:}会建立一个新的堆叠上下文，和div同级的元素是0，img元素是9 -1，因为9&0，所以img是在上面的。
按照你的题目，其实position属性是不能改的，如果把position属性改为relative，那你的z-index属性其实就不起作用了，在z-index都起作用的情况下，是没有办法达到你的要求的，理由如下：
H 888 1000
A, B和H的层级如上，因为888 & 999，所以A和H都在B的下边。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不能父级限制了子元素的 位置
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
不能。因为你的H和B都是position: absolute，可以认为，绝对定位的元素在z轴上的偏移量远远大于z-index可以设置的量（可以认为绝对定位元素有着无穷大的z偏移）。因此，H和B两个元素的z-index实际上并不起到任何作用。
去掉了position: absolute之后，代码如下
&div class='A' style="background-color:height:100margin-bottom: -200padding: 30display:z-index: 888;"&
&h1 class='H' style="color: #z-index: 1000;margin-top: 60display:"&
This is a heading
&div class='B' style="height: 100%;width: 100%;background: #000;z-index: 999;"&&/div&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先A,B,H都是绝对定位，然后z-index,B&A了，自然而然，B就挡住了A，H在A里面，又是绝对定位于A，自然也就挡住H了，解决方法就是设置z-index,A&B就行了。这样布局，H的z-index，没有实在的意义(只要遮住了A，也就遮住了H)！除非H不在A里面！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以想象成每一个元素的z-index都声明了一个平面世界，平面世界的高度就是z-index的值。 而子元素的z-index都是在这个世界相比较。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果外面的z-index前者小于后者，没有办法让前者的子节点超过后者，只能改变层级，不过这样子的话，前者就可能把后者全都档住了，所以楼主还是把H从A中拿出来对应的层级设置好就能达到效果了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我也遇到过同样的问题，只不过我要的是在特定的情况下H会显示出来，而且A和B除了H之外，完全没有交错的地方。我的解决方法是：在特定的条件的时候，设置A的z-index & B的z-index。
代码不完全，A和B都没有宽度和高度，不知道想要什么样的结果？是想要，既要显示H，又要显示B的内容么？如果是的话，可以让B中覆盖H的那部分的背景颜色透明，这样H就可以显示了。?如果不是这种效果，就没办法了。只要A的z-index & B的z-index，H就无法覆盖。
仅供参考，欢迎交流
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。(木梓设计)
(Cherry。)
(淅沥小雨)
第三方登录：js jquery获取当前元素的兄弟级 上一个 下一个元素_jquery
作者：用户
本文讲的是js jquery获取当前元素的兄弟级 上一个 下一个元素_jquery，
var chils= s.childN
//得到s的全部子节点
var par=s.parentN
//得到s的父节点
var ns=s.nextS
//获得s的下一个兄弟节点
var chils= s.childN
//得到s的全部子节点
var par=s.parentN
//得到s的父节点
var ns=s.nextS
//获得s的下一个兄弟节点
var ps=s.previousS
//得到s的上一个兄弟节点
var fc=s.firstC
//获得s的第一个子节点
var lc=s.lastC
//获得s的最后一个子节点
JS获取节点父级，子级元素
先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。
JS的方法会比JQUERY麻烦很多，主要则是因为FF浏览器，FF浏览器会把你的换行也当作DOM元素
&div id="test"&
&div&&/div&
&div&&/div&
原生的JS获取ID为test的元素下的子元素。
var a = docuemnt.getElementById("test").getElementsByTagName_r("div");
这样是没有问题的
此时a.length=2；
但是如果我们换另一种方法
var b =document.getElementByIdx_x("test").childN
此时b.length 在IE浏览器中没问题，其依旧等于2，但是在FF浏览器中则会使4，是因为FF把换行也当做一个元素了。
所以，在此，我们就要做处理了，需遍历这些元素，把元素类型为空格而且是文本都删除。
function del_ff(elem){
var elem_child = elem.childN
for(var i=0; i&elem_child.i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
上述函数遍历子元素，当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。
nodeNames可以得到一个节点的节点类型，/\s/是非空字符在JS里的正则表达式。前面加！,则表示是空字符
test() 方法用于检测一个字符串是否匹配某个模式.语法是： RegExpObject.test(string)
如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
nodeValue表示得到这个节点里的值。
removeChild则是删除元素的子元素。
之后，在调用子，父，兄，这些属性之前，调用上面的函数把空格清理一下就可以了
&div id="test"&
&div&&/div&
&div&&/div&
function dom() {
var s= document.getElementByIdx_x("test");
del_ff(s);
//清理空格
var chils= s.childN //得到s的全部子节点
var par=s.parentN
//得到s的父节点
var ns=s.nextS
//获得s的下一个兄弟节点
var ps=s.previousS //得到s的上一个兄弟节点
var fc=s.firstC
//获得s的第一个子节点
var lc=s.lastC
//获得s的最后一个子节点
下面介绍JQUERY的父，子，兄弟节点查找方法
jQuery.parent(expr)
找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class")
jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
jQuery.children(expr).返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
jQuery.contents(),返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个
jQuery对象返回，children()则只会返回节点
jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
jQuery.prevAll()，返回所有之前的兄弟节点
jQuery.next(),返回下一个兄弟节点，不是所有的兄弟节点
jQuery.nextAll()，返回所有之后的兄弟节点
jQuery.siblings(),返回兄弟姐妹节点，不分前后
jQuery.find(expr),跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分，而jQuery.find()
的返回结果，不会有初始集合中的内容，比如$("p"),find("span"),是从&p&元素开始找&span&,等同于$("p span")
以上介绍就是本文关于js jquery获取当前元素的兄弟级 上一个 下一个元素，希望对大家有所帮助。
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js获取下一个元素
js获取上一个元素
jquery 下一个元素、jquery同级下一个元素、jquery下一个兄弟节点、jquery获取下一个元素、jquery下一个兄弟，以便于您获取更多的相关知识。
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
40+云计算产品，6个月免费体验
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
云服务器9.9元/月，大学必备
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！js取父节点的兄弟节点的某个子元素怎么写
[问题点数：40分，结帖人maxldwy]
js取父节点的兄弟节点的某个子元素怎么写
[问题点数：40分，结帖人maxldwy]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2018年1月 Web 开发大版内专家分月排行榜第一2017年12月 Web 开发大版内专家分月排行榜第一2017年6月 Web 开发大版内专家分月排行榜第一2017年2月 Web 开发大版内专家分月排行榜第一2016年3月 Web 开发大版内专家分月排行榜第一2015年8月 Web 开发大版内专家分月排行榜第一
2018年4月 Web 开发大版内专家分月排行榜第二2018年3月 Web 开发大版内专家分月排行榜第二2018年2月 Web 开发大版内专家分月排行榜第二2017年11月 Web 开发大版内专家分月排行榜第二2017年10月 Web 开发大版内专家分月排行榜第二2017年9月 Web 开发大版内专家分月排行榜第二2017年8月 Web 开发大版内专家分月排行榜第二2017年7月 Web 开发大版内专家分月排行榜第二2017年5月 Web 开发大版内专家分月排行榜第二2017年4月 Web 开发大版内专家分月排行榜第二2017年3月 Web 开发大版内专家分月排行榜第二2017年1月 Web 开发大版内专家分月排行榜第二2016年11月 Web 开发大版内专家分月排行榜第二2016年9月 Web 开发大版内专家分月排行榜第二2016年8月 Web 开发大版内专家分月排行榜第二2016年7月 Web 开发大版内专家分月排行榜第二2016年6月 Web 开发大版内专家分月排行榜第二2016年5月 Web 开发大版内专家分月排行榜第二2016年4月 Web 开发大版内专家分月排行榜第二2016年2月 Web 开发大版内专家分月排行榜第二2015年9月 Web 开发大版内专家分月排行榜第二2015年7月 Web 开发大版内专家分月排行榜第二2015年6月 Web 开发大版内专家分月排行榜第二2015年4月 Web 开发大版内专家分月排行榜第二2015年3月 Web 开发大版内专家分月排行榜第二2015年2月 Web 开发大版内专家分月排行榜第二
2017年6月 扩充话题大版内专家分月排行榜第二2016年5月 扩充话题大版内专家分月排行榜第二2015年5月 扩充话题大版内专家分月排行榜第二2014年11月 扩充话题大版内专家分月排行榜第二2013年10月 扩充话题大版内专家分月排行榜第二2013年8月 扩充话题大版内专家分月排行榜第二
2018年2月 扩充话题大版内专家分月排行榜第三2017年7月 扩充话题大版内专家分月排行榜第三2015年8月 扩充话题大版内专家分月排行榜第三
匿名用户不能发表回复！|