js中如何获取div下的二级子元素

Jquery的遍历，其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素。以某项选择开始，并沿着这条线进行移动，或向上（父级）、或向下（子级）、或水平（同级），直到找到目标元素为止，这种移动也被成为对DOM进行遍历。

其实对于DOM来说，这个不陌生，Jquery的遍历也就是在DOM树上上蹿下跳，当然这种上蹿下跳不是没有规则的，胡乱的找是让人鄙视的。通俗的说，在一颗树上（你也在树上，已经爬上去了，哈哈），以你所在的位置为起点，以树上有个桃子为目的地，你的这个起点也就是当前 this ,去移动去摘桃子的过程就是Jquery遍历，所以相对应的Jquery所衍生出的遍历方法可以分为三大类，即Jquery遍历之父级（祖先）、同级（同胞）和子级（后代）三种。

原生JS有3种方式来获取元素:

getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]className==className){ ele[elelength]=all[i]; } } return ele; } consolelog(getElementsByClassName("entry")); consolelog(getElementsByClassName("entry","div"));

实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的

tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等

上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办

明显通过className==是不行了

所以我们只要把上面两篇文章的hasclass函数搬过来就OK了，我们再次来改造下我们的getElementsByClassName函数

function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]classNameclassNamematch(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){ ele[elelength]=all[i]; } } return ele; }

这样就能处理一个元素含有多个classname的情况了

//因为很久没写代码估计有点错误，不过思路是这样，要注意的就是有个方法是获取所有子元素，貌似是childNodes

完全可以分成两个来获取，第一个获取父div的子div,第二个获取子div下的所有li

documentgetElementById("aa")childNodes()//这样就获取了aa下面所有div

同理获取子div下面的li,手打，如果可以解决请给分。谢谢

获取制定元素的方法有2种，分别是children()方法和find()方法。

1、children()方法：获取该元素下的直接子集元素

2、find()方法：获取该元素下的所有子集元素

分别以以下HTML代码为例：<ul><li>list1<ul><li>list1-1</li><li>list1-2</li></ul></li><li>list2<ul><li>list2-1</li><li>list2-2</li></ul></li><li>list3<ul><li>list3-1</li><li>list3-2</li></ul></li></ul>

children()方法获取ul下面直接子集元素li：$("ul")children("li")

需要注意的是，如果li元素下还有li元素，children方法将不会被获取。我们可以用length来测试获取的个数“$("ul")children("li")length”，最后输出结果为3

find()方法获取ul下所有元素li：$("ul")find("li")

需要注意的是，find方法会无限循环查找ul标签节点下的li，一直找到没有为止，用length来测试获取个数“$("ul")find("li")length”，最后输出结果为9

children和find的区别：children只会查找直接子集，而find会跨越层级查找，一直找到没有为止。

jQuery的parent()方法可以获得当前匹配元素集合中每个元素的父元素，因此可以用以实现选择当前元素的父元素下的另一个子元素。下面给出实例演示：

1、创建Html元素

<div class="box">

<span>实例演示：获取当前点击li标签的父标签下类型为bb4的子标签</span><br>

<div class="content">

<ul>

<li class="bb1">哈哈，我是bb1</li>

<li class="bb2">click me</li>

<li class="bb3">哈哈，我是bb3</li>

<li class="bb4">哈哈，我是bb4</li>

</ul>

</div>

</div>

2、设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

li{margin:5px;list-style: none;}

3、编写jquery代码

$(function(){

$("li")click(function() {

alert($(this)parent()find("bb4")html());

});

});

4、观察效果：点击任一个li标签都将d出最后一个li标签的文字

1、比如我们要得到或者获取到这个div元素。

2、我们就可以这样做，使用$("div")，这就是直接通过元素名来获取，注意要加引号哦。

3、或者你可以给元素添加类，如图，我就加了一个bd类。

4、然后我们这样$("bd")也是可以得到div元素的哦，注意类名是需要一个点的哦。

5、此外，id也是一个不错的方法，不过id只能有一个，不能重名哦。

6、jQuery中id要加#号才会有效哦。

7、最后我就整理好jQuery一些比较常用的获取元素的方法。

这个使用了jQuery,代码如下，因为浏览器解析问题，会出现不兼容问题，给你一个大体代码：

<style type="text/css">

#container div{float:left;}

</style>

<div id="container" style="1000px;">

<div></div>

</div>

<script>

$(document)ready(function(){

var $divs=$("#container>div")

$sum=$divssize();

$divscss({"width":1000/$sum+"px");

});

</script>

上述的意思是获取子元素div个数，然后计算获得每个div的宽度，然后设置其宽度。因为要一行，所以样式表要将其设置为浮动。因为不同浏览器解析不同，有可能会出现串行问题，这个自己优化吧

以上就是关于js中如何获取div下的二级子元素全部的内容，包括:js中如何获取div下的二级子元素、getelementbytagname("div")方法可以获取所有的DIV元素，但是获取到集合后，如何进一步获取class属性为特、js获取指定id的元素中多个个div以及div中的li等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！