Thuộc tính trong DOM như attributes, childNodes...

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Khanh Hoang
Wed, 6/03/2013, 7:52 (GMT+7)
0 Bình luận

Thuộc tính trong DOM như attributes, childNodes...

Trong bài này chúng ta sẽ tìm hiểu về một số thuộc tính trong DOM như attributes, childNodes, className, firstChild, innerHTML, lastChild, length, nextSibling, nodeName, nodeType, nodeValue, parentNode, previousSibling.

attributes

Thuộc tính này trả về một mảng các thuộc tính của phần tử. Để lấy tên thuộc tính ta dùng thêm thuộc tính "name", và để lấy giả trị của thuộc tính chúng ta dùng thêm thuộc tính "value".

Ví dụ sau chúng ta lấy tên và giá trị của thuộc tính attributes[0] của phần tử p. Khi click vào nút show kết quả nhận được là chuỗi "id->p1" trong hộp text box.

<html>
<head>
<script>
function showA(){
  p = document.getElementById("p1");
  t = document.getElementById("t");
  t.setAttribute("value",
  p.attributes[0].name + "->" +
  p.attributes[0].value);
}
</script>
</head>
<p id="p1" style="color: blue;">Sample Paragraph</p>
<form>
  <input type="button" value="show" onclick="showA()" />
  <input id="t" type="text" value="" />
</form>
</html>

childNodes

Thuộc tính trả về một mảng các nút con của phần tử. Từ đây chúng ta giễ ràng dùng vòng lặp for để duyệt qua hết các phần tử trong mảng.

// lay tat ca cac phan tu con cua table
kids = table.childNodes;
for (var i = 0; i < kids.length; i++) {
// Lam mot viec gi do voi phan tu kids[i]
}

className

Cho biết thông tin về tên thuộc tính class của phần tử, bạn còn có thể gán class cho phần tử bạn muốn.

Cú pháp:

name = element.className
element.className = name

firstChild

Trả về phần tử con đầu tiên.

trow = document.getElementById("row1");
left_cell = trow.firstChild;

innerHTML

Trả về tất cả các đánh dấu và nội dung bên trong phần tử. Bạn cũng có thể gán đánh dấu và nội dung cho phần tử.

lastChild

Trả về phần tử con cuối cùng.

tr = document.getElementById("row1");
corner_td = tr.lastChild;

length

Trả về tổng số phần tử trong một mảng hoặc số lượng ký tự trong một chuỗi.

nextSibling

Trả về phần tử tiếp của phần tử tiử được chọn.

next_element = element.nextSibling

nodeName

Trả về tên của nút chính là tên thẻ mà bạn chọn.

nodeType

Trả về tên loại nút, bạn cũng biết nút thì có thể là nút phần tử hoặc nút văn bản hay nút thuộc tính...

Sau đây là các giá trị thuộc tính nodeType sẻ trả về tương ứng với các loại nút.

ELEMENT_NODE = 1;
ATTRIBUTE_NODE = 2;
TEXT_NODE = 3;
CDATA_SECTION_NODE = 4;
ENTITY_REFERENCE_NODE = 5;
ENTITY_NODE = 6;
PROCESSING_INSTRUCTION_NODE = 7;
COMMENT_NODE = 8;
DOCUMENT_NODE = 9;
DOCUMENT_TYPE_NODE = 10;
DOCUMENT_FRAGMENT_NODE = 11;
NOTATION_NODE = 12;

nodeValue

Trả về giá trị của nút, thường để lấy giá trị là nội dung text của nút văn bản

Ví dụ:

<div id="d1">fgdsgdsfgdsg</div>
<script type="text/javascript">
  div1 = document.getElementById("d1");
  alert(div1.firstChild.nodeValue);
</script>

parentNode

Trả về phần tử cha của phần tử bạn chọn

Ví dụ:

<div><p id="d1">fgdsgdsfgdsg</p></div>
<script type="text/javascript">
  div1 = document.getElementById("d1");
  alert(div1.parentNode.nodeName);
</script>

previousSibling

Trả về phần tử đứng trước phần tử bạn chọn trong cây thư hồ sơ.

Ví dụ:

<p>fgdsgdsfgdsg</p>
<div id="d1">fgdsgdsfgdsg</div>
<script type="text/javascript">
  div1 = document.getElementById("d1");
  alert(div1.previousSibling.nodeName);
</script>

(còn tiếp). Các thuộc tính trong DOM: offsetHeight, offsetWidth...

Bạn thấy bài viết này như thế nào?: