Thuộc tính, phương thức thường gặp trong DOM (Javascript)

Minh họa về thuộc tính,phương thức thường gặp trong dom javascript

☀ Thuộc tính trong DOM (javascript)

Tổng hợp các thuộc tính cơ bản thường dùng trong DOM (javascript)

- innerHTML: Trả về mã HTML bên trong phần tử áp dingj, tất cả các đánh dấu và nội dung bên trong sẽ được thay thế.

- Attributes: Thuộc tính này trả về các thuộc tính như id, name, type, title, href, attr,...

- className: Thông tin về tên thuộc tính class của phần tử, có thể gán class cho phần tử bạn muốn áp dụng.

VD sử dụng thuocj tính dom

<script type='text/javascript'>

var qb = document.getElementById("test").innerHTML;

document.getElementById("show").innerHTML = qb ;

</script>

<p id="test">Hello : Quốc Bửu Group</p>

<p id="show"></p>

//đoạn mã trên lấy html bên trong thẻ p có id "test" sau đó thêm vào thẻ p có id "show", kết quả hiển thị "Hello: Quốc Bửu Group" bên trong thẻ p có id "show"

 

<script>

  function myFunction() {

    var z = document.getElementById("btn").attributes[0].name;

    document.getElementById("demo").innerHTML = z;

   }

</script>

  <input type="button" id="btn" onclick="myFunction()" value="CLick here" name="quocbuugroup.com">

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

// đoạn mã này lấy name của button có id "btn" sau đó thêm vào thẻ p có id "demo", kết quả hiển thị "quocbuugroup.com" trong thẻ p có id "demo"

☀ Phương thức thường gặp trong DOM (javascript)

Tổng hợp các phương thức DOM cung cấp để thao tác trên đối tượng html. 

- getElementById(): Truy xuất đến một phần tử html thông qua id của nó.

- getElementsByName(): Truy xuất đến một phần tử html thông qua name của nó (lấy phần tử theo tên, chính là thuộc tính name trong thẻ).

- getElementsByTagName(): Truy xuất đến một phần tử html thông qua tên thẻ html.

- createElement(): Khởi tạo đối tượng mà không liên quan đến các thẻ HTML đã được hiển thị từ trước đó.

- appendChild(): Dùng để thêm vào vị trí cuối cùng của đối tượng một thẻ HTML nào đó.

- insertBefore(): Được dùng để thêm một Node vào đằng trước một node con nào đó.

- removeChild(): Được dùng để xóa một node con ra khỏi node hiện tại.

- replaceChild(): Dùng để thay thế một node con nào đó bằng một node khác mới hoàn toàn.

VD minh họa phương thức thường gặp trong DOM

<script type="text/javascript">

    var qb = document.getElementById('content');

    alert(qb)

</script>

<p id="content">Quốc Bửu Group</p>

//đoạn mã trên lấy nội dung bên trong thẻ p có id "content" sau đó hiển thị thông báo, kết quả "Quốc Bửu Group"

 

<script type="text/javascript">

function getAFunc() {

     var qb = document.getElementsByTagName("a");

    document.getElementById("demo").innerHTML = x[0].innerHTML;

}

</script>

<button onclick="getAFunc()">Click</button>

<br>

<a href="https://quocbuugroup.com">quocbuugroup</a><br>

<a href="http://zing.vn">Zing news</a><br>

<a href="http://vnexpress.net">VNExpress news</a>

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

//đoạn mã trên lấy tất cả nội dung thẻ a và show html thẻ a thứ 1 vào thẻ p có id "demo", kết quả "quocbuugroup" nằm trong thẻ p có id "demo".

Chúc các bạn thành công !