Nút cha JavaScript – cha mẹ trong javascript là gì

Hướng dẫn về JavaScript Parent Node. Ở đây chúng ta cũng thảo luận về cách nút cha được thực hiện trong javascript? cùng với Ví dụ và triển khai mã của nó.

Bạn đang xem : nút mẹ trong javascript

JavaScript Parent Node

Giới thiệu về JavaScript Parent Node

Nút cha là một trong những thuộc tính javascript, nó được sử dụng để trả về nút cha của nút cụ thể như được xác định trong nút đối tượng bất cứ khi nào chúng tôi sử dụng trang web html làm giao diện người dùng để bản thân tài liệu html mà chúng tôi có thể xác định các nút cha của các phần tử html, phần đầu và phần thân là một số nút con của mọi phần tử html cũng thuộc tính của các phần tử chỉ là quyền truy cập chỉ đọc vì vậy chúng tôi không thể chỉnh sửa các nút bất cứ điều gì chúng tôi cho rằng các tính năng tùy chỉnh không được chấp nhận trong loại thuộc tính parentNode.

Cú pháp và tham số

Trong các nút cha và nút con nói chung, mối quan hệ sẽ được gọi là khái niệm kế thừa. Vì vậy, mỗi nút chứa các phương thức và thuộc tính riêng của chúng phải chung cho tất cả các đối tượng nút ở cả nút cha và nút con.

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

& lt; html & gt;
& lt; body & gt;
& lt; div & gt;
& lt; p id = ”first’ & gt;
Một số câu
& lt; / p & gt;
& lt; / div & gt;
& lt; p id = ”second” & gt;
& lt; / p & gt;
& lt; nút onclick = ”function ()” & gt; & lt; / button & gt;
& lt; script & gt;
function function ()
{
var v = document.getElementById (“first”). parentNode.nodeName;
document.getElementById (“thứ hai”). innerHTML = v;
--- một số logic javascript ---
}
& lt; / script & gt; & lt; / body & gt; & lt; / html & gt;

Các mã trên là cú pháp cơ bản cho các mối quan hệ nút cha và nút con cho cả hàm html và javascript. Bất cứ khi nào chúng tôi sử dụng mã html, các nút mẹ và con được chỉ định với sự trợ giúp của thẻ & lt; div & gt;, đó là ví dụ tốt nhất cho các nút mẹ và con.

Parent Node được thực hiện như thế nào trong Javascript?

Nói chung, javascript chứa rất nhiều thuộc tính và phương thức cho các trang web được chỉ định một cách nhanh chóng an toàn và hiệu quả hơn. Tương tự như vậy, các nút cha và con là các thuộc tính phải quay trở lại nút cha của các nút được chỉ định. Đối với nút được chỉ định nếu giả sử nó đã được gán các giá trị là null hoặc nếu nút hiện tại không có phần tử cha thì cũng thuộc tính chỉ đọc. .children, ParentNode.firstElementChild, ParentNode.lastElementChild đây là tất cả các thuộc tính chỉ đọc của các phần tử dom trong html và script. đó là nút tài liệu hoặc nút DocumentFragment mặc dù chúng tôi đã sử dụng các nút này trong tất cả các nút con ở bất kỳ nơi nào cần thiết trong ứng dụng.

Các nút phân đoạn tài liệu và tài liệu không có nút cha, do đó, cả nút cha sẽ luôn là giá trị null. Nếu giả sử chúng ta đã tạo các nút mới nhưng nó không được đính kèm với cây DOM, do đó, Mã cha của nút đó cũng sẽ là null. Thuộc tính DOM parentElement chủ yếu được sử dụng để trả về phần tử cha của các phần tử con cụ thể, điều quan trọng đối với cả thuộc tính parentNode và parentElement tương tự như một và đôi khi sự khác biệt là thuộc tính parentElement sẽ luôn trả về giá trị null nếu không phải là nút cha. một yếu tố mà trường hợp này không thể thực hiện được trong các ứng dụng.

Xem Thêm  Danh sách Python .append () - Cách thêm một mục vào danh sách bằng Python - thêm mục vào danh sách

Dom được sử dụng để cho phép bất kỳ loại phần tử nào và nội dung riêng của chúng nhưng chúng tôi phải quyết định các đối tượng DOM tương ứng và các hoạt động được phép trên DOM bắt đầu với đối tượng tài liệu. Vì vậy, nó là một trong những điểm vào chính của DOM theo quan điểm này, nó có thể được truy cập bằng bất kỳ loại nút nào. Trong trường hợp nút con hoặc nút con, các phần tử đang được hướng đến trỏ con vì các khái niệm lồng nhau phải được tuân theo chính xác trong trường hợp phần tử nút mẹ đã cho như & lt; html & gt;, & lt; head & gt; & lt; body & gt; các thẻ. Trong Con cháu, tất cả các phần tử html được lồng vào phần tử thực sự đã cho bao gồm các nút con là nút con của chúng và cả nó, v.v. Trong con cháu, tất cả các phần tử của & lt; body & gt; thẻ không chỉ trỏ con trực tiếp & lt; div & gt;, & lt; ul & gt;, & lt; ol & gt; đây là danh sách một số phần tử lồng nhau cơ bản trong html bao gồm & lt; li & gt; các phần tử thẻ.

Ví dụ về JavaScript Parent Node

Dưới đây là các ví dụ được đưa ra dưới đây:

Ví dụ # 1

Mã:

& lt;! DOCTYPEhtml & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt;
Ví dụ đầu tiên
& lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1style = "color: green;" & gt;
Chào mừng đến với miền của tôi
& lt; / h1 & gt;
& lt; h2 & gt; Ví dụ forDOM parentElement Thuộc tính & lt; / h2 & gt;
& lt; oltype = "mẫu" & gt;
& lt; liid = "ví dụ" & gt; AB & lt; / li & gt;
& lt; li & gt; CD & lt; / li & gt;
& lt; li & gt; EF & lt; / li & gt;
& lt; li & gt; GH & lt; / li & gt;
& lt; li & gt; IJ & lt; / li & gt;
& lt; li & gt; KL & lt; / li & gt;
& lt; li & gt; MN & lt; / li & gt;
& lt; li & gt; OP & lt; / li & gt;
& lt; li & gt; QR & lt; / li & gt;
& lt; li & gt; ST & lt; / li & gt;
& lt; li & gt; UV & lt; / li & gt;
& lt; li & gt; WX & lt; / li & gt;
& lt; li & gt; YZ & lt; / li & gt;
& lt; li & gt; GH & lt; / li & gt;
& lt; / ol & gt;
& lt; môngnonclick = "demo ()" & gt;
Nhấp vào
& lt; / nút & gt;
& lt; pid = "thứ hai" & gt;
Xin chào Người dùng chúc một ngày tốt lành
& lt; / p & gt;
& lt; script & gt;
demo hàm () {
var v =
document.getElementById ("ví dụ"). parentElement.nodeName;
document.getElementById ("thứ hai"). innerHTML = v;
}
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Ví dụ # 2

Mã:

