Thuộc tính phụ huynh DOM HTML

Thuộc tính DOM parentElement trả về phần tử mẹ của phần tử được chỉ định trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

node.parentElement

Ví dụ

Hãy để chúng tôi xem một ví dụ về thuộc tính parentElement -

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
   }
   .drop-down{
      width:35%;
      border:2px solid #fff;
      font-weight:bold;
      padding:8px;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM parentElement Property Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down'>
<option>Physics</option>
<option>Maths</option>
<option>Chemistry</option>
<option>English</option>
</select>
<button onclick="showParent()" class="btn">Show parent of the option element</button>
<div class="show"></div>
<script>
   function showParent() {
      var dropDown = document.querySelector(".drop-down");
      var option=dropDown.options[dropDown.selectedIndex];
      var msg = document.querySelector(".show");
      msg.innerHTML="Parent element of option element is " + option.parentElement.nodeName + " element";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính phụ huynh DOM HTML

Nhấp vào “ Hiển thị cấp độ gốc của phần tử tùy chọn ”Để lấy phần tử mẹ của phần tử tùy chọn.

Thuộc tính phụ huynh DOM HTML