JS获取元素多层嵌套思路详解

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

JS获取元素多层嵌套思路详解

来源：阅读：1095 次日期：2016-06-27 16:39:59

温馨提示：小编为您整理了“JS获取元素多层嵌套思路详解”,方便广大网友查阅！

这篇文章主要介绍了JS获取元素多层嵌套思路详解的相关资料,需要的朋友可以参考下

如果一段html嵌套过多，在js中获取还是比较麻烦的，我写了几套方案，大家可以参考参考，如果你有好的方法，也分享出来，让我们瞧瞧。

HTML：

<!DOCTYPE html>

<head>

<title>元素多层嵌套，JS获取问题</title>

</head>

<body>

<div>

</a>

</div>

<div>

</a>

</div>

<div>

</a>

</div>

</body>

</html>

我想获取a下面的span。

思路1：先获取它的父元素，然后通过for循环诶个获取这个元素下面的元素，然后通过此次获取到的元素在依次循环获取下面的元素，直到获取到目标元素。

// 获取父元素

var dBox = document.getElementById('box');

// 通过父元素获取所有div

var dDiv = dBox.getElementsByTagName('div');

// 将所有的a标签放到dArr中

var aArr = [];

for(var i=0;i<dDiv.length;i++){

aArr.push(dDiv[i].getElementsByTagName('a')[0]);

}

// 通过a标签获取所有span

var spanArr = [];

for(var i=0;i<aArr.length;i++){

spanArr.push(aArr[i].getElementsByTagName('span')[0]);

}

console.log(spanArr);

缺点：消耗性能，如果再嵌套多一点，那获取目标元素就相当的麻烦。

思路2：通过父元素，直接获取目标元素，但是这样做肯定是有问题的，因为它会把父元素下的所有span都获取到，我的想法是将获取到的这些元素进行判断它的父元素是不是a标签。

var box = document.getElementById('box');

// 获取box下面所有的span

var span = box.getElementsByTagName('span');

// 定义一个数组保存过滤后的span

var arr = [];

for(var i=0;i<span.length;i++){

// 诶个判断span是父元素是不是A，如果是就把它添加到arr中。

if(span[i].parentNode.tagName==='A'){

arr.push(span[i]);

}

console.log(arr);

思路1跟思路2虽然可以，但其实它们都有缺点，如果布局再复杂一些，可能获取到的就不是那么精确了。

如果想精确的获取可以给每个元素添加一个class。但class的话，浏览器有兼容问题。

突然想到了另外一个方法。

思路：通过自定义属性，但是因为在js中获取js自定义属性有兼容问题，我就用正则来判断，这个元素是否有我自定义的属性。

<!DOCTYPE html>

<head>

<title>元素多层嵌套，JS获取问题</title>

</head>

<body>

<div>

</a>

</div>

<div>

</a>

</div>

<div>

</a>

</div>

</body>

</html>

// 获取父元素

var dBox = document.getElementById('box');

// 获取所有子元素

var dSpan = dBox.getElementsByTagName('span');

// 当前元素

var str = '';

// 过滤后的所有span元素

var spans = [];

for(var i=;i<dSpan.length;i++){

// 获取当前整个元素

str = dSpan[i].outerHTML;

console.log(str);

// 判断当前这个元素是否有自定义属性

if(/isspan="span"/.test(str)){

// 有就添加到数组中

spans.push(dSpan[i]);

}

console.log(spans);

建议用class或者自定义属性获取，第一和第二种方法获取的不精确。

以上所述是小编给大家介绍的JS获取元素多层嵌套的问题，希望对大家有所帮助

上一篇：JavaScript操作选择对象的简单实例

下一篇：怎么限制input的text里输入的值只能是数字(正则、js)

手机网站地址：JS获取元素多层嵌套思路详解

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！