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

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

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

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?: 
No votes yet
Ảnh của Khanh Hoang

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

More about Khanh Hoang

Bài cùng chuyên mục

Advertisement

 

jobsora

Dich vu khu trung tphcm

Dich vu diet chuot tphcm

Dich vu diet con trung

Quảng Cáo Bài Viết

 
Tự xây dựng Wordpress - Theme: Building Your Own Theme

Tự xây dựng Wordpress - Theme: Building Your Own Theme

Wordpress theme step by step tutorial - part 1: Although thousands themes available, You may want to create your own theme. Make something different from others. You can customize from exist theme or build from zero

Hướng dẫn exposed Filters với Views 3 trong Drupal 7

Hướng dẫn exposed Filters với Views 3 trong Drupal 7

With views, it's easy to create a restricted listing of content. What's more, you can also expose those filters to the user, so they can sort and filter the content themselves. Here's an example of the type of functionality you can enable with "exposed filters":

Mô hình Onpage cân bằng lực tại sự kiện Việt Nam Digital SEO Summit 2019

Mô hình Onpage cân bằng lực tại sự kiện Việt Nam Digital SEO Summit

Tại sự kiện Việt Nam Digital SEO Summit 2019 vừa rồi, dường như “Phong” vs “Vân” đã phần nào được hé lộ, đặt nền tảng cho 1 sự thay đổi hoàn toàn mới trong tư duy và cách làm seo của các SEOer Việt

Công ty diệt chuột T&C

 

Diet con trung

Donate

Paypal donate