Hướng dẫn Tìm hiểu về một số thuộc tính 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ố thuộc tính trong DOM (Phần 1)

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.
Mã:
<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 dễ ràng dùng vòng lặp for để duyệt qua hết các phần tử trong mảng.
Mã:
// 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:
Mã:
name = element.className
element.className = name

firstChild
Trả về phần tử con đầu tiên.
Mã:
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.
Mã:
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ử được chọn.
Mã:
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ụ:
Mã:
<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ụ:
Mã:
<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ụ:
Mã:
<p>fgdsgdsfgdsg</p>
<div id="d1">fgdsgdsfgdsg</div>
<script type="text/javascript">
  div1 = document.getElementById("d1");
  alert(div1.previousSibling.nodeName);
</script>

Đón xem phần 2.

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