Home > Developer > Web Develop
If a piece of HTML nested too much, in JS to get or more trouble, I wrote a few sets of plans, we can refer to the reference, if you have a good way, also share out, let us look.
Html:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Element multi-layer nesting, JS acquisition problem</title></Head><Body> <DivID= "box"> <span>Span</span> <Div> <span>Span</span> <ahref=""> <span>1</span> </a> </Div> <Div> <ahref=""> <span>2</span> </a> </Div> <Div> <ahref=""> <span>3</span> </a> </Div> </Div></Body></HTML>
I want to get the span under a.
Idea 1: First get its parent element, and then through the for loop to get the element below this element, and then through the acquisition of the element in turn gets the following element, until the target element is obtained.
//Get parent element varDbox = document.getElementById (' box '); //get all div from parent element varDdiv = dbox.getelementsbytagname (' div '); //put all the a tags in the Darr varAarr = []; for(vari=0;i<ddiv.length;i++) {Aarr.push (Ddiv[i].getelementsbytagname (' A ') [0]); } //get all spans with a tag varSpanarr = []; for(vari=0;i<aarr.length;i++) {Spanarr.push (Aarr[i].getelementsbytagname (' span ') [0]); } console.log (Spanarr);
Cons: Consume performance, and if you nest a bit more, it's quite a hassle to get the target element.
Idea 2: Get the target element directly from the parent element, but it's definitely problematic because it takes all of the spans under the parent element, and my idea is to get these elements to judge whether the parent element is a tag.
var box = document.getElementById (' box ' // get all of the span var span = box.getelementsbytagname (' span ' ); // define an array save filtered span var arr = []; for (var i=0;i<span.length;i ++ // Ah, a judge sp. An is the parent element is not a, and if so, add it to arr. if (span[i].parentnode.tagname=== ' A ' ) {Arr.push (span[i]); }} console.log (arr); Thinking 1 and thinking 2 although it is possible, but in fact they all have shortcomings, if the layout is more complex, it may be obtained is not so accurate.
If you want to get accurate, you can add a class to each element. But the browser has a compatibility problem with class.
Suddenly thought of another method.
Idea: through custom properties, but because in JS to get the JS custom properties have compatibility problem, I use the regular to determine whether this element has my own custom properties.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Element multi-layer nesting, JS acquisition problem</title></Head><Body> <DivID= "box"> <span>Span</span> <Div> <span>Span</span> <ahref=""> <spanIsspan= ' span '>1</span> </a> </Div> <Div> <ahref=""> <spanIsspan= ' span '>2</span> </a> </Div> <Div> <ahref=""> <spanIsspan= ' span '>3</span> </a> </Div> </Div></Body></HTML>
Js
//Get parent element varDbox = document.getElementById (' box '); //get all child elements varDspan = Dbox.getelementsbytagname (' span '); //Current Element varstr = "; //all the span elements after filtering varspans = []; for(vari=0;i<dspan.length;i++){ //gets the current entire elementstr =dspan[i].outerhtml; Console.log (str); //determines whether the current element has a custom attribute if(/isspan= "Span"/. Test (str)) { //Is added to the arraySpans.push (Dspan[i]); }} console.log (spans);
It is recommended to get the class or custom attributes, and the first and second methods get imprecise.
Element multi-layer nesting, JS acquisition problem
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
