GetElementById JavaScript

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ố

Bài viết này thảo luận về cách hoạt động của phương thức “getElementByID” trong JavaScript. Phương thức getElementByID[] trong JavaScript là một phương thức tài liệu. Khi chúng tôi đưa ra một chuỗi cụ thể khớp với ID của phần tử HTML, nó sẽ trả về đối tượng phần tử. Mỗi phần tử HTML có thể được gán một ID duy nhất. Nếu hai hoặc nhiều phần tử có cùng ID, thì phương thức getElementByID[] trả về phần tử đầu tiên. Phương thức getElementByID[] được sử dụng để truy cập phần tử nhanh hơn. Nó giúp chúng tôi thao tác một phần tử HTML trong tài liệu của chúng tôi và được hỗ trợ bởi tất cả các trình duyệt hiện đại. Nếu không có phần tử, hàm getElementById[] trả về null. Trong những trường hợp như vậy, chúng ta có thể sử dụng tài liệu. querySelector[] không yêu cầu bất kỳ ID nào

cú pháp

Cú pháp của phương thức getElementByID[] là -

document.getElementByID[id];

Trong đó, id là phần tử id sẽ được trả về. Nó phân biệt chữ hoa chữ thường. Một đối tượng phần tử được trả về

ví dụ 1

Đây là một chương trình ví dụ để trỏ đến ID không tồn tại trả về NULL bằng cách sử dụng tài liệu. phương thức getElementByID[]

Tóm lược. trong hướng dẫn này, bạn sẽ học cách sử dụng JavaScript

const box = document.querySelector["#box"];

0 để chọn một phần tử theo một id được chỉ định

Giới thiệu về phương thức getElementById[] của JavaScript

Phương thức

const box = document.querySelector["#box"];

1 trả về một đối tượng

const box = document.querySelector["#box"];

2 đại diện cho một phần tử HTML có id khớp với một chuỗi đã chỉ định

Nếu tài liệu không có phần tử nào với id được chỉ định, thì

const box = document.querySelector["#box"];

1 trả về

const box = document.querySelector["#box"];

4

Bởi vì id của một phần tử là duy nhất trong tài liệu HTML, nên

const box = document.querySelector["#box"];

1 là một cách nhanh chóng để truy cập một phần tử

Không giống như phương thức

    
        JavaScript getElementById[] Method
    
    
        A paragraph
    
Code language: HTML, XML [xml]

0,

const box = document.querySelector["#box"];

0 chỉ khả dụng trên đối tượng

    
        JavaScript getElementById[] Method
    
    
        A paragraph
    
Code language: HTML, XML [xml]

2, không có các phần tử khác

Sau đây là cú pháp của phương thức

const box = document.querySelector["#box"];

0

const box = document.getElementById["box"];

0

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

    
        JavaScript getElementById[] Method
    
    
        A paragraph
    
Code language: HTML, XML [xml]

4 và

    
        JavaScript getElementById[] Method
    
    
        A paragraph
    
Code language: HTML, XML [xml]

5 hoàn toàn khác nhau

    
        JavaScript getElementById[] Method
    
    
        A paragraph
    
Code language: HTML, XML [xml]

6 là duy nhất trong tài liệu HTML. Tuy nhiên, HTML là một ngôn ngữ tha thứ. Nếu tài liệu HTML có nhiều phần tử có cùng id, phương thức

const box = document.querySelector["#box"];

1 trả về phần tử đầu tiên mà nó gặp

Ví dụ về phương thức getElementById[] trong JavaScript

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

________số 8

Tài liệu chứa một phần tử

    
        JavaScript getElementById[] Method
    
    
        A paragraph
    
Code language: HTML, XML [xml]

8 có thuộc tính

    
        JavaScript getElementById[] Method
    
    
        A paragraph
    
Code language: HTML, XML [xml]

6 với giá trị

const box = document.getElementById["box"];

70

const box = document.getElementById["box"];

7

đầu ra

const box = document.getElementById["box"];

9

Sau khi chọn một phần tử, bạn có thể thêm kiểu cho phần tử đó, thao tác với các thuộc tính của nó và duyệt qua các phần tử cha và con

getElementById trong JavaScript là gì?

Làm cách nào để nhận giá trị theo id trong JavaScript?

Làm cách nào để lấy div theo id trong JavaScript?

Làm cách nào để truy cập id trong JavaScript?