Element multi-layer nesting, JS acquisition problem

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.