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

[PVS]

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

Trong bài trước chúng ta đã tìm hiểu về các phương thức trong DOM như appendChild, click, cloneNode, getAttribute, hasAttribute, hasChildNodes, insertBefore. Trong bài này chúng ta tiếp tục tìm hiểu về các phương thức phổ biến khác bao gồm: item, normalize, removeAttribute, removeChild, replaceChild, setAttribute.

item
Phương thức dùng để lấy một nút dựa vào chỉ mục của nút trong một mảng phần tử. Tham số là chỉ mục của phần tử. Trong DOM phần tử đầu tiên bắt đầu bằng chỉ mục 0. Ví dụ:

<p class="p1">http://vnxf.vn</p>
<p class="p2">Cộng đồng Xenforo</p>
<script type="text/javascript">
  var p_arr = document.getElementsByTagName('p');
  first_p = p_arr.item(1);
  alert(first_p.className); // Kết quả "p2"
</script>

Ví dụ trên chúng ta có hai phần tử p, dùng phương thức getElementsByTagName() lấy được một mảng phần tử p, sau đó dùng phương thức item() để lấy phần tử p có chỉ mục là 1. Kết quả chúng ta sẽ thấy hộp cảnh báo xuất hiện giá trị class của phần tử đầu tiên chúng ta lấy được.

normalize
Phương thức này cũng ít dùng, chúng ta dùng phương thức này trường hợp khi bạn thêm một nút văn bản vào trong một phần tử mà phần tử đã có văn bản, kết quả chúng ta có được hai nút văn bản trong 1 phần tử, phương thức này sẽ làm nhiệm vụ kết hợp hai nút văn bản đó thành một nút văn bản. Phương thức này không có tham số.

removeAttribute
Đọc tên phương thức chúng ta cũng biết là nó làm gì. Phương thức sẽ gỡ một thuộc tính nào đó của phần tử, đối số là tên thuộc tính cần gỡ. Như bài giới thiệu về DOM mình cũng đã nói nút thì có nhiều loại nút như nút phần tử, nút thuộc tính, nút văn bản.. và chúng cũng đồng thời là đối tượng, nên chúng ta có thể thấy ngoài phương thức removeAttribute chúng ta còn có phương thức removeAttributeNode dùng để gỡ nút thuộc tính của phần tử nhưng đối số phải là đối tượng nút thuộc tính, cũng như chúng ta có phương thức getAttribute để lấy giá trị thuộc tính của phần tử thì ngoài ra chúng ta cũng có phương thức getAttributeNode để trả về đối tượng là nút thuộc tính của phần tử.

removeChild
Đây là phương thức rất cần thiết cho bạn. Chúng ta có thể chèn phần tử vào trong hồ sơ thì đương nhiên DOM cũng có phương thức để gỡ bỏ phần tử khỏi hồ sơ. Tuy nhiên trong DOM chúng ta không có phương thức gỡ bỏ trực tiếp phần tử bằng cách lấy phần tử cần gỡ trong hồ sơ rồi sử dụng một phương thức remove nào đó để gỡ mà chúng ta chỉ có thể thực hiện thông qua phương thức removeChild. Phương thức này dùng để gỡ bỏ một phần tử con, vậy để gỡ bỏ phần tử chúng ta muốn thì cần phải lấy phần tử cha của phần tử đó rồi sử dụng phương thức removeChild với đối số chính là phần tử con cần gỡ. Ngoài ra phương thức removeChild còn trả về chính phần tử sau khi đã được remove. Ví dụ:

<p id="p1">http://vnxf.vn <span id="s1">Cộng đồng Xenforo</span></p>
<script type="text/javascript">
  var p1 = document.getElementById('p1'); // Lấy phần tử id=p1
  var span1 = document.getElementById('s1'); // lấy phần tử id=s1
  var oldspan1 =p1.removeChild(s1); // Xóa phần tử s1 và lưu vào trong biến oldspan1
  alert(oldspan1.innerHTML);
</script>

replaceChild
Phương thức này sẽ thay thế một nút phần tử con của phần tử hiện tại bằng một nút phần tử khác. Chúng ta có thể thay thế nút phần tử con bằng một phần tử khác trong hồ sơ hoặc có thể tạo nó ra trong DOM. Ví dụ:

<div id="div1" style="color: blue">
<span>http://vnxf.vn</span>
<span id="s1">Cộng đồng Xenforo</span>
</div>
<div>Các phương thức trong DOM</div>
<span id="p1">Sở thích thiết kế và lập trình website</span>
<script type="text/javascript">
  var div1 =document.getElementById('div1');
  var s1 =document.getElementById('s1');
  var p1 =document.getElementById('p1');
  div1.replaceChild(p1,s1);
</script>

Kết quả từ ví dụ trên chúng ta thấy phần tử với id=s1 đã được thay thế bằng phần tử có id=p1, đồng thời phần tử p1 cũ cũng biến mất do chúng ta đã lấy chúng và chèn vào một vị trí khác. Có thể thấy rằng cách thức làm việc của phương thức replaceChild cũng giống với cách thức làm việc của phương thức appendChild chỉ có sự khác biệt là replaceChild thì thay thế một phần tử con, còn appendChild thì chèn thêm một phần tử con.

setAttribute
Trong bài trước chúng ta đã tìm hiểu phương thức getAttribute để lấy giá trị thuộc tính của phần tử, bây giờ chúng ta tìm hiểu về phương thức setAttribute dùng để thay đổi giá trị của một thuộc tính nào đó đã tồn tại trong phần tử, nếu nó không tồn tại thì DOM sẽ tạo ra thuộc tính đó cho phần tử. Ví dụ:

<style type="text/css">
#s1{color: red; font-size: 50px;}
</style>
<body>
<p id="p1" align="left">http://vnxf.vn</p>
<script type="text/javascript">
  var p1 =document.getElementById('p1');
  p1.setAttribute('align','center');
  p1.setAttribute('id','s1');
</script>

Từ ví dụ trên chúng ta thấy phần tử p có giá trị của thuộc tính "align" được thay đổi thành "center" và nó còn được chèn thêm thuộc tính id=s1. Ngoài ra chúng ta cũng có thêm phương thức setAttributeNode cách thức làm việc cũng tương tự nhưng chỉ có 1 đối số là đối tượng nút thuộc tính, đối tượng nút thuộc tính này chúng ta có thể lấy thông qua phương thức getAttributeNode.

Thông qua hai bài về các phương thức trong DOM chúng ta đã tìm hiểu một số phương thức phổ biến được dùng trong DOM. Trong các bài tiếp theo mình sẽ giới thiệu về các thuộc tính và phương thức của đối tượng document, và các bài tiếp theo sẽ là các trình xử lý sự kiện trong DOM.

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

Nguồn: sothichweb.com​