JavaScript getElementById () – js chọn phần tử theo id

Trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript getElementById () để chọn một phần tử theo Id được chỉ định.

Bạn đang xem : js chọn phần tử theo id

Tóm tắt < / strong>: trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript getElementById () để chọn một phần tử theo một id chỉ định.

Giới thiệu về phương thức JavaScript getElementById () < / h2>

Phương thức document.getElementById () trả về đối tượng Element đại diện cho một phần tử HTML có id khớp với một chuỗi được chỉ định.

< p> Nếu tài liệu không có phần tử nào có id được chỉ định, thì document.getElementById () trả về null .

Vì id của một phần tử là duy nhất trong một tài liệu HTML, document.getElementById () là một cách nhanh chóng để truy cập một e lement.

Không giống như phương thức querySelector () , getElementById () chỉ khả dụng trên đối tượng document , không các phần tử khác.

Phần sau hiển thị cú pháp của phương thức getElementById () :

 

const

element =

document

.getElementById (id);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Trong cú pháp này, id là một chuỗi đại diện id của phần tử cần chọn. Id phân biệt chữ hoa chữ thường. Ví dụ: 'root' 'Root' hoàn toàn khác nhau.

id là duy nhất trong HTML tài liệu. Tuy nhiên, HTML là một ngôn ngữ dễ sử dụng. Nếu tài liệu HTML có nhiều phần tử có cùng id, phương thức document.getElementById () sẽ trả về phần tử đầu tiên mà nó gặp phải.

Ví dụ về phương thức JavaScript getElementById ()

Giả sử bạn có tài liệu HTML sau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Phương thức JavaScript getElementById ()

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

p

id

=

" message "

& gt;

Một đoạn

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;

Ngôn ngữ mã:

HTML, XML

(

xml

)

Tài liệu chứa phần tử & lt; p & gt; thuộc tính id với giá trị message :

 

const

p =

document

.getElementById (

'message'

);

console

.log (p);

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

& lt;

p

id

=

" "

& gt;

Một đoạn

& lt; /

p

& gt;

Ngôn ngữ mã:

HTML, XML

(

xml

)

Sau khi chọn một phần tử, bạn có thể thêm kiểu vào phần tử , sử dụng thuộc tính của nó và chuyển đến phần tử gốc phần tử con .

Tóm tắt

  • Tài liệu ment.getElementById () trả về phần tử DOM được chỉ định bởi id hoặc null nếu không tìm thấy phần tử phù hợp.
  • Nếu nhiều phần tử có cùng một id , mặc dù nó không hợp lệ, getElementById () trả về phần tử đầu tiên mà nó gặp phải.

Hướng dẫn này có hữu ích không?


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

CSS Selectors Tutorial | Understand how CSS Selectors work with Examples - HTML Tutorial 84

  • Tác giả: Chidre'sTechTutorials
  • Ngày đăng: 2016-09-14
  • Đánh giá: 4 ⭐ ( 4718 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this HTML tutorial we Understand CSS selectors like Tag selector, ID selector, Class selector, Combination selector etc. etc. We understand How CSS selectors help us to select HTML elements and apply styles to them.

    =========================================

    In the next HTML tutorial you understand How to float an image either to the left , right or not at all. You understand How to Wrap text around an image in HTML using CSS float property.
    Follow the link for next video: https://youtu.be/P2CGjDt8USE

    In the previous HTML tutorial you understand CSS box model and all its properties like width, height, padding, border and margin. You understand How to define width, height, padding, margin, and border of an HTML element.
    Follow the link for previous video: https://youtu.be/hL93pLKLSLs

    =========================================

    HTML Tutorials Playlist:
    - https://www.youtube.com/playlist?list=PLdE8ESr9Th_uUR1vA9h-AP4uyzZXb0lqA

    =========================================
    Watch My Other Useful Tutorials:-

    CSS Tutorials Playlist:
    https://www.youtube.com/playlist?list=PLdE8ESr9Th_vdJ6wbXrZh6Ppra7IOf8fF

    JavaScript Tutorials Playlist:
    https://www.youtube.com/playlist?list=PLdE8ESr9Th_seeZTebEFavp257vds9ph5

    jQuery Tutorials Playlist:
    https://www.youtube.com/playlist?list=PLdE8ESr9Th_vu5OoXCwcHsudbR7qw82uU

    =========================================

    HI, I am Manjunath Chidre and I'm an Indian born. I make video tutorials on Computer Science, Information Technology, Animation, VFX, Multimedia, & Gaming courses. Essentially, I set my goal to help students around the world; to learn at free of cost; through my educational YouTube channel Chidre'sTechTutorials.

    =========================================

    Every video on my channel is made with Love and Hard work, So don't forget to Like, Comment & Share.
    Please do Subscribe, Hit the bell icon & Enjoy Learning. It's FREE.

    =========================================

    Subscribe to our YouTube channel:-
    https://www.youtube.com/chidrestechtutorials

    Join as member of our YouTube channel:-
    https://www.youtube.com/chidrestechtutorials/join

    Visit our Website:-
    https://www.chidrestechtutorials.com

    Download our Notes from Instamojo:-
    https://chidrestechtutorials.myinstamojo.com

    Become our Patron:-
    https://www.patreon.com/chidrestechtutorials

    Buy our Products on Spring:-
    https://chidres-tech-tutorials.creator-spring.com

    =========================================
    Follow Us:-

    Google My Business:-
    https://chidrestechtutorials.business.site

    Google Blog:-
    http://manjunathchidre.blogspot.com

    LinkedIn:-
    https://www.linkedin.com/company/chidrestechtutorials

    Facebook:-
    https://www.facebook.com/groups/chidrestechtutorials

    Twitter:-
    https://twitter.com/ManjunathChidre

    Tumblr:-
    https://chidrestechtutorials.tumblr.com

    Pinterest:-
    https://in.pinterest.com/chidrestechtutorials

    =========================================

    Despite my inconsistent uploads; Thanks for being amazing learners and still sticking with me on YouTube.

    =========================================
    Hash Tags:-
    ChidresTechTutorials HTML HTMLTutorial

Bộ chọn #id trong jQuery

  • Tác giả: webcoban.vn
  • Đánh giá: 4 ⭐ ( 3201 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử udjng bộ chọn #id trong jQuery để chọn một phần tử cụ thể dựa theo id của nó

Chọn một phần tử theo ID

  • Tác giả: hiepsiit.net
  • Đánh giá: 3 ⭐ ( 2314 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thuộc tính id trong HTML

  • Tác giả: quantrimang.com
  • Đánh giá: 5 ⭐ ( 9173 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong HTML, thuộc tính id được dùng để xác định một id duy nhất cho một phần tử HTML (giá trị phải là duy nhất trong file HTML).

Lấy các phần tử theo ID, Tên thẻ, hoặc Lớp cho Mã số với JavaScript

  • Tác giả: vie.blender3dtutorials.com
  • Đánh giá: 3 ⭐ ( 3137 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong JavaScript, phương thức getElementBy cung cấp truy cập dễ dàng đến bất kỳ phần tử hoặc nhóm các phần tử nào trong một tài liệu mà không phụ thuộc vào các mối quan hệ cha mẹ / con của các nút. Ba cách phổ biến nhất để truy cập các phần tử là getElementById getElementsById getElementsByTagName getElementsByClassName getElementById Phương pháp được sử dụng rộng rãi nhất để chọn các phần tử, getElementById là cần thiết cho web hiện đại ...

[JQuery] Phần 3: Các hàm chọn jQuery (jQuery Selectors)

  • Tác giả: www.dammio.com
  • Đánh giá: 4 ⭐ ( 8897 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bộ chọn Selector trong CSS

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 2145 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các bộ chọn CSS (selector) cho phép chúng ta chọn và thao tác với các phần tử HTML mà mình mong muốn. Bộ chọn được sử dụng để "tìm" (hoặc chọn) phần tử HTML

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  Tham gia trái và Tham gia phải - tham gia trái và tham gia phải