& lt;! DOCTYPEhtml & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt;
Ví dụ thứ hai
& lt; / title & gt;
& lt; phong cách & gt;
.first & gt; div {
src: url ('WWW.facebook.com');
font-family: 'MutatorSans';
font-style: normal;
font-mịn: 6em;
}
div.second {
font-Smooth: auto;
font-Smooth: không bao giờ;
font-Smooth: luôn luôn;
}
div.third {
font-weight: inherit;
text-biến đổi: chữ hoa;
phông chữ: 1.5rem 'MutatorSans', sans-serif;
font-mịn: 2em;
}
div.four {
phông chữ: 80% sans-serif;
font-mịn: 3em;
}
div.five {
background-color: màu hồng;
phông chữ: 13px / 11px sans-serif;
font-mịn: 5em;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; divclass = "năm" & gt;
& lt; h1style = "color: green;" & gt;
Chào mừng đến với miền của tôi
& lt; / h1 & gt;
& lt; h2 & gt; Ví dụ cho Thuộc tính cha mẹ DOM & lt; / h2 & gt;
& lt; divclass = "thứ ba" & gt;
& lt; oltype = "mẫu" & gt;
& lt; liid = "ví dụ" & gt; AB & lt; / li & gt;
& lt; li & gt; CD & lt; / li & gt;
& lt; li & gt; EF & lt; / li & gt;
& lt; li & gt; GH & lt; / li & gt;
& lt; li & gt; IJ & lt; / li & gt;
& lt; li & gt; KL & lt; / li & gt;
& lt; li & gt; MN & lt; / li & gt;
& lt; li & gt; OP & lt; / li & gt;
& lt; li & gt; QR & lt; / li & gt;
& lt; li & gt; ST & lt; / li & gt;
& lt; li & gt; UV & lt; / li & gt;
& lt; li & gt; WX & lt; / li & gt;
& lt; li & gt; YZ & lt; / li & gt;
& lt; li & gt; GH & lt; / li & gt;
& lt; / ol & gt;
& lt; / div & gt;
& lt; môngnonclick = "demo ()" & gt;
Nhấp vào
& lt; / nút & gt;
& lt; pid = "thứ hai" & gt;
Xin chào Người dùng chúc một ngày tốt lành
& lt; / p & gt;
& lt; script & gt;
demo hàm () {
var v =
document.getElementById ("ví dụ"). parentElement.nodeName;
document.getElementById ("thứ hai"). innerHTML = v;
}
& lt; / script & gt;
& lt; / div & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Xem Thêm  Sự khác biệt giữa kết nối bên trái và kết hợp bên ngoài bên trái trong SQL - Tất cả sự khác biệt - mysql left tham gia vs left bên ngoài tham gia

Ví dụ # 3

Mã:

& lt;! DOCTYPEhtml & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt;
Chào mừng đến với DOmain của tôi
& lt; / title & gt;
& lt; phong cách & gt;
div {
đệm: 17px;
chiều rộng: 73%;
background-color: red;
màu: hồng;
bán kính đường viền: 32px;
}
.second {
float: left;
font-size: 32px;
font-weight: bold;
con trỏ: con trỏ;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; center & gt;
& lt; h2 & gt; Xin chào Người dùng chúc một ngày tốt lành & lt; / h2 & gt;
& lt; div & gt;
& lt; spanclass = "giây"
onclick = "this.parentElement.style.display
= 'không có'; "& gt;
x
& lt; / span & gt;
& lt; pstyle = "font-size: 33px;" & gt; Một lần nữa Chào mừng Người dùng Vui lòng đưa ra phản hồi của bạn trong cột & lt; / p & gt;
& lt; / div & gt;
& lt; / center & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Trong ba ví dụ trên, chúng tôi sử dụng các khái niệm giống như parentNode và parentElement trong các ứng dụng. Bất kể lôgic nào chúng tôi đã thử trong mã nhưng khi chúng tôi gọi nó dưới dạng parentElement.nodeName, nó sẽ gọi cha mẹ của các phần tử thẻ.

Kết luận

Khái niệm Kế thừa được sử dụng cho tất cả các loại ngôn ngữ lập trình được sử dụng nhiều nhất cho các mối quan hệ cha-con trong các ứng dụng web và độc lập. Một lần nữa, các ứng dụng dựa trên web có lẽ các ngôn ngữ javascript Mã nguồn gốc chủ yếu được bao hàm trong hiệu suất và Luồng ứng dụng để hiểu người dùng web.

Các bài báo được đề xuất

Đây là hướng dẫn về JavaScript Parent Node. Ở đây chúng ta cũng thảo luận về phần giới thiệu và nút cha được thực hiện như thế nào trong javascript? cùng với một ví dụ khác và triển khai mã của nó. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Xem Thêm  Học HTML và CSS - học html và css trực tuyến miễn phí

0

Chia sẻ

Chia sẻ


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

The ‘window.parent’ property | JavaScript DOM Tutorial

alt

  • Tác giả: dcode
  • Ngày đăng: 2018-05-16
  • Đánh giá: 4 ⭐ ( 6429 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: By using the window.parent property in JavaScript you are able to access the Window object associated with the parent (or containing) HTML page. This property will give you a Window object.

    You will commonly see this property be used with IFrames’ as a way for the embedded HTML page (or script) to access methods, properties or data from its parent HTML page. This can be used to make a generic IFrame structure that is able to load different data dynamically depending on the content provided by its parent. This is quite useful for web applications.

    In this video I go over a simple example of how this works with an IFrame and how we are able to embed some text from a parent HTML page into a paragraph tag of the child, embedded IFrame HTML page.

    For more info, check this out:
    https://developer.mozilla.org/en-US/docs/Web/API/Window/parent

    Follow me on Twitter @dcode!

    If this video helped you out and you’d like to see more, make sure to leave a like and subscribe to dcode!

Hiểu về promises trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 9284 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mở đầu Javascript là một ngôn ngữ lập trình đơn luồng, có nghĩa là chỉ có thể có một điều có thế xảy ra tại một không đồng bộ (asynchronous) ví dụ như netword request. Sử dụng Promise chúng ta có…

Tìm phần tử con của javascript thuần

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 3228 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Các childrentài sản trả về một mảng của các yếu tố, như vậy: parent = document.querySelector(‘.parent’);…

Cách dùng parentNode trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 6406 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dung thuộc tính parentNode trong javascript, parentNode javascript là thuộc tính dùng để lấy thẻ html parent của một thẻ html được chỉ định

Điều hướng DOM trong JavaScript

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 8796 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn tự học JavaScript này, bạn sẽ học cách điều hướng giữa các DOM node trong JavaScript.

parentElement trong JavaScript và cách lấy các Element cha

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 4 ⭐ ( 2451 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách sử dụng parentElement trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính parentElement để lấy Element cha trực tiếp của một Node chỉ định sau bài học này.

Javascript là gì? Những điều cơ bản nhất về Javascript

  • Tác giả: arena.fpt.edu.vn
  • Đánh giá: 5 ⭐ ( 8376 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nếu bạn chưa biết thì Javascript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Hãy cùng FPT Arena tìm hiểu chi tiết về Javascript nhé

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