Hướng dẫn get element by href javascript - lấy phần tử bằng href javascript

Cập nhật năm 2016

Đã hơn 4 năm kể từ khi câu hỏi này được đăng và mọi thứ tiến triển khá nhiều.

Bạn không thể sử dụng:can't use:

var els = document.getElementsByTagName("a[href='http://domain.example']");

Nhưng những gì bạn có thể sử dụng là:can use is:

var els = document.querySelectorAll("a[href='http://domain.example']");

(Lưu ý: Xem bên dưới để biết hỗ trợ trình duyệt)Note: see below for browser support)

Điều này sẽ làm cho mã từ câu hỏi của bạn hoạt động chính xác như bạn mong đợi:exactly as you expect:

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Bạn thậm chí có thể sử dụng các bộ chọn như

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href^='http://domain.example']");

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link/gi, 'dead link');
}

Xem: Bản demoDEMO

Hỗ trợ trình duyệt

Hỗ trợ trình duyệt theo tôi có thể sử dụng vào tháng 6 năm 2016 có vẻ khá tốt:

Không có sự hỗ trợ trong IE6 và IE7 nhưng IE6 đã chết và IE7 sẽ sớm có 0,68% thị phần.IE6 and IE7 but IE6 is already dead and IE7 soon will be with its 0.68% market share.

IE8 đã hơn 7 năm tuổi và nó hỗ trợ một phần cho QuerySelectorall - bằng cách "một phần" ý tôi là bạn có thể sử dụng các bộ chọn CSS 2.1 như

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

var els = document.querySelectorAll("a[href='http://domain.example']");

IE9, IE10 và IE11 đều hỗ trợ truy vấn mà không có vấn đề gì, cũng như Chrome, Firefox, Safari, Opera và tất cả các trình duyệt lớn khác - cả máy tính để bàn và thiết bị di động., IE10 and IE11 all support querySelectorAll with no problems, as do Chrome, Firefox, Safari, Opera and all other major browser - both desktop and mobile.

Nói cách khác, dường như chúng ta có thể bắt đầu sử dụng

var els = document.querySelectorAll("a[href='http://domain.example']");

Thêm thông tin

Để biết thêm thông tin, xem:

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
• http://caniuse.com/queryselector

Xem thêm câu trả lời này cho sự khác biệt giữa

var els = document.querySelectorAll("a[href='http://domain.example']");

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Nhận một phần tử theo thuộc tính href bằng JavaScript #

Sử dụng phương thức

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Đây là HTML cho các ví dụ trong bài viết này.

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <a href="https://example.com">Example</a>

    <script src="index.js"></script>
  </body>
</html>

Và đây là mã JavaScript liên quan.

Copied!
// ✅ Get first element by href attribute
const el1 = document.querySelector('[href="https://example.com"]');
console.log(el1); // 👉️ a

// ✅ Get ALL elements by href attribute
const elements1 = document.querySelectorAll('[href="https://example.com"]');
console.log(elements1); // 👉️ [a]

// ✅ Get element by Partially Matching Href attribute
const el2 = document.querySelector('[href*="example.com"]');
console.log(el2); // 👉️ a

// ✅ Get ALL elements by Partially Matching Href attribute
const elements2 = document.querySelectorAll('[href*="example.com"]');
console.log(elements2); // 👉️ [a]

Ví dụ đầu tiên sử dụng phương thức tài liệu.QuerySelector để có phần tử đầu tiên có thuộc tính

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Copied!
const el1 = document.querySelector('[href="https://example.com"]');

Nếu một phần tử có bộ chọn được cung cấp không tồn tại trong DOM, phương thức

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Ví dụ thứ hai sử dụng phương thức tài liệu.QuerySelectorall với cùng một bộ chọn chính xác để có được một tập hợp các phần tử có thuộc tính

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Copied!
const el2 = document.querySelector('[href*="example.com"]');

Trong ví dụ thứ ba, chúng ta nhận được một phần tử bằng cách khớp một phần giá trị của thuộc tính

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Copied!
const el2 = document.querySelector('[href*="example.com"]');

Bộ chọn này kiểm tra xem chuỗi

var els = document.querySelectorAll("a[href^='http://domain.example']");

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link/gi, 'dead link');
}

Nếu bạn cần thu hẹp mọi thứ xuống một yếu tố cụ thể, ví dụ: Thẻ

var els = document.querySelectorAll("a[href^='http://domain.example']");

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link/gi, 'dead link');
}

Copied!
const el1 = document.querySelector('a[href="https://example.com"]');
console.log(el1); // 👉️ a

Ví dụ trên có phần tử

var els = document.querySelectorAll("a[href^='http://domain.example']");

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link/gi, 'dead link');
}

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Điều này sẽ không phù hợp với bất kỳ yếu tố nào khác với giá trị

for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.innerHTML = el.innerHTML.replace(/link1/gi, 'dead link');
}

Làm thế nào bạn có thể sử dụng HREF trong chức năng để có được giá trị của phần tử?