Nút là một phần của cây DOM được sử dụng để truy cập vào mọi thành phần của trang web. Node cung cấp nhiều phương thức và thuộc tính.

Bạn đang xem : javascript nút là gì

Nút trong Javascript là gì?

< / p>

Trong hướng dẫn này, bạn sẽ tìm hiểu về các nút javascript, các loại nút trong javascript, cây nút và hiểu biết sơ lược về DOM (Mô hình đối tượng tài liệu).

Bạn đã bao giờ nghĩ về cách một ngôn ngữ kịch bản như javascript tương tác với các thành phần của tài liệu HTML chưa?

Tóm lại, điều này được thực hiện bằng cách tạo một cây các nút từ tài liệu HTML .

Nút trong javascript

Nút là một phần của cây DOM được sử dụng để truy cập vào mọi thành phần của trang web.

Cây DOM là một cây gồm các nút được tạo bởi trình duyệt khi trang được tải. Cây là một đại diện của tài liệu HTML. Tất cả các phần của cây này như phần đầu, phần thân, một thẻ HTML khác, văn bản, thuộc tính, v.v. được gọi là nút .

Khi bạn xem tài liệu HTML từ chế độ xem javascript thì mọi thứ trong tài liệu HTML là một nút. Cho dù đó là phần tử HTML, thuộc tính, văn bản, tài liệu hay thậm chí là nhận xét, tất cả đều là các nút trong javascript.

Để có hình minh họa, hãy xem hình bên dưới thể hiện một tài liệu HTML dưới dạng một cây các nút.

Cấu trúc nút trong DOM

Trong hình trên, bạn có thể thấy rằng ở cuối mỗi nhánh đều có một nút, có thể là nút phần tử hoặc nút văn bản. Nhưng ngay cả những thứ khác như nhận xét, thuộc tính, CDATA, v.v. đều thuộc danh mục nút.

Mỗi nút là một đối tượng có nhiều phương thức và thuộc tính, thông thường các nút còn được gọi là đối tượng nút .

Lưu ý: Mọi phần tử HTML là một nút trong javascript nhưng mọi nút không phải là một phần tử HTML.

Các loại nút trong javascript

Có nhiều loại nút khác nhau trong javascript. Sử dụng javascript, bạn có thể nhận được tên nút và loại nút của bất kỳ nút nào:

  1. nodeName

    – Thuộc tính nodeName trả về tên của các loại nút.

  2. nodeType

    – Thuộc tính nodeType trả về một giá trị số nguyên trong đó các số nguyên này cho biết loại nút.

Bảng dưới đây hiển thị các loại nút với mô tả và giá trị được trả về bởi thuộc tính nodeType.

Loại Mô tả Giá trị Nút phần tử Ví dụ về các nút phần tử là

& lt; p & gt;

,

& lt; img & gt;

,

& lt; div & gt;

, v.v … 1 Nút thuộc tính Tất cả các thuộc tính của một phần tử đều là nút thuộc tính. Ví dụ

class

,

title

,

style

, v.v. 2 Nút văn bản Văn bản thực tế bên trong một phần tử được gọi là nút văn bản. Ví dụ & lt; p & gt; Đây là nút văn bản. & Lt; / p & gt; 3 CDATA Nút phần Ví dụ về CDATA là & lt;! [CDATA [...]] & gt; 4 Nút bình luận Tất cả các bình luận HTML đều là nút bình luận. Ví dụ & lt; - Đây là một chú thích HTML - & gt; 8 Nút tài liệu Bản thân tài liệu là một nút. Ví dụ

document

9 Nút loại tài liệu Loại tài liệu được xác định ở đầu tài liệu được gọi là nút loại tài liệu. Ví dụ & lt;! DOCTYPE html & gt; 10

hãy xem ví dụ về cách sử dụng thuộc tính được đề cập ở trên.

Ví dụ

 & lt; p id = "para" & gt; Đây là một đoạn văn. & lt; / p & gt;

& lt; script & gt;
  // chọn nút
  let p = document.getElementById ("para");
  // lấy tên nút và loại nút
  console.log (p.nodeName, p.nodeType); // P, 1
  // lấy tên nút và kiểu nút của nút con
  console.log (p.firstChild.nodeName, p.firstChild.nodeType); // #text, 3
  // lấy tên nút và loại nút của anh em kế tiếp
  console.log (p.nextElementSibling.nodeName, p.nextElementSibling.nodeType); // SCRIPT, 1
& lt; / script & gt;  

▶ Hãy thử

Sử dụng các nút

Nút là khối xây dựng cơ bản của DOM. Nó chia toàn bộ tài liệu HTML dưới dạng một cây các nút, tạo cho ngôn ngữ kịch bản một cách để phân tích cú pháp tài liệu.

