Hướng dẫn Tìm hiểu về một số phương thức trong DOM (Phần 1)

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Tìm hiểu về một số phương thức trong DOM (Phần 1)

DOM rất tuyệt vời khi cung cấp sẵn cho chung ta rất nhiều phương thức giúp chúng ta thao tác các đối tượng trong hồ sơ, việc áp dụng các phương thức trong DOM là vô cùng đơn giản. Trong bài này chúng ta sẽ tìm hiểu nhanh về các phương thức trong DOM bao gồm appendChild, click, cloneNode, getAttribute, hasAttribute, hasChildNodes, insertBefore.

Trước hết mình xin giới thiệu sơ qua về các phương thức rất cơ bản được dùng rất nhiều lần để lấy phần tử trong hồ sơ cho những ai mới tìm hiểu về DOM:
  • getElementById() -> lấy phần tử theo tên id
  • getElementsByName() -> lấy phần tử theo tên, chính là thuộc tính name trong thẻ
  • getElementsByTagName() -> lấy phần tử theo tên thẻ HTML
Các phương thức trên đều là của đối tượng document.

appendChild
Phương thức này sẽ chèn một nút vào phía cuối cùng của phần tử, tham số là nút cần chèn, bạn chú ý rằng tham số là nút phần tử cần chèn đồng thời cũng là đối tượng vậy nên bạn có thể lấy trong hồ sơ hoặc tạo ra nó bằng DOM. Ví dụ:
Mã:
<div id="test">Nội dung thêm vào</div>
<div id="content">
<p>Đoạn văn thứ nhất</p>
<p>Đoạn văn thứ hai</p>
</div>
</body>
<script type="text/javascript">
  var wrap =document.getElementById('content');
  var test=document.getElementById(test);
  wrap.appendChild(test);
</script>

Kết quả từ ví dụ trên chúng ta có được phần tử có id là test sẽ được chèn vào trong phần tử có id là content vào vị trí cuối cùng ngay trước thẻ đóng.

click
Phương thức sẽ thực thi hành động click lên phần tử, đặc biệt hữu dụng để bạn tạo hành động với các liên kết. Ngoài ra chúng ta còn có các phương thức tác động đến form như blur và focus. Focus thực hiện khi chúng ta đặt dấu nháy vào trường nào đó trong form và blur là hành động khi chúng ta click ra ngoài sau khi hành động focus thực hiện.

cloneNode
Phương thức này sẽ nhân bản phần tử bạn chọn để tạo ra một bản copy. Phương thức sẽ nhân bản tất cả các thuộc tính và các nút chứa trong phần tử, sau khi có được bản sao chúng ta có thể thao tác với phần tử và dùng các phương thức khác để chèn vào bất kỳ đâu trong hồ sơ.

getAttribute
Trong bài trước mình có giới thiệu về thuộc tính attribute là thuộc tính trả về một mảng các thuộc tính của phần tử. Còn ở đây chúng ta có phương thức getAttribute dùng để lấy giá trị dựa vào tên thuộc tính của phần tử. Ví dụ:
Mã:
div1 = document.getElementById("div1");
a = div1.getAttribute("align");
alert(a); // Hiển thị giá trị của thuộc tính căn lề của phần tử div1

hasAttribute
Là phương thức trả về giá trị luận lý true hoặc false. Phương thức dùng để kiểm tra phần tử có thuộc tính đang xét hay không, nếu đúng trả về true sai trả về false. Ví dụ:
Mã:
<a id="div1" href="http://vnxf.vn" align="left">Cộng đồng Xenforo</a>
<script type="text/javascript">
  var d = document.getElementById("div1");
  if(d.hasAttribute("align")){
    alert('div1 có thuộc tính align');
  }else{
    alert('div1 không có thuộc tính align');
}
</script>

Phương thức này không làm việc với phiên bản IE7 trở xuống.

hasChildNodes
Cũng là phương thức trả về giá trị luận lý dùng để kiểm tra phần tử có nút con hay không, nếu đúng trả về true ngược lại thì false. Ví dụ:
Mã:
<a id="div1" href="http://vnxf.vn" align="left">Cộng đồng Xenforo</a>
<script type="text/javascript">
  var d = document.getElementById("div1");
  if(d.hasChildNodes()){
    alert('div1 có nút con');
  }else{
    alert('div1 không có nút con');
  }
</script>

Kết quả trả về từ ví dụ trên là hộp thông báo "div1 có nút con", bởi vì phần tử div1 có chứa nút văn bản.

insertBefore
Phương thức này cũng được sử dụng nhiều chẳng kém gì phương thức appendChild. Phương thức này dùng để chèn một nút phần tử vào phía trước phần tử bạn xét.
Mã:
<div id="div2">http://vnxf.vn</div>
<div id="div1">Cộng đồng Xenforo</div>
<script type="text/javascript">
  var div1 = document.getElementById("div1");
  var div2 = document.getElementById("div2");
  div1.insertBefore(div2);
</script>

Kết quả ví dụ trên chúng ta có được div1 sẽ nằm phía trước div2. Bạn nên nhớ rằng phần tử để áp dụng phương thức chính là nguồn còn tham số của phương thức chính là phần tử đích, như ví dụ trên ta thấy div1 chính là phần tử nguồn còn div2 chính là phần tử đích. Có thể nói đây là phương thức vô cùng hữu dụng tuy nhiên trong DOM lại không có phương thức insertAfter, nếu muốn thì bạn cũng có thể xây dựng một hàm nhỏ dùng để chèn phần tử vào phía sau, nhưng thực tế nếu dùng linh hoạt thì insertBefore cũng làm được. Sau này ta thấy thư viện Jquery cũng đã xây dựng phương thức after dùng để chèn về phía sau phần tử.

Chúng ta cũng thấy trong DOM có phương thức appendChild để chèn một nút con cuối cùng cho phần tử mà không có phương thức chèn một nút con đầu tiên cho phần tử đại loại như prependChild chẳng hạn, khắc phục điều này Jquery đã xây dựng thêm phương thức prepend. Chúng ta sẽ nói kỹ hơn điều này vào các seri kế tiếp về Jquery. Và chúng ta sẽ cùng tìm hiểu về các phương thức phổ biến trong DOM vào các bài kế tiếp.

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


Nguồn: sothichweb.com​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom