JavaScript: phương thức getElementById

JavaScript: phương thức getElementById

Phương thức getElementById trả về phần tử có thuộc tính ID là giá trị được chỉ định.

Phương thức này là một trong những phương thức phổ biến nhất trong HTML DOM và được sử dụng gần như mọi lúc bạn muốn thao tác (hoặc lấy thông tin từ) một phần tử trên tài liệu của bạn.

Trả về null nếu không có phần tử nào có ID được chỉ định tồn tại.

ID phải là duy nhất trong một trang. Tuy nhiên, nếu có nhiều hơn một phần tử với ID được chỉ định tồn tại (trùng ID), phương thức getElementById() trả về phần tử đầu tiên trong mã nguồn.

Cú pháp

var element = document.getElementById(elementID)

Tham số:

elementID là dạng chuỗi, giá trị của thuộc tính ID của phần tử bạn muốn nhận về

Giá trị trả lại:

Một đối tượng Element được mô tả trong đối tượng DOM khớp với elementID, hoặc null nếu không tìm thấy phần tử nào phù hợp.

Ví dụ

Lấy phần tử có id=“demo” và thay đổi màu của nó:

var x = document.getElementById("demo"); // Get the element with id="demo"
x.style.color = "red"; // Change the color of the element

HTML

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>getElementById example - daipho.com</title>
</head>
<body>
   <p id="para">Some text here</p>
   <button onclick="changeColor('blue');">blue</button>
   <button onclick="changeColor('red');">red</button>
</body>
</html>

JavaScript

function changeColor(newColor) {
    var elem = document.getElementById('para');
    elem.style.color = newColor;
}

Kết quả

Tính tương thích của trình duyệt web

Trình duyệt trên máy tính

Trình duyệt Phiên bản tương thích
Chrome 1
Edge
FireFox 1
Internet Eplorer 5.5
Opera 7
Safari 1

Trình duyệt trên thiết bị di động

Trình duyệt Phiên bản tương thích
Android Webview 1
Chrome for Android 1
Edge Mobile
FireFox for Android
Opera 6
iOS Safari 1
Samsung Internet ?

Tham khảo:

Các tính năng mặc định của trang web

Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:

  • Mã nguồn được tối ưu với các công cụ tìm kiếm.
  • Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy tính bảng, máy tính và laptop. Sử dụng công nghệ HTML5, CSS3 Mobile Responsive.
  • Dễ dàng thay đổi theo phong cách riêng của bạn.
  • Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
  • Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.

Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website

  • Thông tin sản phẩm và dịch vụ của công ty
  • Thông tin dự án, đối tác Giới thiệu – Liên hệ
  • Thông tin giới thiệu, thông tin liên hệ
  • Tin tức
  • Hình ảnh trên website, sửa các tag alt, descriotion, caption
  • Hình ảnh và caption trên Slideshow
Xin vui lòng liên hệ với chúng tôi nếu cần thêm thông tin