Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : js get phần tử html

Đôi khi, người dùng cần thao tác phần tử HTML mà không cần thay đổi mã của HTML. Trong trường hợp này, người dùng có thể sử dụng JavaScript để thay đổi các phần tử HTML mà không cần ghi đè chúng. Trước khi chúng tôi tiếp tục thay đổi phần tử HTML bằng JavaScript, người dùng nên tìm hiểu cách truy cập phần tử này từ DOM (Mô hình đối tượng tài liệu). Ở đây, DOM là cấu trúc của trang web.

Từ DOM, người dùng có thể truy cập các phần tử HTML theo năm cách khác nhau trong JavaScript.

  • Nhận phần tử HTML theo Id
  • Nhận phần tử HTML theo className
  • Nhận phần tử HTML theo Tên
  • Nhận phần tử HTML theo tagName
  • Nhận phần tử HTML bằng Bộ chọn CSS

Tại bên dưới , người dùng có thể xem phần trình diễn của các phương pháp trên với mã mẫu.

Lấy phần tử HTML theo Id: Nói chung, hầu hết các nhà phát triển sử dụng id duy nhất trong toàn bộ tài liệu HTML. Người dùng phải thêm id vào phần tử HTML cụ thể trước khi truy cập phần tử HTML với id. Người dùng có thể sử dụng phương thức getElementById () để truy cập phần tử HTML bằng id. Nếu bất kỳ phần tử nào không tồn tại với id đã chuyển vào phương thức getElementById, nó sẽ trả về giá trị null.

Cú pháp:

 document.getElementById (element_ID ); 

Tham số: Nó lấy id của phần tử mà người dùng muốn truy cập.

Giá trị trả về: Nó trả về đối tượng với id cụ thể. Nếu phần tử có id cụ thể không được tìm thấy, nó sẽ trả về giá trị NULL.

Ví dụ: Ví dụ này minh họa việc sử dụng phương thức getElementsById. Ngoài ra, nó in HTML bên trong của một đối tượng được trả về vào bảng điều khiển của trình duyệt. Người dùng có thể mở bảng điều khiển vào trình duyệt web chrome bằng cách nhấn.

HTML

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt; < / code>

& lt; title & gt; DOM getElementById () Phương thức & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; h1 id = "Geeksforgeeks" & gt;

GeeksforGeeks

& lt; / h1 & gt;

& lt; p & gt; DOM getElementById () Phương thức & lt; / p & gt;

& lt; script & gt;

// Truy cập phần tử bằng phương thức getElementById

var temp = document.getElementById (" Geeksforgeeks ");

console.log ( temp);

console.log (temp.innerHTML );

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra:

Nhận phần tử HTML theo className : Trong javascript, method rất hữu ích để truy cập các phần tử HTML bằng className. Các nhà phát triển có thể sử dụng một className nhiều lần trong một tài liệu HTML cụ thể. Khi người dùng cố gắng truy cập một phần tử bằng className, nó sẽ trả về tập hợp tất cả các đối tượng bao gồm một lớp cụ thể.

Cú pháp:

 document.getElementsByClassName (element_classnames); 

Tham số: Nó lấy nhiều tên lớp của phần tử mà người dùng muốn truy cập.

Giá trị trả về: < / strong> Nó trả về tập hợp các đối tượng có tên lớp cụ thể. Người dùng có thể lấy mọi phần tử từ đối tượng tập hợp bằng cách sử dụng chỉ mục bắt đầu từ 0.

Ví dụ 1: Ví dụ này minh họa việc sử dụng phương pháp. Nó in mọi phần tử của đối tượng bộ sưu tập được trả về vào bảng điều khiển. Người dùng có thể mở bảng điều khiển vào trình duyệt web chrome bằng cách nhấn.

HTML

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt; < / code>

& lt; title & gt; DOM getElementsByClassName () Phương thức & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; h1 < / code> class = "GeeksforGeeks" & gt; GeeksforGeeks mẫu 1 & lt; / h1 & gt;

& lt; h1 class = "GeeksforGeeks " & gt; GeeksforGeeks mẫu 2 & lt; / h1 & gt;

