Cara menggunakan getattributens php

Question

Method getAttribute

Setelah mempelajari bahasa markup seperti XML dan HTML, kita seharusnya sudah mengetahui apa yang disebut dengan tag dan attribut. Dalam HTML maupun XML, atribut adalah bagian dari tag yang mempunyai nilai, walaupun ada juga atribut yang bisa ditulis tanpa nilai. Untuk mendapatkan nilai tersebut, dalam javascript kita bisa menggunakan properti-properti yang mewakili masing-masing atribut HTML karena atribut dalam HTML memang terbatas dan punya kegunaan khusus.

Table of Contents Show

Method getAttribute
Return value
Specifications
Browser compatibility

Tapi, untuk XML, kita tidak bisa mendapatkan nilai atribut lewat properti karena atribut dalam XML namanya bebas dan tidak punya kegunaan khusus selain untuk menyimpan nilai berupa string. Untuk mendapatkan nilai dari atribut dalam XML, kita bisa menggunakan method getAttribute(). Selain digunakan dalam XML, getAttribute juga bisa digunakan untuk mendapatkan nilai atribut tag HTML.

Mungkin untuk lebih jelasnya saya perlu langsung memberikan contoh script yang sudah diletakkan dalam kode HTML.

<HTML>
<HEAD>
    <title>Belajar HTML</title>
</HEAD>
<BODY>
    <Button id="tombol" onclick="Cek_XML()" custom="Contoh nilai custom Atribut">Lihat XML</Button><BR />
    <div id="hasil"></div>
    <script>
        //HTML
        var elemen=document.getElementById("tombol");
        var s=elemen.getAttribute("custom");
        alert(s);
    
        //XML
        function Cek_XML(){
            var cnode;
            var teks="<Makanan>"+
            "<A warna='merah'>Apel</A>"+
            "<B>Stroberi</B>"+
            "<A>Kubis</A>"+
            "<B>Bayam</B>"+
            "</Makanan>";
            var parser = new DOMParser();
            var s="<b>Elemen XML pertama : </b>";
            xmlku=parser.parseFromString(teks, "text/xml");
            var hasil=xmlku.getElementsByTagName("Makanan")[0];
            cnode=hasil.children[0];
            s+="<br />Nama tag : "+cnode.nodeName;
            s+="<br />Atribut (Warna): "+cnode.getAttribute("warna");
            s+="<br />Nilai : "+cnode.childNodes[0].nodeValue;
            document.getElementById("hasil").innerHTML=s;
        }
    </script>
</BODY> 
</HTML>

Pada contoh di atas, saya sudah mencontohkan penggunaan getAttribute() yang ada di dalam elemen HTML maupun XML. Cara penggunaan getAttribute() untuk HTML dan XML hampir sama. Kita perlu mendapatkan objek yang mewakili elemen yang ingin kita ambil atributnya dengan getElemensByTagNama(), GetElemenById(), dll. Setelah objek didapatkan, kita cukup menggunakan method getAttribute pada objek yang kita inginkan.

Tweet
Share
Share
Share

The getAttributeNS() method of the Element interface returns the string value of the attribute with the specified namespace and name. If the named attribute does not exist, the value returned will either be null or "" (the empty string); see Notes for details.

Syntax

getAttributeNS(namespace, name)

Parameters

namespace

The namespace in which to look for the specified attribute.

name

The name of the attribute to look for.

Return value

The string value of the specified attribute. If the attribute doesn't exist, the result is null.

Note: Earlier versions of the DOM specification had this method described as returning an empty string for non-existent attributes, but it was not typically implemented this way since null makes more sense. The DOM4 specification now says this method should return null for non-existent attributes.

Examples

The following SVG document reads the value of the foo attribute in a custom namespace.

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:test="http://www.example.com/2014/test" width="40" height="40">

  <circle id="target" cx="12" cy="12" r="10" stroke="#444"
      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/>

  <script>
    const ns = 'http://www.example.com/2014/test';
    const circle = document.getElementById('target');

    console.log(`attribute test:foo: "${circle.getAttributeNS(ns, 'foo')}"`);
  </script>
</svg>

In an HTML document the attribute has to be accessed with test:foo since namespaces are not supported.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>getAttributeNS() test page</title>
  </head>
  <body>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:test="http://www.example.com/2014/test"
      width="40"
      height="40">
      <circle
        id="target"
        cx="12"
        cy="12"
        r="10"
        stroke="#444"
        stroke-width="2"
        fill="none"
        test:foo="Foo value" />
    </svg>

    <script>
      const ns = "http://www.example.com/2014/test";
      const circle = document.getElementById("target");
      console.log(`Attribute value: ${circle.getAttribute("test:foo")}`);
    </script>
  </body>
</html>

Notes

Namespaces are only supported in XML documents. HTML documents have to use getAttribute() instead.

getAttributeNS() differs from getAttribute() in that it allows you to further specify the requested attribute as being part of a particular namespace, as in the example above, where the attribute is part of the fictional "specialspace" namespace on Mozilla.

Prior to the DOM4 specification, this method was specified to return an empty string rather than null for non-existent attributes. However, most browsers instead returned null. Starting with DOM4, the specification now says to return null. However, some older browsers return an empty string. For that reason, you should use hasAttributeNS() to check for an attribute's existence prior to calling getAttributeNS() if it is possible that the requested attribute does not exist on the specified element.

DOM methods dealing with element's attributes: