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

★ Tham khảo: Dịch vụ thiết kế và phát triển website

★ Tham khảo: Khóa học thiết kế, dàn trang của Quốc Bửu Group

★ Tham khảo: Khóa học lập trình website của Quốc Bửu Group

☀ 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 dụng, 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 thuộc tính dom

<div id="showInner"></div>

<span id="clickMe">Show</span>

$("#clickMe").click(function(){

document.getElementById("showInner").innerHTML = "Hello: Quốc Bửu Group";

});

//đoạn mã trên khi click vào nút "Show" sẽ thêm vào thẻ div có id "showInner" nội dung "Hello: Quốc Bửu Group"

☀ 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

<div id="txtNote">Nội dung đoạn ghi chú</div>

<div id="txtChange"></div>

var note = document.getElementById("txtNote").innerHTML;

document.getElementById("txtChange").innerHTML = "Thêm: "+note+ " vào thẻ txtChange";

//đoạn mã trên lấy tất cả nội dung thẻ txtNote sau đó bỏ vào thẻ txtChange

<div name="txtNote">Nội dung đoạn ghi chú</div>

<div name="txtChange"></div>

var note = document.getElementsByName("txtNote")[0].innerHTML;

document.getElementsByName("txtChange")[0].innerHTML = "Thêm: "+note+ "vào thẻ txtChange bằng getElementsByName";

//đoạn mã trên lấy tất cả nội dung thẻ có name txtNote sau đó bỏ vào thẻ có name là txtChange

<p>Đoạn văn một</p>

<p>Đoạn văn hai</p>

<p>Đoạn văn ba</p>

document.getElementsByTagName("p")[0].innerHTML = "Hello world";

//Đoạn mã trên lấy phần tử thẻ p đầu tiên sau đó thêm vào đoạn text "Hello world'

<span onclick="addPara()">Click thêm</span>
function addPara() {
  var para = document.createElement("p");
  para.innerText = "Đoạn văn thêm";
  document.body.appendChild(para);
}

//Đoạn mã trên thêm một thẻ p có nội dung "Đoan văn thêm" vào khi click nút "Click thêm"

<span onclick="addThemList()">Click thêm</span>

<ul id="myList">
  <li>Coffee</li>
  <li>Tea</li>
</ul>

function addThemList() {
  var newItem = document.createElement("li");
  var textnode = document.createTextNode("Nước khoáng");
  newItem.appendChild(textnode);

  var list = document.getElementById("myList");
  list.insertBefore(newItem, list.childNodes[0]);
}

//Đoạn mã trên thêm vào một thẻ li có nội dung "Nước khoáng" vào đầu của list có id là myList

<span onclick="removeLi()">Xóa li</span>

<ul id="myList">
  <li id="myLI">Coffee</li>
</ul>

var item = document.getElementById("myLI");

function removeLi() {
  item.parentNode.removeChild(item);
}

//Đoạn mã trên xóa thẻ li có id là myLi khỏi danh sách khi click vào nút "Xóa li"

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>

<span onclick="thayDoiLi()">Thay đổi</span>

function thayDoiLi() {
  var textnode = document.createTextNode("Water");
  var item = document.getElementById("myList").childNodes[0];
  item.replaceChild(textnode, item.childNodes[0]);
}

//Đoạn mã trên thay đổi thẻ li đầu tiên một thẻ li khác với nội dung "Nước khoáng" khi click vào nút "Thay đổi"

Video tham khảo thuộc tính, phương thức thường gặp trong DOM (Javascript)

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