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 : lấy phần tử bằng id javascript

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  Câu lệnh if trong Python với nhiều điều kiện (và + hoặc) - python nếu và hoặc

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  JavaScript Nhận phần tử theo lớp - javascript nhận được theo lớp

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 –

0

Chia sẻ

Chia sẻ


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

STOP Declaring IDs!?! JavaScript Global Variables Best Practices

alt

  • Tác giả: codeSTACKr
  • Ngày đăng: 2020-12-29
  • Đánh giá: 4 ⭐ ( 5278 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 🦸 Become A VS Code SuperHero Today: https://vsCodeHero.com
    🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

    Did you know that you don’t have to use getElementById() or querySelector() to access a DOM element that has an HTML ID?
    HTML element IDs are accessible as global variables on the window object.
    So, should we stop using `getElementById()` and `querySelector()`?
    NO
    Even though this does seem to be a convenient way to write a little less code, it should not be used.
    It’s always good practice to declare your variables.
    _____________________________________
    🤖 Get FREE AI-powered code completions from Kite: https://www.kite.com/get-kite/?utm_medium=referral&utm_source=youtube&utm_campaign=codestackr&utm_content=description-only
    📚 FREE 7-Day trial at Treehouse: https://treehouse.7eer.net/codeSTACKr
    _____________________________________

    🛠️ Tools I use:
    🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
    🟠 STACKr Code Font (Exclusive to my VS Code Course – https://vsCodeHero.com)
    🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
    _____________________________________

    💖 Show support!
    PayPal: https://paypal.me/codeSTACKr
    _____________________________________

    👀 Watch Next:
    Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
    _____________________________________

    🌐 Connect With Me:
    Website: https://www.codestackr.com
    Twitter: https://twitter.com/codeSTACKr
    Instagram: https://instagram.com/codeSTACKr
    Facebook: https://facebook.com/codeSTACKr
    _____________________________________

    ** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

    codeSTACKr JavaScript learntocode

onClick để lấy ID của nút đã nhấp

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 8285 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn cần gửi ID dưới dạng tham số chức năng. Làm như thế này:

Document.getElementById() trong JavaScript

  • Tác giả: viettuts.vn
  • Đánh giá: 4 ⭐ ( 3355 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phương thức document.getElementById() trong JavaScript trả về phần tử của id được chỉ định. Ví dụ về phương thức getElementById() để in khối lập phương

getElementById trong JavaScript và cách lấy element theo thuộc tính id

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 5 ⭐ ( 4396 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng getElementById trong JavaScript. Bạn sẽ biết cách sử dụng phương thức getElementById để lấy một element trong DOM thông qua thuộc tính id của element đó sau bài học này.

getElementById

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 9702 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phương thức getElementById() sẽ trả về phần tử có thuộc tính ID được cung cấp. Phương thức này là một trong số những phương thức phổ biến nhất của HTML DOM,.

JavaScript chọn phần tử dựa trên class

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 6702 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để lựa chọn phần tử dựa trên giá trị ID thì mình có thể dùng:
    document.getElementByID(‘test_id’);
    Có cách nào để chọn ra các phần tử dựa trên giá trị của lớp class c…

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

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 3 ⭐ ( 5857 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.

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  Thêm Bản đồ Google có Điểm đánh dấu vào Trang web của Bạn - cách thêm vị trí bản đồ google trong html

By ads_php