資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在 JavaScript 中獲取連結的 hreflang 屬性值？
在本教程中，我們將學習如何在 JavaScript 中獲取連結的 hreflang 屬性值。
hreflang 是連結或錨標記的一個屬性，它指定連結文件或 href 屬性的語言。
搜尋引擎使用它來理解連結的語言和網站的目標地理位置。為了更好的 SEO，必須使用 hreflang 屬性。
單個語言或語言和區域的組合用作 hreflang 屬性的值。它使用語言程式碼 ISO-639-1 和區域程式碼 ISO-3166-1。
例如：如果 hreflang 屬性值為“en−us”，則該連結為英語，目標為美國。“x−default”用於不專門針對特定區域或語言的預設連結。
使用 document.getElementById() 方法
document.getElementById() 方法可用於獲取連結或錨標記的 hreflang 屬性值。它在引數中獲取錨標記的 id，並返回該錨標記的元素物件，然後我們可以使用鍵“hreflang”從該物件中獲取 hreflang 的值。
使用者可以按照以下語法獲取連結的 hreflang 值。
語法
document.getElementById('mylink').hreflang
在上述語法中，“mylink”是錨標記的 id，透過使用 document.getElementById 方法和 hreflang 鍵，我們獲取 hreflang 屬性值。
示例
在下面的示例中，我們使用了 document.getElementById() 方法來獲取連結的 hreflang 屬性值。
<html> <body> <h4>Get the value of the hreflang attribute of a link in JavaScript using <i>document.getElementById()</i> method</h4> <div> <a id="link1" href="https://tutorialspoint.tw/" hreflang="en">Link 1</a><br> <a id="link2" href="https://tutorialspoint.tw/" hreflang="en-us">Link 2</a> </div> <br/> <div id = "root"> </div> <script> // accessing all hreflang value from all links let hreflang1=document.getElementById('link1').hreflang let hreflang2=document.getElementById('link2').hreflang let root = document.getElementById('root') root.innerHTML='Link 1 hreflang: '+hreflang1+'<br>' root.innerHTML+='Link 2 hreflang: '+hreflang2+'<br>' </script> </body> </html>
在上面的輸出中，使用者可以看到，使用 document.getElementById 方法，我們可以獲取不同連結的 hreflang 屬性值。
使用 document.getElementsByTagName() 方法
在 JavaScript 中，document.getElementsByTagName() 方法也可用於獲取連結或錨標記的 hreflang 屬性值。它在引數中獲取標記名稱，並返回一個 HTMLCollection，類似於列表或陣列。它包含該標記名稱的所有元素物件，並且我們可以使用鍵“hreflang”從每個物件中獲取 hreflang 的值。
語法
// getting all anchor tags
let links = document.getElementsByTagName('a')
// looping through all the HTMLCollection links
for (let index = 0; index < links.length; index++) {
let link = links[index] // accessing each anchor tag element
let hreflang = link.hreflang // accessing the hreflang value
console.log(hreflang)
}
在上述語法中，document.getElementByTagName() 方法將“a”作為引數，因此它返回所有元素（HTMLCollection 中的錨標記），並透過迴圈遍歷它，我們獲取所有連結的所有 hreflang 屬性值。
示例
在下面的示例中，我們使用了 document.getElementByTagName() 方法來獲取連結的 hreflang 屬性值。
<html> <body> <h4>Get the value of the hreflang attribute of a link in JavaScript using <i>document.getElementsByTagName()</i> method</h4> <div> <a id="link1" href="https://tutorialspoint.tw/" hreflang="en">Link 1</a><br> <a id="link2" href="https://tutorialspoint.tw/" hreflang="en-us">Link 2</a> </div> <br /> <div id="root"></div> <script> let root=document.getElementById('root') let links=document.getElementsByTagName('a') for (let index=0; index < links.length; index++) { let link = links[index] let hreflang = link.hreflang root.innerHTML +='Link '+ (index+1) +' hreflang: '+hreflang+'<br>' } </script> </body> </html>
在上面的輸出中，使用者可以看到，使用 document.getElementByTagName() 方法，我們可以獲取不同連結的 hreflang 屬性值。
使用 document.querySelectorAll() 方法
在 JavaScript 中，document.querySelectorAll() 方法也可用於獲取連結或錨標記的 hreflang 屬性值。它在引數中獲取標記名稱和 CSS 選擇器，並返回一個 NodeList，類似於列表或陣列。它包含該標記名稱的所有元素作為節點元素物件，並且我們可以使用鍵“hreflang”從每個物件中獲取 hreflang 的值。
使用 document.querySelectorAll()，我們可以獲取所有具有 hreflang 屬性的錨標記。在 document.getElementByTagName() 方法中，我們獲取所有錨標記，無論它是否具有 hreflang 屬性。
語法
// getting all anchor tags that have hreflang attribute
let links = document.querySelectorAll('a[hreflang]')
在上述語法中，document.querySelectorAll() 方法將“a[hreflang]”作為引數，因此它返回所有元素（NodeList 中包含 hreflang 屬性的錨標記），並透過迴圈遍歷它，我們獲取所有連結的所有 hreflang 屬性值。
示例
在下面的示例中，我們使用了 document.querySelectorAll() 方法來獲取連結的 hreflang 屬性值。
<html> <body> <h4>Get the value of the hreflang attribute of a link in JavaScript using <i>document.querySelectorAll()</i> method</h4> <div> <a id="link1" href="https://tutorialspoint.tw/" hreflang="en" > Link 1 </a><br> <a id="link2" href="https://tutorialspoint.tw/" hreflang="en-us"> Link 2 </a><br> <a id="link3" href="https://tutorialspoint.tw/">Link 3(no hreflang)</a> </div> <br /> <div id = "root"> </div> <script> let root = document.getElementById('root') let links = document.querySelectorAll('a[hreflang]') for (let index=0; index < links.length; index++) { let hreflang = links[index].hreflang root.innerHTML += 'Link ' + (index + 1) +' hreflang: '+hreflang+'<br>' } </script> </body> </html>
在上面的輸出中，使用 document.querySelectorAll 方法，我們可以獲取所有具有 hreflang 屬性的連結的 hreflang 屬性值。
瀏覽量：753