& lt; h1 class < / code> = "GeeksforGeeks" & gt; GeeksforGeeks mẫu 3 & lt; / h1 & gt;

& lt; p & gt; DOM getElementsByclassName () Phương thức & lt; / p & gt;

& lt; script & gt;

// Truy cập phần tử bằng phương thức getElementsByclassName

var temp = document.getElementsByClassName ("GeeksforGeeks");

console.log (temp [0]);

console.log (temp [1]);

console.log (temp [2]);

< / code> & lt; / script & gt;

< p class = "line number27 index26 alt2"> & lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra:

Ví dụ 2 : Nếu một phần tử cụ thể chứa nhiều hơn một lớp, người dùng có thể truy cập nó bằng cách chuyển các tên được phân tách bằng dấu cách của các lớp dưới dạng tham số của phương thức. Người dùng có thể mở bảng điều khiển vào trình duyệt web chrome bằng cách nhấn.

HTML

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt; < / code>

& lt; title & gt; DOM getElementByClassName () Phương thức & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; h1 class = "GeeksforGeeks geeks" & gt; GeeksforGeeks mẫu 1 & lt; / h1 & gt;

& lt; < / code> h1 class = "GeeksforGeeks" & gt; GeeksforGeeks mẫu 2 & lt; / h1 & gt;

& lt; h1 class = "GeeksforGeeks" & gt; GeeksforGeeks mẫu 3 & lt; / h1 & gt;

& lt; p & gt; DOM getElementsByclassName () Phương thức & lt; / p & gt; < / code>

& lt; script & gt ;

// Truy cập phần tử bằng getElementsByclassName

// phương thức có nhiều lớp

var temp = document.getElementsByClassName (

"GeeksforGeeks geeks");

console.log (temp [0]);

& lt; / script & gt;

& lt; / body & gt; < / p>

& lt; / html & gt;

 
 

Đầu ra:

Lấy phần tử HTML theo Tên : Trong javascript, hữu ích để truy cập các phần tử HTML bằng cách sử dụng tên. Ở đây, tên gợi ý thuộc tính tên của phần tử HTML. Phương thức này trả về tập hợp các phần tử HTML bao gồm tên cụ thể. Người dùng có thể lấy độ dài của bộ sưu tập bằng cách sử dụng phương thức độ dài tích hợp.

Cú pháp:

 document.getElementsByName (element_name); 

Tham số : Nó lấy tên của phần tử mà người dùng muốn truy cập.

Giá trị trả về: Nó trả về tập hợp các phần tử mà có một tên cụ thể.

Ví dụ: Ví dụ này minh họa việc sử dụng phương thức getElementsByName. Nó in mọi phần tử có tên cụ thể vào bảng điều khiển. Người dùng có thể mở bảng điều khiển vào trình duyệt web chrome bằng cách nhấn.

HTML

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt; < / code>

& lt; title & gt; DOM getElementByName () Phương thức & lt; / title & gt;

< p class = "line number6 index5 alt1"> & lt; / head & gt;

& lt; body & gt;

& lt; h1 name = "GeeksforGeeks" & gt; GeeksforGeeks mẫu 1 & lt; / h1 & gt;

& lt; h1 tên = " GeeksforGeeks " & gt; GeeksforGeeks mẫu 2 & lt; / h1 & gt;

& lt; h1 name = "GeeksforGeeks" & gt; GeeksforGeeks mẫu 3 & lt; / h1 & gt;

& lt; p & gt; DOM getElementsByName () Phương thức & lt; / p & gt;

< / p>

& lt; script & gt;

// Truy cập phần tử bằng phương thức getElementsByName

var temp = document.getElementsByName ("GeeksforGeeks");

console.log (temp [0]);

console.log (temp [1]);

console.log (temp [2]);

& lt; / script & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra:

Nhận các phần tử HTML bằng TagName : Trong javascript, phương pháp hữu ích để truy cập các phần tử HTML bằng cách sử dụng tên thẻ. Phương pháp này cũng giống như phương pháp. Ở đây, chúng tôi đang truy cập các phần tử bằng cách sử dụng tên thẻ thay vì sử dụng tên của phần tử.

