1. Phương thức và thuộc tính Dom trong JavaScript

Phương thức DOM là các hành động mà ta có thể thực hiện trên các đối tượng (phần tử) của DOM. Các phương thức DOM bao gồm chọn một phần tử, tạo một phần tử mới, thay đổi nội dung của phần tử, thay đổi CSS, xóa phần tử, …

Js chủ yếu sử dụng để thay đổi và thao tác phần tử HTML . Khi ta muốn thay đổi bất kỳ phần tử nào thì trước tiên, ta phải có phần tử đó đã. Để có phần tử đó, ta sẽ lấy nó bằng những phương thức của Dom.

Thuộc tính là một giá trị mà ta có thể lấy hoặc đặt (như thay đổi nội dung của một phần tử HTML).

Ví dụ: thay đổi nội dung ( phần tử innerHTML) <p> bằng id=”demo” :

<p id="demo"></p>

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

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

2. Phương thức Dom để tìm phần tử

Thông thường, ta muốn thao tác các phần tử HTML. Để thao tác phần tử, thì phải tìm các phần tử đầu tiên. Js đã cung cấp cho chúng ta nhiều phương pháp khác nhau để tìm một phần tử trong tài liệu.

Phương thức	Mô tả
document.getElementById ()	Chọn phần tử duy nhất với id đã cho. Trường hợp có 2 id giống nhau thì nó chọn phần tử đầu tiên.
document.getElementsByClassName ()	Chọn các phần tử của bộ sưu tập với tên lớp đã cho
document.getElementsByTagName ()	Chọn các phần tử bộ sưu tập với tên thẻ đã cho
document.querySelector ()	Chọn phần tử là phần tử đầu tiên về cơ bản của chuỗi CSS
document.querySelectorALL ()	Chọn danh sách các phần tử cơ bản của chuỗi CSS

Để tìm phần tử bằng phương pháp sử dụng id getElementById() . Phương thức này chấp nhận một đối số chuỗi là id của phần tử cụ thể. Phương thức chọn và trả về phần tử.

<p id="id1">Phần tử này có id = "id1".</p>
<button onclick="findElement()">Phần tử truy cập</button>

<script>
  function findElement() {
    const element = document.getElementById("id1");
    element.innerHTML = "Phần tử được tìm thấy!"
  }
</script>

3. Sửa đổi các phần tử với Dom

Từ các phương thức DOM ở trên, ta có thể truy cập các phần tử DOM. Nhưng điều gì tiếp theo sau khi bạn truy cập chúng. Sau khi truy cập các phần tử, thì có thể sửa đổi và thực hiện một số thay đổi đối với các phần tử HTML. Các phương thức và thuộc tính này được sử dụng để thay đổi nội dung, kiểu CSS và lấy hoặc đặt các thuộc tính cho phần tử.

Phương thức\Thuộc tính	Mô tả
element.innerHTML	Đây là một thuộc tính phần tử bằng cách sử dụng mà bạn có thể lấy hoặc đặt nội dung bên trong của phần tử
element.innerText	Nó trả về và đặt văn bản bên trong của một phần tử thành giá trị được cho trong chuỗi mà không cần phân tích cú pháp thành HTML
element.style.property = new style	Sử dụng các thuộc tính phần tử này, bạn có thể đặt CSS thành phần tử bằng Js
element.getAttribute (attribute_name)	Phương thức này được sử dụng để lấy giá trị của thuộc tính được chỉ định
element.setAttribute (attribute_name, value)	Đây là phương thức phần tử được sử dụng để đặt một thuộc tính mới hoặc sửa đổi giá trị của thuộc tính thành phần tử
element.removeAttribute (attribute_name)	Phương thức phần tử này xóa thuộc tính đã chỉ định khỏi phần tử

4. Thuộc tính innerHTML trong JavaScript

Thuộc tính innerHTML lấy phần tử hoặc đặt HTML bên trong phần tử cụ thể. Cách dễ nhất để lấy nội dung của một phần tử là sử dụng thuộc tính innerHTML . Nó cũng hữu ích để lấy 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 nào, bao gồm <html> và <body> .

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Ví dụ về Javascript - innerHTML</title>
</head>

<body>
  <h2>"innerHTML" thuộc tính nhận và thiết lập nội dung bên trong của phần tử.</h2>
  <p id="id1">Đây là<strong>Đoạn 1</strong>.</p>
  <div id="id2">
    <div class="column">
      <p>Đây là cột 1.</p>
    </div>
    <div class="column">
      <p>Đây là cột 2.</p>
    </div>
  </div>
  <button onclick="textNode1()">Hiển thị nội dung node1</button>
  <button onclick="textNode2()">Hiển thị nội dung node2</button>

  <script>
    const node1 = document.getElementById("id1");
    const node2 = document.getElementById("id2");
    function textNode1() {
      alert(node1.innerHTML);
    }
    function textNode2() {
      alert(node2.innerHTML);
    }
  </script>
</body>

</html>

5. Thuộc tính innerText trong JavaScript

Thuộc tính innerText với phần tử được sử dụng để đặt hoặc trả về nội dung văn bản bên trong của nút cụ thể và các nút con của nó. Điều này có nghĩa là nó trả về nội dung văn bản bên trong của nút và tất cả các nút con của nó.

Thuộc tính innerText trả về nội dung của tất cả các nút của nó ngoại trừ <style> và <script> .

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Ví dụ Javascript - innerText</title>
</head>

<body>
  <h2>"innerText" thuộc tính nhận và thiết lập nội dung bên trong của phần tử.</h2>
  <p id="id1">Đây là <strong>Đoạn 1</strong>.</p>
  <div id="id2">
    <div class="column">
      <p>Đây là cột 1</p>
    </div>
    <div class="column">
      <p>Đây là cột 2.</p>
    </div>
  </div>
  <button onclick="textNode1()">Hiển thị nội dung node1</button>
  <button onclick="textNode2()">Hiển thị nội dung node2</button>

  <script>
    const node1 = document.getElementById("id1");
    const node2 = document.getElementById("id2");
    function textNode1() {
      alert(node1.innerText);
    }
    function textNode2() {
      alert(node2.innerText);
    }
  </script>
</body>

</html>

6. Phương thức DOM để tạo và xóa các phần tử

Phương thức	Mô tả
document.createElement ()	Tạo một phần tử được chỉ định bởi tên thẻ
document.createTextNode ()	Tạo một nút văn bản mới
document.appendChild ()	Nó nối một phần tử khác vào một phần tử trong DOM
document.insertBefore ()	Phương thức này chèn một nút trước một nút được chỉ định, nếu nút đã tồn tại trong DOM thì nó sẽ thay đổi vị trí của nó
document.replaceChild (new, old)	Nó thay thế một phần tử từ DOM bằng một phần tử khác
document.removeChild ()	Nó xóa một phần tử khỏi DOM
document.remove ()	Phương pháp này xóa nút khỏi DOM mà nó được áp dụng
document.write ()	Nó viết một cái gì đó trong tài liệu

Phương thức và Thuộc tính Dom trong JavaScript