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

Question

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.

Are you only trying to get the element from within the cheak function? If so, Zain's answer is the correct one. — T.J. Crowder
– T.J. Crowder, Commented Aug 21, 2015 at 7:33
Side note: That href is incorrect. It should be href="http://facebook.com" or href="https://facebook.com". Just href="facebook.com" is a relative URL. — T.J. Crowder
– T.J. Crowder, Commented Aug 21, 2015 at 7:36

Community · Accepted Answer · 2017-05-23 12:06:14Z

3

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>

edited May 23, 2017 at 12:06

CommunityBot

11 silver badge

answered Aug 21, 2015 at 6:47

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joël Salamin Over a year ago

I read in a tutorial that the methods querySelector and querySelectorAll are less performant than using getElementsByTagName for such kind of manipulations. Any experience about that?

T.J. Crowder Over a year ago

@JoëlSalamin: They're different tools for different jobs. I think when you use querySelectorAll with just a tag name (e.g., for what getElementsByTagName does), yes, it's slower, because it has to A) Parse the selector, and then B) Build a disconnected collection; in contrast, getElementsByTagName returns the live collection the browser probably already has. But of course, you can't do my second example above with getElementsByTagName (you'd need a loop in your code; likely slower). And 99.9% of the time, it doesn't matter; the vast majority of code is not performance-critical. :-)

Joël Salamin Over a year ago

Thank you for this complete answer, you're right the tutorial was only comparing getElementsByTagName and querySelectorAll for manipulations on a simple collection of elements.

Zain Aftab · Accepted Answer · 2015-08-21 07:39:30Z

2

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

edited Aug 21, 2015 at 7:39

answered Aug 21, 2015 at 6:45

Zain Aftab

7017 silver badges21 bronze badges

4 Comments

Joël Salamin Over a year ago

It has nothing to do with the initial question but I have a remark on the solution you're proposing. If you simply keep calling the method cheak without any parameter, the this keyword will automatically reference the calling element inside the method, or am I completely wrong?

Zain Aftab Over a year ago

this is sent when you are using jQuery. but in native Js you need to send it manually.

T.J. Crowder Over a year ago

@ZainAftab: No, that's incorrect. If you use modern element hookup (addEventListener; attachEvent on old IE), this will refer to the element the event was hooked on. It's just onXyz attributes where you have to pass it in as you are above.

Joël Salamin Over a year ago

@T.J.Crowder Now I understand why I worked well without passing any parameter and using this keyword: it wasn't with a legacy onxxx method. Thanks for this clarification!

Rana Ahmer Yasin · Accepted Answer · 2015-08-21 06:48:25Z

0

<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>

answered Aug 21, 2015 at 6:48

Rana Ahmer Yasin

5353 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related