Cú pháp:

 document.getElementsByTagName (Tag_name); 

Tham số: Nó nhận một tham số duy nhất là tên thẻ.

Giá trị trả về: Nó trả về tập hợp các phần tử bao gồm thẻ được truyền dưới dạng tham số.

Ví dụ: Ví dụ này minh họa việc sử dụng phương thức getElementsByTagName. Nó in mọi phần tử có một thẻ cụ thể vào bảng điều khiển. Người dùng có thể mở bảng điều khiển vào trình duyệt web chrome bằng cách nhấn.

HTML

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; title & gt; DOM getElementByTagName () Phương thức & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; h1 & gt; GeeksforGeeks mẫu 1 & lt; / h1 & gt;

& lt; h1 & gt; GeeksforGeeks mẫu 2 & lt; / h1 & gt;

< code class = "western"> & lt; h1 & gt; GeeksforGeeks mẫu 3 & lt; / h1 & gt;

& lt; p & gt; DOM getElementsByTagName () Phương thức & lt; / p & gt;

& lt; script & gt;

// Truy cập phần tử bằng

// phương thức getElementsByTagName

var temp = document.getElementsByTagName ("h1");

console.log (temp [0]);

console.log (temp [1]);

console.log (temp [2]);

& lt; / script & gt ;

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra:

Tải HTML các phần tử bằng Bộ chọn CSS: Người dùng có thể chọn các phần tử HTML bằng cách sử dụng các bộ chọn CSS khác nhau như lớp, id và tên thẻ cùng một lúc. Các phần tử HTML có thể được truy xuất bằng cách sử dụng bộ chọn CSS theo hai cách. Phương thức trả về phần tử đầu tiên phù hợp với bộ chọn CSS cụ thể. Phương thức trả về tất cả phần tử khớp với bộ chọn CSS cụ thể.

Để sử dụng id / class làm tham số, người dùng phải thêm ‘ # ‘ / ’. ‘ký trước nó. Người dùng có thể truyền trực tiếp tên thẻ vào 2 phương thức trên. Người dùng không cần phải tách các bộ chọn CSS khi chuyển nhiều bộ chọn CSS làm tham số.

Cú pháp:

 document.querySelector (bộ chọn);
document.querySelectorAll (bộ chọn); 

tham số: Là một tham số, nó chấp nhận các bộ chọn CSS khác nhau như lớp, tên thẻ và id.

< strong> Giá trị trả về: Phương thức querySelector () trả về đối tượng đầu tiên phù hợp với bộ chọn CSS, trong khi phương thức querySelectorAll () trả về tập hợp tất cả các đối tượng phù hợp với bộ chọn CSS.

< strong> Ví dụ 1: Ví dụ này minh họa việc sử dụng phương thức querySelector. Trong đoạn mã bên dưới, chúng tôi đã sử dụng các bộ chọn CSS khác nhau để truy cập các phần tử HTML từ DOM.

HTML

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; < / code> title & gt; DOM querySelector () Phương thức & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt; < / code>

& lt; h1 class = "gfg1 " id = " g1 " & gt; GeeksforGeeks mẫu 1 & lt; / h1 & gt;

& lt; h1 < code class = "color1"> class = "gfg1" id < / code> = "g2" & gt; GeeksforGeeks mẫu 2 & lt; / h1 & gt;

& lt; p class = " gfg1 " & gt; GeeksforGeeks mẫu 3 & lt; / p & gt;

& lt; script & gt;

// Truy cập phần tử theo tên lớp

< code class = "undefined space"> // sử dụng querySelector

var temp = document.querySelector (". Gfg1 ");

console.log (temp);

// Truy cập phần tử theo id bằng querySelector

temp = document.querySelector (" # g2 ");

console.log (temp);

// Truy cập phần tử theo tên lớp và

// id sử dụng querySelector

temp = document.querySelector (". gfg1 # g2 ");

console.log (temp) ;

// Truy cập phần tử bằng tên thẻ

// bao gồm lớp cụ thể

temp = document.querySelector ("p.gfg1");

console.log (temp);

& lt; / script & gt;

& lt; / body & gt;

< / p>

& lt; / html & gt;

 
 

Đầu ra:

Ví dụ 2 : Ví dụ này minh họa việc sử dụng phương thức querySelectorAll. Phương thức querySelectorAll () trả về danh sách nút của tất cả các đối tượng phù hợp với bộ chọn CSS. Người dùng có thể truy cập tất cả các phần tử của danh sách nút CSS bằng chỉ mục bắt đầu từ 0.

HTML

& lt;! DOCTYPE html & gt;

& lt; html & gt;

& lt; head & gt;

& lt; title & gt; DOM querySelectorAll () Phương thức & lt; / title & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; h1 class = "gfg1" id = "g1" & gt; GeeksforGeeks mẫu 1 & lt; / h1 & gt;

& lt; h1 class = " gfg1 " id < code class = "trơn"> = "g2" & gt; GeeksforGeeks mẫu 2 & lt; / h1 & gt;

& lt; p class = "gfg1" & gt; GeeksforGeeks mẫu 3 & lt; / p & gt;

& lt; p class = "gfg1" & gt; GeeksforGeeks mẫu 4 & lt; / p & gt;

& lt; script & gt;

// Truy cập phần tử theo tên lớp, id và

// tên thẻ sử dụng querySelectorAll

var temp = document.querySelectorAll (" h1.gfg1 # g2 ");

console.log (temp [0]);

// Truy cập phần tử theo tên thẻ bằng cách sử dụng

// querySelectorAll

temp = document.querySelectorAll ("p");

console.log (temp [0]);

console.log (temp [1]);

& lt; / script & gt; < / code>

& lt; / body & gt;

& lt; / html & gt;

< pre class = "output-pre">

 

Đầu ra:

Ghi chú cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề js lấy phần tử html

outerHTML in the JavaScript DOM

alt

  • Tác giả: dcode
  • Ngày đăng: 2018-02-26
  • Đánh giá: 4 ⭐ ( 2122 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The Element.outerHTML property of the Document Object Model allows you to both set and get the outerHTML of an Element. This is a simple HTML string, inclusive of the opening and closing tags.

    In this video I show an example of both retrieving and getting this property - as well as a demonstrating example of what might happen if you try and change the tag name.

    For your reference, check this out:
    https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

    Follow me on Twitter @dcode!

    If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

Get / Set thuộc tính thông qua JS DOM

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 1325 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học lập trình JavaScript này, bạn sẽ tìm hiểu cách get, set và xóa các thuộc tính khỏi các thành phần HTML trong JavaScript với JS DOM.

Lấy phần tử trong mảng JavaScript

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 3 ⭐ ( 5875 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách lấy phần tử trong mảng JavaScript. Bạn sẽ học được 4 cách cơ bản để lấy phần tử trong mảng JavaScript sau bài học này.

DOM Là Gì? Thao Tác Với DOM Bằng Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 3 ⭐ ( 1664 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để thao tác được với các thẻ HTML thì phải thông qua một cơ chế ta gọi là DOM. Vậy DOM là gì và cách thao tác với DOM bằng JavaScript nhé!

Chia sẻ 3 cách lấy phần tử trong mảng javascript

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 8757 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách lấy phần tử trong mảng Javascript, bằng cách sử dụng chỉ mục index và một số hàm hỗ trợ trong Javascript để lấy các phần tử của mảng trong Javascript

Bài 6: DOM – Xử lý các phần tử HTML trong Javascript

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 4649 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ tìm hiểu một phần rất quan trọng là DOM - xử lý các phần tử HTML trong Javascript. Qua bài học này, chúng ta sẽ biết các truy xuất, lấy dữ liệu, các thuộc tính từ các thẻ html, cũng như cách thêm, xóa các thẻ html.

DOM Elements trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 4 ⭐ ( 7268 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tiếp tục với series bài này chúng ta sẽ đi tìm hiểu và tác động javascript đến trực tiếp các thẻ HTML trong chương trình.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Python log2: Cách sử dụng log cơ sở 2 trong Python - hàm log2 trong python

By ads_php