Html link value javascript

How to get the value of the rel attribute of a link in JavaScript?

In this tutorial, we will learn how to get the value of the rel attribute of a link in JavaScript.

The rel attribute expressed the relationship between the current document or website and the linked document or website. The search engine uses this attribute to get more information about the link, so it is important for the SEO of the website.

The rel attribute can have different values like alternate, author, external, nofollow, etc.; each value means different information about the link. For example, ‘alternate’ means the link represents an alternate version of the current document.

Using document.getElementById() Method

In JavaScript, The document.getElementById() method is useful for getting different attributes value of an element like link or anchor tag. It takes the id of an element in the parameter and returns an element object of that element (in this case, it is a link or anchor tag), and from that object, we can get the rel attribute value of that element by using the key ‘rel.’

Users can follow the below syntax to get the value of the rel attribute of a link.

Syntax

document.getElementById('mylink').rel

In the above syntax, ‘mylink’ is the link’s id (anchor tag) and by using document.getElementById method and ‘rel’ key, we get the rel attribute value from that link.

Example

In the below example, we have used document.getElementById() method to get the value of the rel attribute of a link.

html> body> div>a id="link1" rel="nofolloww" href="https://www.tutorialspoint.com/" >tutorialspoint/a>/div> br /> div id="result">/div> script> let rel1 = document.getElementById('link1').rel let root = document.getElementById('result') root.innerHTML = 'value of rel attribute: ' +rel1+ '
' /script> /body> /html> 
 

In the above output, users can see that using document.getElementById method, we get the rel attribute value of the link.

Using document.getElementsByTagName() method

In JavaScript, the document.getElementsByTagName() method can be used to get the value of the rel attribute of a link or anchor tag. It takes a tag name in the parameter and returns an HTMLCollection, similar to a list or array. It contains all of the element objects of that tag name, and from each object, we can also get the value of the rel attribute by using the key ‘rel.’

Syntax

// getting all anchor tags let links = document.getElementsByTagName('a') // looping through all the HTMLCollection links for (let index=0; index < links.length; index++)< // accessing the rel attribute from each element let rel = links[index].rel console.log(rel) >

In the above syntax, document.getElementByTagName() method takes ‘a’ as an argument, so it returns all of the elements, which is an anchor tag in an HTMLCollection and looping through it, we are getting the rel attributes values from all links and console logging it.

Example

In the below example, we have used document.getElementByTagName() method to get the value of the rel attribute from a link.

html> body> div> a rel="alternate" href="https://www.tutorialspoint.com/" >Link 1/a>br> a rel="nofollow" href="https://www.tutorix.com/" >Link 2/a> /div> br /> div id="root">/div> script> let root=document.getElementById('root') let links=document.getElementsByTagName('a') for (let index=0; indexlinks.length; index++) let rel=links[index].rel root.innerHTML+='Link '+(index+1)+' rel attribute: '+rel+'
' > /script> /body> /html> 
 

In the above output, users can see that using document.getElementByTagName method, we get the rel attribute value of all links.

Using document.querySelectorAll() Method

In JavaScript, the document.querySelectorAll() method can be used to get the value of the rel attribute of a link or anchor tag. It takes a tag name and CSS selectors in the parameter and returns a NodeList similar to a list or array. It contains all of the elements as node element objects of that tag name, and from each object, we can also get the value of the rel attribute by using the key ‘rel.’

In the document.getElementByTagName() method, we get all the anchor tags whether it has a rel attribute or not but using the document.querySelectorAll() method can only get the links or anchor tags with the rel attribute. This method will not select the links that don’t have a rel attribute.

Syntax

document.querySelectorAll('a[rel]')

In the above syntax, document.querySelectorAll() method takes ‘a[rel]’ as an argument, so it returns all of the elements, which is an anchor tag containing the rel attribute in a NodeList and looping through it, we can get all of the rel attribute values.

Example

In the below example, we have used document.querySelectorAll() method to get the value of the rel attribute of a link.

html> body> h4>Get the value of the rel attribute of a link in JavaScript using i>document.querySelectorAll()/i> method/h4> div> a rel="alternate" href="https://www.tutorialspoint.com/" >Link 1/a>br> a rel="nofollow" href="https://www.tutorialspoint.com/" >Link 2/a>br> a href="https://www.tutorialspoint.com/" >Link 3(no rel)/a> /div> br /> div id="root">/div> script> let root=document.getElementById('root') let links=document.querySelectorAll('a[rel]') for (let index=0; indexlinks.length; index++) let rel=links[index].rel root.innerHTML +='Link '+(index+1)+' rel: '+rel+'
' > /script> /body> /html> 
 

