Làm cách nào tôi có thể lấy id html?

Giá trị chuỗi phải khớp với giá trị của thuộc tính ID được chỉ định trong Đánh dấu HTML

Trong trường hợp này. hộp

Sau khi khớp, nó sẽ trả về đối tượng HTMLDivElement

const box = document.getElementById("box");

Gán nó vào một hộp được gọi là hằng số

Nếu không khớp, phương thức getElementById() sẽ trả về null

Phương thức getElementByID() sẽ chỉ khả dụng trong đối tượng tài liệu chung

Bởi vì, giá trị của thuộc tính ID phải là duy nhất cho toàn bộ trang HTML

Nhận phần tử theo Id bằng cách sử dụng querySelector()

Ngoài ra, phương thức querySelector() cũng lấy một phần tử theo id trong JavaScript

Gọi phương thức querySelector() trên đối tượng tài liệu

Phương thức querySelector() cũng nhận một đối số là chuỗi

const box = document.querySelector("#box");

Giá trị chuỗi phải khớp với giá trị của thuộc tính ID được chỉ định trong Đánh dấu HTML cùng với ký hiệu Bộ chọn CSS

Ví dụ. # đăng ký ID

Vì vậy, giá trị chuỗi sẽ là #box

Nhận phần tử theo ID InnerHTML

Nhận phần tử con theo ID

Bạn cũng có thể lấy phần tử con theo id bằng cách sử dụng. tài sản trẻ em

Div có phần tử hộp Id có phần tử div con có id

Nhận tham chiếu DOM đến phần tử hộp div là phần tử gốc

Gán nó vào một hộp cố định

Các. thuộc tính con lấy tất cả các phần tử bên trong phần tử hộp div

Phần tử chúng tôi muốn lấy là div với id box-inner

Gọi phương thức item() trên hộp. bọn trẻ

Truyền giá trị thuộc tính ID của phần tử con

Trong trường hợp này. hộp bên trong

const box = document.getElementById("box");
const boxInner = box.children.item("box-inner");

Nhận phần tử theo ID InnerHTML

Tìm hiểu cách đặt/lấy văn bản hoặc Phần tử HTML bằng thuộc tính có tên là innerHTML

const box = document.getElementById("box");
box.innerHTML = "Box";

Bạn cũng có thể thêm các Phần tử HTML bằng cách sử dụng InternalHTML

const box = document.getElementById("box");
box.innerHTML = "
Box
";

Nhận phần tử theo giá trị ID

Tìm hiểu cách lấy giá trị của bất kỳ thành phần biểu mẫu HTML nào bằng phương thức getElementById()

Để làm điều đó, hãy gọi phương thức getElementById() trên đối tượng tài liệu truyền giá trị của thuộc tính ID làm đối số

Trong bài viết này, chúng ta sẽ biết cách xác định phần tử HTML cụ thể theo id của nó bằng Thuộc tính id HTML, cùng với việc hiểu cách triển khai nó thông qua các ví dụ

Thuộc tính id là một mã định danh duy nhất được sử dụng để chỉ định tài liệu. Nó được CSS và JavaScript sử dụng để thực hiện một tác vụ nhất định cho một phần tử duy nhất. Trong CSS, thuộc tính id được sử dụng bằng ký hiệu # theo sau là id. trích dẫn không bắt buộc trong tag=” ” trong mọi trường hợp. Nhưng viết với dấu ngoặc kép là một thực hành tốt

cú pháp

Ghi chú. Đây là một thuộc tính toàn cầu, nó có thể được sử dụng trong tất cả các thẻ

ví dụ 1. Trong ví dụ này, chúng tôi chỉ tạo kiểu cho phần tử có id là “geeks”

HTML

________số 8

<

const box = document.getElementById("box");

0

const box = document.getElementById("box");

1

<

const box = document.getElementById("box");

3____11

const box = document.getElementById("box");

5<0

const box = document.getElementById("box");

1

const box = document.getElementById("box");

53

45

const box = document.getElementById("box");

57

const box = document.getElementById("box");

590

const box = document.getElementById("box");

1

9

const box = document.getElementById("box");

3

const box = document.getElementById("box");

1

<<6

const box = document.getElementById("box");

1

const box = document.getElementById("box");

5<

const box = document.getElementById("box");

00

const box = document.getElementById("box");

01

const box = document.getElementById("box");

00

const box = document.getElementById("box");

1

const box = document.getElementById("box");

5<

const box = document.getElementById("box");

06

const box = document.getElementById("box");

07

const box = document.getElementById("box");

08

const box = document.getElementById("box");

09

const box = document.getElementById("box");

10

const box = document.getElementById("box");

06

const box = document.getElementById("box");

1

_______89____96____11

9

const box = document.getElementById("box");

0

const box = document.getElementById("box");

1

đầu ra

Thuộc tính id HTML

ví dụ 2. Trong ví dụ này, chúng tôi đang thêm các thuộc tính kiểu dáng vào giá trị thuộc tính id cụ thể bằng cách tìm nạp giá trị id của nó

HTML

________số 8

<

const box = document.getElementById("box");

0

const box = document.getElementById("box");

1

<

const box = document.getElementById("box");

3____11

const box = document.getElementById("box");

5<<8<9<8

const box = document.getElementById("box");

1

const box = document.getElementById("box");

5<0

const box = document.getElementById("box");

1

const box = document.getElementById("box");

5____137

4

const box = document.getElementById("box");

39

4

const box = document.getElementById("box");

11

4

const box = document.getElementById("box");

13

4

const box = document.getElementById("box");

15

const box = document.getElementById("box");

57

const box = document.getElementById("box");

53

4

const box = document.getElementById("box");

15

4

const box = document.getElementById("box");

53

const box = document.getElementById("box");

57

const box = document.getElementById("box");

590

const box = document.getElementById("box");

1

9

const box = document.getElementById("box");

3

const box = document.getElementById("box");

1

<<6

const box = document.getElementById("box");

1

const box = document.getElementById("box");

5<<8

const box = document.getElementById("box");

07

const box = document.getElementById("box");

080102<8

const box = document.getElementById("box");

1

const box = document.getElementById("box");

5<<8

const box = document.getElementById("box");

07

const box = document.getElementById("box");

08

const box = document.getElementById("box");

09

const box = document.getElementById("box");

1

413

const box = document.getElementById("box");

59<8

const box = document.getElementById("box");

1

_______89____96____11

9

const box = document.getElementById("box");

0

const box = document.getElementById("box");

1

đầu ra

Thêm thuộc tính kiểu vào giá trị thuộc tính id cụ thể

Note: In HTML5, id attributes can be used by any HTML tag but in HTML 4.01 there are some restriction to use id attributes. It can not be used by , , , , ,