I am not a Javascript expert at all but I'm not sure how to acplish this. I have a link on a page that has a link structured similar to the code below. How can I extract the value of either the title reference or the Link? I figure that innerHTML would need to be used to get Link text but I can't get the element by ID or tag name.
<a href="#" title='titlevalue'>Link</a
I am not a Javascript expert at all but I'm not sure how to acplish this. I have a link on a page that has a link structured similar to the code below. How can I extract the value of either the title reference or the Link? I figure that innerHTML would need to be used to get Link text but I can't get the element by ID or tag name.
<a href="#" title='titlevalue'>Link</a
Share
Improve this question
edited Mar 3, 2013 at 13:14
mplungjan
178k28 gold badges181 silver badges240 bronze badges
asked Mar 3, 2013 at 13:12
mystereomystereo
611 gold badge1 silver badge2 bronze badges
3
- 1 If you can't target the element using id or tag name, what is it that identifies this link from other links on the page? – JJJ Commented Mar 3, 2013 at 13:14
- You cant get the element by ID o by tag name, can you add a class to it? something to be used as a wat to select it? or do you want to select it by title? – cernunnos Commented Mar 3, 2013 at 13:15
-
document.links[2].title
will give you the title of the 3rd link on the page – mplungjan Commented Mar 3, 2013 at 13:16
3 Answers
Reset to default 1You can get the elements with tag name
using getElementsByTagName
function. This will return array of elements with same tag name
.
From that array, you can get the element you want and,
using getAttribute
function, you can get the value of the specific attribute
.
const elements = document.getElementsByTagName('a');
const target = elements[0];
console.log('Href : ' + target.getAttribute('href'));
console.log('Title : ' + target.getAttribute('title'));
<a href="#" title='titlevalue'>Link</a>
You can also use data attributes like this:
<a href="#" data-title='titlevalue'>Link</a>
--> Instead of the title
attribute you convert in into a data attribute like this: data-title
And in your javascript:
const link = document.getElementsByTagName('a')[0];
console.log(link.dataset.title);
And this should log: titlevalue
You can read more about data attributes here: https://developer.mozilla/en-US/docs/Learn/HTML/Howto/Use_data_attributes
You need to add a specific ID to your link. And then you can access it directly and get the valued you need. Here is an example: First, add an id to your link
<a href="#" id="myLink" title='titlevalue'>Link</a>
Then get it with javascript
var title = document.getElementById('myLink').title;
var html = document.getElementById('myLink').innerHTML;
And altogether:
var title = document.getElementById('myLink').title;
var html = document.getElementById('myLink').innerHTML;
console.log("Title: " + title);
console.log("HTML: " + html);
<a href="#" id="myLink" title='titlevalue'>Link</a>