Phương thức trong DOM: appendChild, click, cloneNode...

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 và 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 tôi 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ụ:

<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 tôi 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ụ:

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 sét hay không, nếu đúng trả về true sai trả về false. Ví dụ:

<a id="div1" href="http://www.sothichweb.com" align="left">Sở thích web</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ụ:

<a id="div1" href="http://www.sothichweb.com" align="left">Sở thích web</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ó 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.

<div id="div2">http://www.sothichweb.com</div>
<div id="div1">Sở thích web</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 insertAffter, 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 affter 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 của tôi về Jquery sau khi tôi thực hiện xong seri về DOM. Tôi sẽ kết thúc bài viết này tại đây, 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.