Làm cách nào để thay đổi thuộc tính href bằng JavaScript?

Question

Để thiết lập sửa đổi giá trị của thuộc tính href của một liên kết hoặc thẻ, bạn có thể sử dụng jQuery. phương thức attr(). Phương pháp này cũng có thể được sử dụng để lấy giá trị của bất kỳ thuộc tính nào

Nội dung chính Show

Làm cách nào để thay đổi giá trị thuộc tính href trong JavaScript?
Làm cách nào để đặt liên kết href trong JavaScript?
Cách lấy giá trị thuộc tính href trong JavaScript?
Làm cách nào để thay đổi giá trị của href bằng jQuery?



  
    Title of the document
    
  
  
    Link

Phương thức attr() sẽ thay đổi href của tất cả các siêu liên kết để trỏ tới Google. Ví dụ: bạn có sự kết hợp giữa nguồn liên kết và thẻ neo đích liên kết

  
 The W3Docs

Và bạn không muốn thêm thuộc tính href cho chúng. Sau đó, bạn có thể chỉ định bộ chọn để khớp các thẻ với thuộc tính href hiện có

Trong trường hợp bạn muốn khớp một neo với một href cụ thể hiện có, thì bạn có thể làm như sau



  
    Title of the document
    
  
  
    Link

Sau đó, bạn chỉ nên cập nhật một số phần của thuộc tính href

$("a[href^='http://w3docs.com']")
  .each(function () {
    this.href = this.href.replace(/^http:\/\/beta\.w3docs\.com/,
      "http://w3docs.com");
  });

Phần đầu tiên chỉ chọn các liên kết có href bắt đầu bằng http. // stackoverflow. com. Sau đó, một hàm được chỉ định, sử dụng biểu thức chính quy để thay thế phần này của URL bằng một phần mới

Các. Phương thức attr() được sử dụng để lấy giá trị thuộc tính cho phần tử đầu tiên trong tập hợp phù hợp. Để lấy giá trị cho từng phần tử, các phương thức xây dựng vòng lặp, cụ thể là -. mỗi() hoặc. các phương thức map() của jQuery được sử dụng

Một trong những lợi ích chính mà phương thức này đề xuất là nó có thể được gọi trực tiếp trên một đối tượng jQuery và được kết nối với các phương thức khác

Bạn có thể sử dụng phương thức .attr() của jQuery để tự động thiết lập hoặc thay đổi giá trị của thuộc tính href của một liên kết hoặc thẻ neo. Phương pháp này cũng có thể được sử dụng để lấy giá trị của bất kỳ thuộc tính nào

Ví dụ sau sẽ chỉ cho bạn cách chuyển đổi tất cả các siêu liên kết hoặc liên kết trong tài liệu HTML từ "http" thành "https" khi tài liệu sẵn sàng với jQuery

ví dụ 2. Trong ví dụ này, chúng tôi thay thế thẻ neo trong div ‘link’ bằng một thẻ neo khác để thay đổi giá trị href. Đây là một cách khác mà chúng ta có thể thay đổi giá trị của thuộc tính href.

JavaScript là ngôn ngữ kịch bản cấp cao, được giải thích, được gõ động và phía máy khách. HTML được sử dụng để tạo các trang web tĩnh. JavaScript cho phép các trang web tương tác khi được sử dụng cùng với HTML và CSS. Thao tác đối tượng tài liệu (DOM) là một giao diện lập trình cho các tài liệu HTML và XML. DOM hoạt động như một giao diện giữa JavaScript và HTML kết hợp với CSS. DOM đại diện cho tài liệu dưới dạng các nút và đối tượng i. e. trình duyệt biến mọi thẻ HTML thành một đối tượng JavaScript mà chúng ta có thể thao tác. DOM là một đại diện hướng đối tượng của trang web, có thể được sửa đổi bằng ngôn ngữ kịch bản như JavaScript. Để thao tác với các đối tượng bên trong tài liệu ta cần chọn nó rồi thao tác

Chọn một phần tử có thể được thực hiện theo năm cách

tài liệu. phương thức querySelector(). Nó trả về phần tử đầu tiên phù hợp với truy vấn
tài liệu. phương thức querySelectorAll(). Nó trả về tất cả các phần tử phù hợp với truy vấn
tài liệu. Phương thức getElementById(). Nó trả về một phần tử khớp với id
tài liệu. Phương thức getElementsByClassName(). Nó trả về tất cả các phần tử phù hợp với lớp
tài liệu. Phương thức getElementsByTagName(). Nó trả về một danh sách các phần tử khớp với tên thẻ

DOM cho phép thao tác thuộc tính. Các thuộc tính kiểm soát hành vi của thẻ HTML hoặc cung cấp thông tin bổ sung về thẻ. JavaScript cung cấp một số phương thức để thao tác thuộc tính phần tử HTML

Các phương pháp sau đây được sử dụng để thao tác các thuộc tính

phương thức getAttribute(). Nó trả về giá trị hiện tại của một thuộc tính trên phần tử và trả về null nếu thuộc tính được chỉ định không tồn tại trên phần tử
phương thức setAttribute(). Nó cập nhật giá trị của một thuộc tính đã tồn tại trên phần tử đã chỉ định, nếu không, một thuộc tính mới được thêm vào với tên và giá trị đã chỉ định
phương thức removeAttribute(). Nó được sử dụng để loại bỏ một thuộc tính của phần tử được chỉ định

The below code demonstrates the attribute manipulation where the href attribute of tag changes on button click. A function is called on button click which updates the attribute value. The function myFunction() is a JavaScript function and it makes the HTML code more interactive by making runtime modifications.

<html5 html6html7html8>

>0

<>3 html6_______8_______7>6_______9_______