getAttribute() versus Element-object-eigenschappen?

Uitdrukkingen als Element.getAttribute("id") en Element.id terug hetzelfde.

Die moet worden gebruikt wanneer het nodig de kenmerken van een HTMLElement object?

Is er een cross-browser probleem met deze methoden, zoals getAttribute() en setAttribute()?

Of eventuele impact op de prestaties tussen direct toegang tot object-eigenschappen vs met behulp van deze attribuut methoden?

InformationsquelleAutor P K | 2012-04-23

 

7 Replies
  1. 118

    getAttribute haalt de kenmerk van een DOM-element, terwijl el.id haalt de eigendom van deze DOM-element. Ze zijn niet hetzelfde.

    De meeste van de tijd, DOM eigenschappen worden gesynchroniseerd met attributen.

    Echter, de synchronisatie garandeert niet dezelfde waarde. Een klassiek voorbeeld is tussen el.href en el.getAttribute('href') voor een anker element.

    Bijvoorbeeld:

    <a href="/" id="hey"></a>
    <script>
    var a = document.getElementById('hey')
    a.getAttribute('href') //"/"
    a.href //Full URL except for IE that keeps '/'
    </script>

    Dit gebeurt omdat volgens de W3C, het href-eigendom moet worden van een goed gevormd link. De meeste browsers respecteer deze standaard (raden wie niet?).

    Er is een ander geval voor de input’s checked eigendom. De DOM eigenschap retourneert true of false terwijl het kenmerk retourneert de string "checked" of een lege tekenreeks.

    En vervolgens zijn er een aantal eigenschappen die worden gesynchroniseerd one-way alleen. Het beste voorbeeld is de value eigendom van een input element. Het veranderen van de waarde door middel van de DOM eigendom zal niet veranderen, het kenmerk (edit: check de eerste reactie voor meer precisie).

    Vanwege deze redenen, zou ik stel voor dat je gebruik blijven maken van de DOM eigenschappen, en niet de kenmerken, zoals hun gedrag verschilt tussen de browsers.

    In werkelijkheid zijn er slechts twee gevallen waarin u nodig hebt om het gebruik van de attributen:

    1. Een aangepaste HTML-attribuut, want het is niet gesynchroniseerd met een DOM-eigendom.
    2. Toegang tot een ingebouwde HTML-attribuut, dat is niet gesynchroniseerd van de goederen, en bent u zeker moet u het kenmerk (bijvoorbeeld de originele value van een input element).

    Wilt u een meer gedetailleerde uitleg, ik raden u lezen deze pagina. Het zal u een paar minuten, maar je zal verrast worden door de informatie (die ik samengevat hier).

    • +1 voor over het algemeen een goed advies. De synchronisatie ding is licht uit: de value eigendom van een input is voor de initiële waarde van het attribuut, maar is verder niet gebonden is aan het in het geheel. De value kenmerk is volledig gesynchroniseerd in plaats daarvan met de defaultValue eigendom. Ook checked en defaultChecked. Behalve in de oude IE (<=7 en compatibiliteit modi later), dat heeft gebroken getAttribute() en setAttribute().
    • Toegevoegd je reactie als “nadere uitleg” 🙂
    • Bedankt Tim en Florian 🙂
    • Ik denk dat je het eerste voorbeeld verkeerd. a.href hiermee wordt de volledige URL, a.getAttribute("href") geeft het attribuut precies zoals defiend in de HTML-bron.
    • Oeps, inderdaad 🙂
    • Als je probeert om erachter te komen als een waarde niet-standaard, bent u beter af met behulp van attributen. Veel moderne browsers zal u terug een standaard waarde (bijv. input.formAction) of een lege tekenreeks (bijvoorbeeld a.download), dat maakt het wat dubbelzinnig. De enige uitzondering zijn de waarden die niet 2-weg gesynchroniseerd, zoals value.
    • Als id is niet ingesteld op alle in de dom, getAttribute wordt null geretourneerd en element.id retourneert een lege teken reeks. Is dit een standaard?
    • Een ander geval waar u zou willen gebruiken, getAttribute is met <form> elementen. Als u een <form> met een kind element met id=”id” of name=”id” dan formelem.id is het onderliggende element, niet de id van het element.
    • dat (denk dat wie niet?) deel! lol!

  2. 10

    getAttribute('attribute') normaal retourneert de waarde van het kenmerk als een string, precies zoals gedefinieerd in de HTML-code van de pagina.

    Echter element.attribute kon terug een genormaliseerde of de berekende waarde van het attribuut. Voorbeelden:

    • <a href="/foo"></a>
      • een.href zal bevatten volledige URL
    • <input type="checkbox" checked>
      • ingang.gecontroleerd zal worden voldaan (boolean)
    • <input type="checkbox" checked="bleh">
      • ingang.gecontroleerd zal worden voldaan (boolean)
    • <img src='http://dummyimage.com/64x64/000/fff'>
      • img.breedte van 0 (aantal) voordat de afbeelding geladen is,
      • img.breedte 64 (aantal) afbeelding (of de eerste paar bytes van) geladen
    • <img src='http://dummyimage.com/64x64/000/fff' width="50%">
      • img.breedte van de berekend 50%
    • <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
      • img.breedte 50 (aantal)
    • <div style='background: lime;'></div>
      • div.de stijl van een object
  3. 3

    .id slaat u de functie oproep overhead. (dat is erg klein, maar je vroeg. )

    • Hi gdoron, net omwille van die nieuwsgierigheid: ik heb geprobeerd om het vinden van een ‘officiële’ verklaring van dit (buiten de empirische test, die is duidelijk genoeg 😉 ) maar zonder succes. Heb je een link over?
  4. 3

    Volgens dit jsPerf test getAttribute is langzamer dan id eigendom.

    PS

    Vreemd genoeg beide uitspraken presteren zeer slecht op IE8 (in vergelijking met andere browsers).

    • Benchmark functie overhead is de wortel van alle kwaad…
  5. 3

    Altijd gebruik maken van de eigenschappen, tenzij u een specifieke reden niet aan.

    • getAttribute() en setAttribute() zijn onderverdeeld in oudere IE (en de compatibiliteitsmodus in latere versies)
    • eigenschappen zijn meer geschikt (in het bijzonder van degenen die overeenkomt met boolean attributen)

    Er zijn enkele uitzonderingen:

    • toegang tot de kenmerken van <form> elementen
    • toegang tot aangepaste kenmerken (al zou ik het ontmoedigen van het gebruik van de aangepaste eigenschappen op alle)

    Ik heb geschreven over dit onderwerp een paar keer op DUS:

    • Voordat IE 8, eigenschappen en attributen van de waren precies hetzelfde behandeld. Als u eerder al gezegd, eigenschappen zijn de weg te gaan.
    • Ja, dat is de gebrokenheid die ik op doelt. Ik hoefde niet uit te breiden op het in dit antwoord, omdat ik voelde dat ik had gedaan, dus genoeg in andere antwoorden die ik gekoppeld heb aan 🙂
  6. 0

    Proberen hieronder een voorbeeld om dit te begrijpen volledig. Voor de hieronder DIV

    <div class="myclass"></div>

    De Element.getAttribute('class') terug myclass maar je moet Element.className die haalt het van de DOM eigendom.

  7. 0

    Een gebied waar dit maakt een groot verschil is met css styling op basis van kenmerken.

    Rekening met het volgende:

    JS:

    const divs = document.querySelectorAll('div');
    
    divs[1].custom = true;
    divs[2].setAttribute('custom', true);

    CSS:

    div {
      border: 1px solid;
      margin-bottom: 8px;
    }
    
    div[custom] {
      background: #36a;
      color: #fff;
    }

    HTML:

    <div>A normal div</div>
    <div>A div with a custom property set directly.</div>
    <div>A div with a custom attribute set with `setAttribute`</div>

    De div met de aangepaste eigenschap direct niet overeenkomt met de waarde van het attribuut, en is niet geselecteerd door onze attribuut selector (div[custom]) in de css.

    De div met het custom attribute set met setAttribute, echter, kunnen worden geselecteerd met behulp van een css attribuut selector en stijl dienovereenkomstig.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *