Hướng dẫn JavaScript getElementById (). Ở đây chúng ta thảo luận về cú pháp, cách thức hoạt động của getElementById (), các ví dụ để Triển khai với các mã và kết quả đầu ra phù hợp.

Bạn đang xem : tìm phần tử theo id js

JavaScript getElementById ()

Giới thiệu về JavaScript getElementById ()

Phương thức getElementById () của ngôn ngữ lập trình JavaScript trả về phần tử có thuộc tính ID với một giá trị cụ thể. JavaScript getElementById () này là một trong những phương thức hữu ích và phổ biến nhất trong HTML DOM (Mô hình đối tượng tài liệu là một API lập trình). Nó chủ yếu được sử dụng để thao tác hoặc lấy một số thông tin từ một phần tử trên tài liệu của bạn. Phương thức này sẽ trả về giá trị NULL nếu không có phần tử nào có sẵn với ID cụ thể. ID cụ thể này được đề cập phải là duy nhất trong trang. Nếu nhiều phần tử hơn được chỉ định với ID cụ thể thì getElementById () sẽ trả về mã nguồn của phần tử đầu tiên.

Cú pháp:

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

document.getElementById (elementID1)

Giải thích các tham số của getElementById ():

ElementID1: Tham số elementID1 này của hàm document.getElementById () là trường bắt buộc và là bắt buộc. Giá trị thuộc tính của ID của phần tử mà bạn muốn lấy. Tham số này chỉ chấp nhận các loại chuỗi.

JavaScript getElementById () hoạt động như thế nào?

Phương thức getElementById () của JavaScript hoạt động dựa trên tham số được truyền vào bên trong nó. Phương thức getElementById () này hoạt động bằng cách trả về phần tử có thuộc tính ID với giá trị cụ thể / được chỉ định. Phương pháp của JavaScript hoạt động với sự trợ giúp của HTML DOM. Nó hữu ích trong việc thao tác hoặc lấy thông tin từ phần tử trên vào tài liệu của bạn. Nó hoạt động trên các trình duyệt Google Chrome, Internet Explorer, Mozilla Firefox, Safari và Opera. Nó hoạt động bằng cách trả về đối tượng phần tử đại diện cho một phần tử với sự trợ giúp của ID cụ thể nhưng nó sẽ chỉ trả về NULL nếu không tồn tại giá trị phần tử nào với ID cụ thể / được chỉ định.

Các ví dụ để triển khai JavaScript getElementById ()

Dưới đây là các ví dụ được đề cập:

Ví dụ # 1

Đây là ví dụ về cách tạo một nút. Nó là để hiển thị văn bản khác với sự trợ giúp của hàm getElementById (). Ở đây, ở bên trong đầu tiên của thẻ HTML và thẻ BODY, thẻ đoạn văn được tạo thành một thuộc tính ID được gọi là “demo1” với giá trị chuỗi “Nhấp vào nút bên dưới để thay đổi văn bản ở đây.”. Sau đó, nút & lt; & gt; được tạo bằng cách chỉ định một chức năng “myFunciton1” để thực thi sau một lần nhấp vào nút. Khi nút được nhấn thì chức năng sẽ chạy. Bên trong hàm, hàm getElementById () được yêu cầu của chúng ta sẽ hoạt động. Ở đây “Xin chào RaghuRamKondeti, Đây là Pavan Kumar Sake” được đề cập đến trong hàm document.getElementById (). InnerHTML để thay thế văn bản gốc. Sau đó, các thẻ JavaScript và HTML được đóng lại chỉ để đảm bảo đặt đúng cú pháp. Đầu ra 1_1 là hiển thị đầu ra ngay sau khi thực thi mã. Sau đó, sau khi nhấp vào đầu ra của nút, 1_2 sẽ được hiển thị.

Xem Thêm  Xóa giá trị trường đầu vào trong JavaScript - rõ ràng giá trị đầu vào javascript

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; p id = "demo1" & gt; Nhấp vào nút bên dưới để thay đổi văn bản tại đây. & lt; / p & gt;
& lt; button onclick = "myFunction1 ()" & gt; Hãy thử :: & lt; / button & gt;
& lt; script & gt;
hàm myFunction1 () {
document.getElementById ("demo1"). innerHTML = "Xin chào RaghuRamKondeti, Đây là Pavan Kumar Sake";
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

JavaScript getElementById () - 1

JavaScript getElementById () - 2

Ví dụ # 2

Đây là ví dụ về việc thay đổi màu của văn bản thuộc tính của ID. Ở đây, lúc đầu là các thẻ HTML, thẻ BODY được tạo sau đó là các thẻ Đoạn văn như & lt; p & gt; được tạo ra. Bên trong các thẻ đoạn văn, một id “demo1” được tạo với một số giá trị chuỗi cho ID cụ thể. Sau đó, thẻ Nút được tạo. Bên trong thẻ nút, một hàm “myFunction1 ()” được tạo để thực thi chức năng sau khi nhấp vào nút được hiển thị tại thời điểm thực thi mã. Sau đó & lt; script & gt; thẻ được tạo để đặt mã JavaScript. Sau đó, một hàm được tạo và sau đó chỉ định một biến “x1”. Bên trong biến x1, getElementById () được tạo để truy cập giá trị thuộc tính của ID. Sau đó, nội dung biến “x1” được sử dụng với chức năng thay đổi màu cụ thể “x1.style.color” của nó. Ở đây, màu đỏ được kết hợp để thay đổi màu sắc. Kiểm tra kết quả đầu ra bên dưới.

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; p id = "demo1" & gt; Nhấp vào nút bên dưới, rất hữu ích để thay đổi màu của chính văn bản tại đây. Màu sẽ được đổi thành màu đỏ Màu & lt; / p & gt;
& lt; button onclick = "myFunction1 ()" & gt; Hãy thử đi bạn thân :: & lt; / button & gt;
& lt; script & gt;
hàm myFunction1 () {
var x1 = document.getElementById ("demo1");
x1.style.color = "red";
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

demo

red

Ví dụ # 3

Đây là ví dụ để lấy văn bản bên trong thẻ đoạn văn bằng cách truy cập nội dung bằng phương thức getElementById () của Ngôn ngữ JavaScript. Đây, lúc đầu bên trong thẻ đoạn văn “& lt; p & gt;” của & lt; html & gt; & amp; & lt; body & gt; , một id có tên là “element1” được tạo với văn bản “GetElementById1” bên trong các thẻ đoạn. Sau đó, “& lt; script & gt;” được tạo để bắt đầu mã hóa JavaScript để triển khai phương thức “getElementById ()”. Sau đó, một biến “s1” được tạo để truy cập vào id “element1” của thẻ đoạn để nhận giá trị thuộc tính của ID cụ thể. Sau đó, document.write (s1) được tạo để in giá trị biến “GetElementById1”. Sau đó, việc đóng các thẻ html được thực hiện.

Xem Thêm  Màu phông chữ CSS - màu phông chữ css html

Mã:

& lt; html & gt;
& lt; body & gt;
& lt; p id = "element1" & gt; GetElementById1 & lt; / p & gt;
& lt; h & gt;
& lt; p & gt; Văn bản dưới đây được tạo với sự trợ giúp của phương thức JavaScript getElementById () :: & lt; / p & gt;
& lt; script & gt;
var s1 = document.getElementById ("element1"). innerHTML;
document.write (s1);
& lt; / script & gt;
& lt; h & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

GetElementById1

Ví dụ # 4

Đây là ví dụ để thay thế phần văn bản gốc “GetElementById1” bằng văn bản cụ thể / được chỉ định “PROFITLOOPS” bằng cách gán giá trị văn bản cho hàm getElementById () và sau đó gán giá trị cho biến s. Ở đây, thuộc tính ID đầu tiên được tạo bên trong các thẻ đoạn văn. Ở đây thuộc tính ID là “Element1” với giá trị văn bản là “GetElementById1”. Sau đó, các biến được tạo để gán giá trị getElementById () nhưng ở đây một số văn bản chuỗi được gọi là “PROFITLOOPS” được tạo và được chỉ định để thay thế văn bản gốc. Sau đó, với sự trợ giúp của hàm document.write (), đầu ra của biến s sẽ được in. Sau đó, chỉ đóng các thẻ là xong. Đây & lt; hr & gt; thẻ chỉ được sử dụng để phân biệt văn bản với các khoảng trống dòng ngang.

Mã:

& lt; html & gt;
& lt; body & gt;
& lt; p id = "element1" & gt; GetElementById1 & lt; / p & gt;
& lt; h & gt;
& lt; p & gt; Tại đây, văn bản gốc "GetElementById1" được thay thế bằng văn bản chuỗi :: PROFITLOOPS :: & lt; / p & gt;
& lt; h & gt;
& lt; script & gt;
var s = document.getElementById ("element1"). innerHTML = "PROFITLOOPS";
document.write (s);
& lt; / script & gt;
& lt; h & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

PROFITLOOPS

Kết luận

Tôi hy vọng bạn đã biết được định nghĩa của phương thức getElementById () trong JavaScript là gì cùng với cú pháp của nó và giải thích về Tham số ElementID1, Hoạt động của phương thức JavaScript getElementById () cùng với các ví dụ khác nhau để hiểu khái niệm của tài liệu. getElementById () hoạt động tốt hơn và dễ dàng hơn.

Các bài báo được đề xuất

Đây là hướng dẫn về JavaScript getElementById (). Ở đây chúng ta thảo luận về cú pháp, cách hoạt động của JavaScript getElementById (), các ví dụ để triển khai với các mã và kết quả đầu ra phù hợp. Bạn cũng có thể xem qua các bài viết liên quan khác của chúng tôi để tìm hiểu thêm –

Xem Thêm  JavaScript print () method - giá trị in trong javascript

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề tìm phần tử theo id js

JavaScript DOM Tutorial #2 – Get Element By ID

alt

  • Tác giả: The Net Ninja
  • Ngày đăng: 2017-08-15
  • Đánh giá: 4 ⭐ ( 3301 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hey ninjas, in this JavaScript DOM tutorial I’ll be showing you how we can reach into the page and grab HTML elements based on their ID attribute. We’ll do this using the getElementById method.

    —– COURSE LINKS:
    + Atom editor – https://atom.io/a
    + GitHub Repo – https://github.com/iamshaunjp/JavaScript-DOM-Tutorial

    ———————————————————————————————
    Other tutorials:

    —– JAVASCRIPT FOR BEGINNERS:
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

    —– CSS FOR BEGINNERS:
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT

    —– NODE.JS TUTORIALS
    https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

    —– SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

    ============== The Net Ninja =====================

    For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

    ================== Social Links ==================

    Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

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

  • Tác giả: freetuts.net
  • Đánh giá: 5 ⭐ ( 8784 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

Tìm phần tử trong mảng JavaScript (indexOf,lastIndexOf)

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 5 ⭐ ( 5856 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách tìm phần tử trong mảng JavaScript. Bạn sẽ học được sử dụng các phương thức indexOf và lastIndexOf để tìm phần tử cũng như kiểm tra phần tử có trong mảng JavaScript sau bài học này.

DOM Elements trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 5 ⭐ ( 3940 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.

JavaScript: phương thức getElementById

  • Tác giả: www.daipho.com
  • Đánh giá: 5 ⭐ ( 6150 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phương thức getElementById trả về phần tử có thuộc tính ID là giá trị được chỉ định. Phương thức này là một trong những phương thức phổ biến nhất trong

Javascript: 15 ví dụ sử dụng map, reduce và filter

  • Tác giả: topdev.vn
  • Đánh giá: 4 ⭐ ( 1844 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: javascript có rất nhiều chức năng khác nhau và cách sử dụng của map, reduce và filter khác nhau, dưới đây là một vài ví dụ cho điều đó.

[Tự học Javascript] Tìm kiếm: getElement *, querySelector * trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 8183 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cafedev chia sẻ cho ace về Thuộc tính điều hướng DOM rất tuyệt vời khi các phần tử gần nhau. Nếu không thì sao? Làm thế nào để lấy một phần tử tùy ý của trang?

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

By ads_php