07/09/2018, 15:18

Phương thức HTML DOM trong JavaScript

Các phương thức HTML DOM là những hành động bạn có thể thực hiện (trên các phần tử HTML). Thuộc tính HTML DOM là các giá trị (của các phần tử HTML) mà bạn có thể đặt hoặc thay đổi. Giao diện lập trình DOM HTML DOM có thể được truy cập bằng JavaScript (và với ...

Các phương thức HTML DOM là những hành động bạn có thể thực hiện (trên các phần tử HTML). Thuộc tính HTML DOM là các giá trị (của các phần tử HTML) mà bạn có thể đặt hoặc thay đổi.

Giao diện lập trình DOM

HTML DOM có thể được truy cập bằng JavaScript (và với các ngôn ngữ lập trình khác). Trong DOM, tất cả các phần tử HTML được định nghĩa là các đối tượng.

Giao diện lập trình là các thuộc tính và phương thức của từng đối tượng. Thuộc tính là một giá trị bạn có thể có được hoặc thiết lập (như thay đổi nội dung của một phần tử HTML). Phương thức là một hành động mà bạn có thể làm (như thêm hoặc xóa một phần tử HTML).

Ví dụ HTML DOM

Ví dụ sau sẽ thay đổi nội dung (innerHTML) của phần tử <p> với id = “demo”:

<html>
<body>

<p id=”demo”></p>

<script>
document.getElementById(“demo”).innerHTML = “Hello World!”;
</script>

</body>
</html>

Trong ví dụ trên, getElementById là một phương thức, trong khi innerHTML là một thuộc tính.

Phương thức getElementById

Cách phổ biến nhất để truy cập vào một phần tử HTML là sử dụng id của phần tử. Trong ví dụ trên phương thức getElementById được sử dụng id = “demo” để tìm phần tử.

Thuộc tính innerHTML

Cách đơn giản nhất để lấy nội dung của một phần tử là sử dụng thuộc tính innerHTML. Thuộc tính innerHTML hữu ích cho việc nhận hoặc thay thế nội dung của các phần tử HTML.

Thuộc tính innerHTML có thể được sử dụng để lấy hoặc thay đổi bất kỳ phần tử HTML, bao gồm <html> và <body>.

Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0