In the above output, using document.querySelectorAll method, we get the rel attribute value of all links with the rel attribute.

Источник

Anchor href Property

The href property sets or returns the value of the href attribute of a link. The href attribute specifies the destination of a link.

Browser Support

Syntax

Property Values

Value	Description
URL	Specifies the URL of the link.

• An absolute URL — points to another web site (like href=»http://www.example.com/default.htm»)
• A relative URL — points to a file within a web site (like href=»default.htm»)
• An anchor URL — points to an anchor within a page (like href=»#top»)

Technical Details

Return Value:	A String, representing the URL of the link. Returns the entire URL, including the protocol (like http://)

More Examples

Example

Example

Another example of how to get the URL of a link (a relative URL):

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML DOM Link Object

You can access a element by using getElementById():

Example

Create a Link Object

You can create a element by using the document.createElement() method:

Example

Link Object Properties

Property	Description
charset	Not supported in HTML5. Sets or returns the character encoding of the linked document
crossOrigin	Sets or returns the the CORS settings of the linked document
disabled	Sets or returns whether the linked document is disabled, or not
href	Sets or returns the URL of the linked document
hreflang	Sets or returns the language code of the linked document
media	Sets or returns the media type for the link element
rel	Sets or returns the relationship between the current document and the linked document
rev	Not supported in HTML5. Sets or returns the reverse relationship from the linked document to the current document
sizes	Returns the value of the sizes attribute of the linked resource
type	Sets or returns the content type of the linked document

Standard Properties and Events

The Link object also supports the standard properties and events.

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

JavaScript — Get href value

JavaScript Get href Value is a useful tool for web developers and designers who need to quickly access the value of an HTML element’s href attribute.

This article will provide step-by-step instructions on how to use JavaScript to get the value of an href attribute on a webpage, as well as some tips and tricks for getting the most out of this powerful feature. The ability to quickly obtain the values from an HTML element’s attributes can help make development faster and more efficient, so let’s get started!

The value of the href attribute in JavaScript is a URL that instructs the browser where to go when the link is clicked. The additional characteristics target= «_blank» and rel= «noopener» instruct the browser to open the website in a new tab, so take note of them.

Using querySelector() in JavaScript

The querySelector() is a method in JavaScript used to query the DOM (Document Object Model) and return the first element that matches a given CSS selector. It can be used to select an element by its ID, class name, or any other valid CSS selector. This method returns NULL if there are no matches.

Syntax

Following is the syntax for querySelector()

element = document.querySelector(selectors);

Example

In the following example, we are using querySelector(), which returns the anchor tag within the document. Later, we will access the href property to get the value of the href attribute.

   Direct To Open 
 
Click document.getElementById('submit').onclick = function()  

When the script gets executed, it will generate an output consisting of an href link with the text «direct to open» along with a click button on the webpage. When the user clicks the button, the event gets triggered and displays the alert of href value on the webpage.

Example

Let’s look into the following example, where we are using querySelector() to get the value of the href attribute.

   Open 
 
Click document.getElementById('submit').onclick = function()  

When the script is run, it will generate an output consisting of a link along with a click button. If the user clicks on the button, the event gets triggered and displays the value of the href attribute on the web-browser.

Using getAttribute() in JavaScript

The Element interface’s getAttribute() method returns the value of the supplied attribute on the element. If the requested attribute does not exist, either null or «» (the empty string) will be delivered.

Syntax

Following is the syntax for getAttribute()

getAttribute(attributeName)

Example

Considering the following example, where we are using getAttribute() to get the value of the href attribute on the specified anchor tag.

   Direct To Open 
 
Click document.getElementById('submit').onclick = function()  

On running the above script, the web-browser displays the href link along with the text and a click button on the webpage. If the user clicks the button, the event is triggered and the href value is displayed on the web-browser.

Using attr()

The attr() method is used to set or return attributes and their values for the selected elements. If it was used to return the attribute value, it returns the first matched element.

Syntax

Following is the syntax for attr()

Example

Execute the below program, where we are running the script to get the value of the href attribute.

When the script gets executed, the event gets triggered and displays the link along with a href attribute value.

Источник