Bạn có thể chọn bất kỳ nút nào trong tài liệu HTML bằng javascript. Nó cung cấp cho bạn quyền truy cập và kiểm soát từng thành phần của trang web.

Nút so với Phần tử

Đừng nhầm lẫn một nút với một phần tử.

Một nút là tên chung cho các đối tượng trong tài liệu, trong khi một phần tử chỉ là một loại nút trong số nhiều nút như nút văn bản, nút nhận xét.

Một nút phần tử có nodeType = 1.

Trong ngắn hạn, một phần tử là một loại nút. Vì vậy, tất cả các phần tử đều là nút nhưng không phải tất cả các nút đều là phần tử.

Nút lấy Javascript

Sử dụng các nút, bạn có thể lấy bất kỳ phần tử nào từ tài liệu. Có một số phương thức javascript được sử dụng trên các đối tượng tài liệu để lấy một nút từ tài liệu.

  1. getElementById () (lấy nút phần tử bằng cách sử dụng id của nó)
  2. querySelector () (nhận hầu hết các loại nút bằng cách sử dụng bộ chọn CSS)
  3. getAttributeNode ()

    (lấy nút thuộc tính)

Ví dụ: lấy nút phần tử theo ID

  let element = document.getElementById ("id1");  

Ví dụ: lấy các nút bằng bộ chọn CSS

  let node = document.querySelector (". box");  

Ví dụ: lấy nút phần tử theo ID

  let parentNode = document.getElementById ("id1");
let thuộc tínhNode = parentNode.getAttributeNode ("lớp");  

 Ezoic

báo cáo quảng cáo này

Kết luận

Một nút trong javascript có một định nghĩa rộng, mọi thứ trong tài liệu HTML đều có thể được xem như một nút. Phần tử dưới dạng nút phần tử, văn bản dưới dạng nút văn bản, nhận xét dưới dạng nút nhận xét, v.v. Các nút này là đối tượng cung cấp cho người dùng quyền truy cập để đưa các nút khác thông qua nó. Nút toàn cục được sử dụng để truy cập tất cả các nút khác trong nút tài liệu.

Nút tài liệu là nút gốc của tài liệu. Nó có nodeType = 9 và nodeName = #document.


Xem thêm những thông tin liên quan đến chủ đề javascript nút là gì

Bạn đã hiểu rõ ++ trong Javascript?

alt

  • Tác giả: Minh Techie
  • Ngày đăng: 2022-05-31
  • Đánh giá: 4 ⭐ ( 4184 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Github: https://github.com/juniorforlife/react-native-animations
    Facebook: https://www.facebook.com/groups/minhtechie

    ☕️ Support me: https://www.buymeacoffee.com/minhtechiejs

Bài 6: DOM – Xử lý các phần tử HTML trong Javascript

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 5203 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này, chúng ta sẽ tìm hiểu một phần rất quan trọng là DOM - xử lý các phần tử HTML trong Javascript. Qua bài học này, chúng ta sẽ biết các truy xuất, lấy dữ liệu, các thuộc tính từ các thẻ html, cũng như cách thêm, xóa các thẻ html.

Sử dụng thẻ input, button và textarea

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 4847 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thẻ input được sử dụng để tạo các trường giúp người dùng nhập thông tin vào. Có nhiều loại input khác nhau, trong đó phổ biến là:

[JavaScript] Bài 1 - JavaScript Là Cái Gì?

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9216 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cùng với HTML và CSS, JavaScript là 1 trong số bộ 3 ngôn ngữ khởi đầu cho bất kỳ ai muốn học lập trình web. Nếu như HTML cho phép chúng ta cấu trúc nội dung của trang web, CSS cho phép chúng ta thiết...

Khóa học Javascript cơ bản Lập trình không khó

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 5 ⭐ ( 4723 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Javascript là gì ? Mình sẽ hướng dẫn cho các bạn học Javascript từ "zero" đến "hero". Có nghĩa là  bạn không cần biết một ngôn ngữ lập trình nào

Các nút JavaScript, Lightning và bạn (Phần 1)

  • Tác giả: helpex.vn
  • Đánh giá: 5 ⭐ ( 9811 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chúng tôi biết bạn yêu thích các nút JavaScript và đã sử dụng chúng trong Salesforce Classic trong nhiều năm. Thực tế, chúng tôi đã nghe nói rằng nhiều khách hàng không muốn chuyển sang Trải…

Cách tắt một nút bằng JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 8678 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Cách thêm hình nền bằng CSS - thêm hình nền vào trang web

By ads_php