CODEWITHSUNDEEP
javascript
Satu Sultana
Satu Sultana

Reputation: 537

How get tag attribute by javascript without using id or class?

I am new in javascript.I am trying this below code to get href attribute. 

<a href="facebook.com"  onclick="cheak()">Facebook</a>

        <script type="text/javascript">
        function cheak()
        {
            var a= document.getElementsByTagName("a").getAttribute('href');
            alert(a);
        }

</script>

I know this is working by below code 

document.getElementById("myid").getAttribute('href');  // if I use any id

But in tag I don't want to use any id or class. How can I get this attribute without using any id or class in a tag.

Upvotes: 3

Views: 3641

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074335

Preface: Below, I've answered the question of how to find an element without using an id or class, in the general case. But if you just want the element from within your cheak function, then Zain's answer is the correct way to do that (with minimal changes to your code; arguably more correct might be modern event hookup).

But in tag I don't want to use any id or class. How can I get this attribute without using any id or class in a tag.

You reach for the Swiss army knife of element selection: document.querySelector. With it, you can use any CSS selector that matches the element:

var href = document.querySelector("any selector here").getAttribute("href");

querySelector returns the first match in the document. (There's also querySelectorAll, which returns a list.) They're both supported in all modern browsers, and also IE8.

Since you have the full power of CSS selectors, you can use anything about the position of the element in the document to find it.

There's too little context in your question for a specific example, but for instance if it's the first a in the document:

var href = document.querySelector("a").getAttribute("href");
alert(href);
<a href="facebook.com"  onclick="cheak()">Facebook</a>

Or using that onclick:

var href = document.querySelector("a[onclick='cheak()']").getAttribute("href");
alert(href);
<a href="facebook.com"  onclick="cheak()">Facebook</a>

Upvotes: 3

Zain Aftab
Zain Aftab

Reputation: 701

If you pass in this when calling the function. it will pass the element reference to your function and you can use it to get value of href:

<a href="facebook.com"  onclick="cheak(this)">Facebook</a>
<!-- Note -----------------------------^^^^            -->

<script type="text/javascript">
function cheak(a) {
     alert(a.href); // Gives you the fully-resolved URL
     alert(a.getAttribute("href")); // Gives you the content of the `href` attribute (not fully-resolved)
}
</script>

the parameter data is the complete tag on which the function is called

Upvotes: 2

Rana Ahmer Yasin
Rana Ahmer Yasin

Reputation: 537

<a href="www.facebook.com"  onclick="cheak(event)">Facebook</a>

     <script type="text/javascript">
    function cheak(e)
    {
       e.preventDefault(); 
      //  var a= document.getElementsByTagName("a").getAttribute('href');
        alert(e.target);
    }

</script>

Upvotes: 0

Related Questions