If a paragraph of html is too nested, it is still quite troublesome to obtain in JS. I have written several sets of solutions, you can refer to them. If you have a good method, share it, let's take a look.
HTML:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Elements are nested with multiple layers, JS acquisition problem</title></head><body><div id="box"><span>span</span><div><span>span</span><a href=""><span>1</span></a></div><div><a href=""><span>2</span></a></div><div><a href=""><span>3</span></a></div></body></html>
I want to get the span below a.
Idea 1: First get its parent element, then get the elements below this element through a for loop, and then loop the elements below through the elements obtained this time until the target element is obtained.
// Get the parent element var dBox = document.getElementById('box');// Get all divvar dDiv = dBox.getElementsByTagName('div');// Put all a tags in dArr var aArr = [];for(var i=0;i<dDiv.length;i++){aArr.push(dDiv[i].getElementsByTagName('a')[0]);}// Get all spanvar spanArr = [];for(var i=0;i<aArr.length;i++){spanArr.push(aArr[i].getElementsByTagName('span')[0]);}console.log(spanArr);Disadvantages: Consuming performance. If you nest it a little more, it will be quite troublesome to obtain the target element.
Idea 2: Use the parent element to directly obtain the target element, but there is definitely a problem doing this, because it will get all the spans under the parent element. My idea is to judge whether the parent element is a tag.
var box = document.getElementById('box');// Get all the spanvar span = box.getElementsByTagName('span');// Define an array to save the filtered spanvar arr = [];for(var i=0;i<span.length;i++){// To determine whether span is the parent element or not, is it A, if so, add it to arr. if(span[i].parentNode.tagName==='A'){arr.push(span[i]);}}console.log(arr);Although Idea 1 and Idea 2 are OK, they actually have shortcomings. If the layout is more complicated, what you may get may not be so accurate.
If you want to get it accurately, you can add a class to each element. But for class, the browser has compatibility issues.
Suddenly I thought of another method.
Idea: By customizing attributes, but because there are compatibility issues with obtaining js custom attributes in js, I use regularity to judge whether this element has my customized attributes.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Elements are nested with multiple layers, JS acquisition problem</title></head><body><div id="box"><span>span</span><div><span>span</span><a href=""><span isspan='span'>1</span></a></div><div><a href=""><span isspan='span'>2</span></a></div><a href=""><span isspan='span'>3</span></a></div></body></html>
js
// Get the parent element var dBox = document.getElementById('box');// Get all child elements var dSpan = dBox.getElementsByTagName('span');// Current element var str = '';// All filtered span elements var spans = [];for(var i=;i<dSpan.length;i++){// Get the current entire element str = dSpan[i].outerHTML;console.log(str);// Determine whether the current element has a custom attribute if(/isspan="span"/.test(str)){// If so, add it to the array spans.push(dSpan[i]);}}console.log(spans);It is recommended to use class or custom attributes to obtain, and the first and second methods are inaccurate.
The above is the multi-layer nesting of JS elements introduced to you by the editor. I hope it will be helpful to you, and I hope you will support the Wulin.com website more!