Hướng dẫn lấy id trong javascript

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 là gì

getElementById hay còn gọi là document.getelementbyid trong JavaScript là một phương thức của đối tượng DOM, có tác dụng lấy một element từ trong DOM thông qua giá trị thuộc tính id của element đó.

Cú pháp sử dụng phương thức getElementById trong JavaScript như sau:

document.getElementById[id]

Trong đó đối số id của phương thức là giá trị thuộc tính id của element cần lấy [ví dụ: ‘example’ ]. Phương thức getElementById sẽ trả về Element Object nếu tìm thấy element có id chỉ định, và sẽ trả về null nếu không tìm thấy element phù hợp.

Element Object là kiểu đối tượng dùng để thao tác với element trong JavaScript. Trong Element Object được tích hợp nhiều thuộc tính cũng như phương thức có sẵn giúp chúng ta xử lý element, ví dụ như thuộc tính textContent để lấy giá trị của element chẳng hạn.

Ví dụ cụ thể, để lấy element có giá trị thuộc tính id là example, chúng ta sẽ viết như sau:

let element = document.getElementById['example'];
console.log[element.textContent];

Lưu ý, do trong một trang HTML thì mỗi giá trị id là duy nhất, chúng ta không thể đặt trùng tên id cho nhiều element được, nên khi dùng phương thức getElementById để lấy element thì kết quả trả về thông thường sẽ chỉ là một element duy nhất [nếu tìm thấy] mà thôi.

Trong trường hợp cùng một giá trị id lại được đặt trùng tên cho nhiều element, thì element đầu tiên được tìm thấy sẽ được trả về.

Mã mẫu

Sau đây hãy cùng tìm hiểu cách lấy một element từ trong DOM thông qua id của element đó bằng phương thức getElementById trong JavaScript.

Ví dụ minh hoạ cách dùng getElementById



Kế hoạch mua sắm

Ninh Bình
Shop mẹ và bé

Click và lấy element từ Id


function getElement[]{
    let element = document.getElementById['place'];
    console.log['Địa chỉ: ' + element.textContent];

    element = document.getElementById['shopname'];
    console.log['Tên shop: ' + element.textContent];
}

Trong mã HTML ở trên, chúng ta sẽ lấy 2 element có id là id="place" và id="shopname" thông qua phương thức document.getElementById.

Sau khi lấy được element rồi, thông qua thuộc tính textContent chúng ta sẽ xuất ra màn hình nội dung textContent của các element đó.

Và kết quả:

Bài viết liên quan

• attributes trong JavaScript và cách lấy danh sách thuộc tính của Element

• childNodes trong JavaScript và cách lấy các Node con

• children trong JavaScript và cách lấy các Element con

• CSS selectors trong JavaScript

• DocumentFragment trong JavaScript và cách thêm đồng thời nhiều Node

• DOM là gì trong JavaScript

• firstChild trong JavaScript và cách lấy Node con đầu tiên

• firstElementChild trong JavaScript và cách lấy Element con đầu tiên