Theo những dòng mã này:

• Xác định chức năng “displayParent()” truy cập phần tử “” bằng cách tham chiếu đến lớp của nó thông qua “tài liệu.querySelector()” phương pháp.
  Các ' tùy chọn Bộ sưu tập ” lấy tập hợp tất cả các phần tử “
  ” trong danh sách thả xuống và phần “ mục lục được chọn Thuộc tính ” lấy chỉ mục của tùy chọn đã chọn cho danh sách thả xuống.
  Cuối cùng, sử dụng “tài liệu.querySelector()” lại để truy cập phần tử “

  ” và nối nó với phần tử cha của phần tử “” thông qua “ phần tử cha mẹ ' Và ' Tên nút ” (hiển thị tên của nút cha) thuộc tính.

  Toàn bộ mã

  
  < html >
  < thân hình >
  < h1 > Thuộc tính parentElement trong JavaScript < / h1 >
  < h2 > Chọn ngôn ngữ: < / h2 >
  < lựa chọn lớp học = 'yếu tố' >
  < lựa chọn > Python < / lựa chọn >
  < lựa chọn > Java < / lựa chọn >
  < lựa chọn > JavaScript < / lựa chọn >
  < / lựa chọn >
  < cái nút trong một cái nhấp chuột = 'displayParent()' lớp học = 'cái nút' > Hiển thị phần tử gốc của phần tử 'tùy chọn' < / cái nút >
  < div lớp học = 'nhiệt độ' >< / div >< / thân hình >
  < phong cách >
  thân hình{
  căn chỉnh văn bản:giữa;
  màu sắc:#fff;
  màu nền: xám;
  chiều cao:100%;
  }
  .cái nút{
  chiều cao:2rem;
  bán kính đường viền: 2px;
  chiều rộng: 35%;
  lề:2rem tự động;
  hiển thị:khối;
  màu:#ba0b0b;
  con trỏ:con trỏ;
  }
  .nhiệt độ{
  cỡ chữ: 1,5rem;
  độ dày phông chữ: đậm;
  }
  < / phong cách >
  < kịch bản >
  hàm displayParent() {
  var get = document.querySelector('.elem');
  var sel=get.options[get.selectedIndex];
  var Nối thêm = document.querySelector('.temp');
  append.innerHTML='Phần tử gốc của phần tử tùy chọn là -> ' + sel.parentElement.nodeName;
  }
  < / kịch bản >

  đầu ra
  

  Ở đây, có thể thấy rằng phần tử cha của tất cả các nút con, tức là tùy chọn được chọn từ danh sách thả xuống trong “” phần tử được trả về, tức là “ LỰA CHỌN ”.

  Ví dụ 2: Truy cập cả phần tử cha và phần tử con thông qua thuộc tính “parentElement” và “children” trong JavaScript

  Ví dụ mã sau đây truy cập cả phần tử cha và phần tử con của một phần tử cụ thể.

  Mã HTML

  < html >
  < thân hình >
  < div nhận dạng = 'cha mẹ' >
  < div nhận dạng = 'đứa trẻ' >
  < h1 >Phần tử con đầu tiên< / h1 >
  < h1 >Phần tử con thứ hai< / h1 >
  < / div >
  < / div >
  < / thân hình >
  < / html >

  Trong khối mã này, tạo hai phần tử “

  ” và hai phần tử “

  ” đề cập đến các phần tử con của phần tử “

  ” sau.

  Mã JavaScript

  < kịch bản >
  cho phép lấy = tài liệu. getElementById ( 'đứa trẻ' ) ;
  hãy để cha mẹ = lấy . phần tử cha mẹ ;
  bảng điều khiển. nhật ký ( 'Phần tử gốc ->' , cha mẹ. bên ngoàiHTML ) ;
  bảng điều khiển. nhật ký ( 'Tên nút phần tử gốc -> ' , cha mẹ. Tên nút ) ;
  hãy để trẻ em = lấy . những đứa trẻ ;
  vì ( để tôi = 0 ; Tôi < những đứa trẻ. chiều dài ; Tôi ++ ) {
  bảng điều khiển. nhật ký ( `Phần tử con $ { Tôi } : ` , những đứa trẻ [ Tôi ] . bên ngoàiHTML ) ;
  }
  vì ( để tôi = 0 ; Tôi < những đứa trẻ. chiều dài ; Tôi ++ ) {
  bảng điều khiển. nhật ký ( `Tên nút phần tử con $ { Tôi } : ` , những đứa trẻ [ Tôi ] . Tên nút ) ;
  }
  kịch bản >

  Giải thích đoạn code trên như sau:

  
  

  
  

  • Truy cập phần tử “
    ” sau bằng “id” của nó bằng cách sử dụng “tài liệu.getElementById()” phương thức và tìm nạp phần tử cha của nó thông qua “ phần tử cha mẹ ' tài sản.
  • Bây giờ, hãy hiển thị phần tử gốc với các thuộc tính cũng như thẻ bắt đầu và kết thúc thông qua “ bên ngoàiHTML ' tài sản.
  • Ngoài ra, trả về tên của phần tử cha, tức là tên nút bằng cách sử dụng “ Tên nút ' tài sản.
  • Sau đó, truy cập phần tử con bằng cách sử dụng thuộc tính “children”.
  • Áp dụng ' vì ” để lặp lại tất cả các phần tử con và trả về chúng cùng với các thẻ thông qua thuộc tính “outerHTML” đã thảo luận.
  • Tương tự, sử dụng lại vòng lặp “for” để trả về tên nút của các phần tử con.

  Toàn bộ mã

  < html >
  < thân hình >
  < div nhận dạng = 'cha mẹ' >
  < div nhận dạng = 'đứa trẻ' >
  < h1 > Phần tử con đầu tiên < / h1 >
  < h1 > Phần tử con thứ hai < / h1 >
  < / div >
  < / div >
  < / thân hình >
  < / html >
  < kịch bản >
  hãy lấy = document.getElementById('child');
  let parent = get.parentElement;
  console.log('Phần tử gốc -> ', parent.outerHTML);
  console.log('Tên nút phần tử gốc -> ', parent.nodeName);
  để trẻ em = get.children;
  for(let i = 0; i < trẻ em.chiều dài; tôi++ ) {
  console.log ( `Phần tử con $ { Tôi } : `, trẻ em [ Tôi ] .outerHTML ) ;
  }
  vì ( để tôi = 0 ; i < trẻ em.length; tôi++ ) {
  console.log ( `Nút phần tử con Tên $ { Tôi } : `, trẻ em [ Tôi ] .Tên nút ) ;
  }
  < / kịch bản >

  đầu ra
  

  Kết quả này ngụ ý rằng các phần tử cha và phần tử con của phần tử đích được hiển thị chi tiết (cùng với tên nút) tương ứng.

  Ví dụ 3: Truy cập phần tử gốc bằng thuộc tính “parentNode”

  Trong phần trình diễn này, phần tử cha của một phần tử cụ thể có thể được gọi và sau đó phần tử cha của phần tử cụ thể này cũng sẽ được tìm nạp, do đó dẫn đến hành vi lồng nhau. Điều này có thể đạt được thông qua “ nút gốc ” thay vào đó, thuộc tính này sẽ tìm nạp nút cha của phần tử.

  Mã HTML

  < html >
  < thân hình >
  < div nhận dạng = 'cha mẹ' >
  < ôi nhận dạng = 'nhiệt độ' >
  < cái đó nhận dạng = 'đứa trẻ tạm thời' >Trăn< / cái đó >
  < cái đó >Java< / cái đó >
  < cái đó >JavaScript< / cái đó >
  < / ôi >
  < / div > < / thân hình >
  < / html >

  Tại đây, hãy tạo phần tử “

  ” bao gồm thêm các phần tử “

  (ordered list)” và “
  1. (list items)” có id nhất định.

     Mã JavaScript

     < kịch bản >
     cho phép lấy = tài liệu. getElementById ( 'đứa trẻ tạm thời' ) ;
     hãy để cha mẹ = lấy . nút gốc ;
     bảng điều khiển. nhật ký ( 'Nút phần tử gốc của 'li'-> ' , cha mẹ ) ;
     hãy lấy2 = tài liệu. getElementById ( 'nhiệt độ' ) ;
     hãy để cha mẹ2 = lấy2. nút gốc ;
     bảng điều khiển. nhật ký ( 'Nút phần tử gốc của 'ol'-> ' , cha mẹ2 ) ;
     kịch bản >

     Dựa trên đoạn mã này, hãy thực hiện các bước được cung cấp bên dưới:

     • Gọi phần tử “
     • ” thông qua “ getElementById() ”, truy cập vào nút của phần tử cha bằng cách sử dụng “ nút gốc ” thuộc tính và hiển thị nút cha.
     • Tương tự như vậy, bây giờ gọi nút cha được hiển thị, tức là nút cha “
       ” bằng cách lặp lại phương pháp tương tự.

     Toàn bộ mã

     < html >
     < thân hình >
     < div nhận dạng = 'cha mẹ' >
     < ôi nhận dạng = 'nhiệt độ' >
     < cái đó nhận dạng = 'đứa trẻ tạm thời' > Python < / cái đó >
     < cái đó > Java < / cái đó >
     < cái đó > JavaScript < / cái đó >
     < / ôi >
     < / div >
     < kịch bản >
     hãy lấy = document.getElementById('tempchild');
     hãy để parent = get.parentNode;
     console.log('Nút phần tử gốc của 'li'-> ', parent);
     hãy get2 = document.getElementById('temp');
     hãy để parent2 = get2.parentNode;
     console.log('Nút phần tử gốc của 'ol'-> ', parent2);
     < / kịch bản >
     < / thân hình >
     < / html >

     đầu ra
     

     Kết quả này biểu thị rằng các nút cha trong cả hai trường hợp đều được hiển thị tương ứng.

     Phần kết luận

     Phần tử cha có thể được truy cập bằng cách sử dụng HTML DOM “ phần tử cha mẹ ” thuộc tính kết hợp với “ Tên nút ” hoặc truy xuất nút cha thông qua thuộc tính “parentNode”. Tuy nhiên, để truy cập phần tử con thay vào đó, hãy sử dụng “ đứa trẻ ' tài sản.

     Khác

  Thể LoạI

  • Raspberry Pi
  • Ethernet
  • Khác
  • Nano
  • Phóng
  • Quế
  • Đánh Giá
  • Zorinos
  • Đài
  • Minecraft
  • Ssh
  • Openvas
  • Nén
  • Laravel
  • Máy Bay
  • Phần Mềm Năng Suất Văn Phòng
  • Khởi Động
  • Cuộc Gọi Hệ Thống
  • Sysctl
  • Mạng Lưới
  • Gpu
  • Gimp
  • Plex
  • Uefi
  • Người Đóng Tàu
  • Bức Tường Lửa
  • Wirehark
  • Synology
  • Pdf
  • Ethereum
  • Hệ Điều Hành Parrot
  • Cao Siêu
  • Selinux
  • Siêu V
  • Điện Thoại
  • Mã Số
  • Gnome
  • Tinh Vi
  • Chuột
  • Nmap
  • Metasploit
  • Torrent
  • Viên Thuốc
  • Pycharm
  • Xoăn
  • Ở Đâu
  • Gcc
  • Phông Chữ
  • Ssl
  • Nvidia
  • Hình Ảnh
  • Usb
  • Mực Ống
  • Bạn
  • Vlc Media Player
  • Dns
  • Bitcoin
  • Bàn Phím
  • Inkscape
  • Mã Hóa
  • Mũ Phớt
  • Owncloud
  • Máy Quét
  • Nguyên Tử
  • Mũ Đỏ
  • Teamviewer
  • Ứng Dụng Trò Chuyện
  • Vpn
  • Xfce
  • Máy Tính Xách Tay Jupyter
  • Nfs
  • Blog
  • Lvm
  • Suse
  • Trình Phát Phương Tiện
  • Posix
  • Hơi Nước
  • Jenkins
  • Sức Mạnh
  • Oracle Linux
  • Netstat
  • Sqm
  • Bluetooth
  • Ssd
  • Nắm Chặt
  • Gentoo
  • Odyssey
  • Âm Thanh
  • Cpu
  • Dòng Chảy Căng Thẳng
  • Autodesk
  • Lubuntu
  • Llvm
  • Các Cửa Sổ
  • Microsoft Edge (Kế Thừa)
  • Trình Duyệt Web Ie
  • Văn Phòng
  • Khác
  • Ứng dụng trò chuyện
  • webcam
  • trình phát phương tiện
  • cPanel
  • haproxy
  • thần lùn
  • khởi động
  • siêu phàm
  • Hướng Dẫn Loại Bỏ
  • Ubuntu 24.04
  • đám mây tiếp theo
  • Đức hạnh
  • thông qua usb
  • mũ phớt
  • #khởi động an toàn
  • thông qua thiết bị
  • SDN
  • Cài đặt trình điều khiển

  Bài ViếT Phổ BiếN

  Thanh tiến trình Tkinter

  Khác

  Cách thiết lập cấu hình máy chủ tùy chỉnh trong Discord Nitro

  Khác

  10 lựa chọn thay thế Raspberry Pi giá rẻ (cập nhật 2022)

  Raspberry Pi

  Kích hoạt Mở phiên tự động trong Windows

  Khác

  Tùy chọn “–net=host” trong Lệnh Docker thực sự làm gì?

  Khác

  Làm cách nào để sử dụng lệnh 'mô tả mạng con' trong AWS CLI?

  Khác

  Cách sử dụng các biến trong PowerShell

  Khác

  Chuyển đổi Excel sang Google Trang tính

  Khác

  Mệnh đề SQL VỚI

  Khác

  SQL Server Tạo từ đồng nghĩa

  Khác

  Thêm kiểu cơ sở trong Tailwind

  Khác

  Sao chép tệp hàng loạt: Hướng dẫn sao chép tệp bằng tập lệnh hàng loạt

  Khác

  Cách gỡ cài đặt VirtualBox 7

  Khác

  Làm cách nào để sử dụng Cmdlet Copy-ItemProperty để sao chép thuộc tính của một mục trong PowerShell?

  Khác

  Làm cách nào để sử dụng lệnh ghép ngắn Find-Command (PowerShellGet) trong PowerShell?

  Khác

  Làm cách nào để quản lý Elaticsearch trên AWS EC2?

  Khác

  Cách sử dụng Lệnh env trong Linux – Ví dụ

  Khác

  Cách tạm dừng tập lệnh PowerShell

  Khác

  Cách thêm và sử dụng nhãn dán trên Discord

  Khác

  Lệnh Slash trong Discord là gì

  Khác