Thuộc tính parentElement trong HTML DOM

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

Cú pháp

Cú pháp như sau:

node.parentElement

Ví dụ

Dưới đây là 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>Demo thuộc tính parentElement của DOM</h1> <p>Chào bạn, hãy chọn môn học yêu thích:</p> <select class='drop-down'> <option>Vật lý</option> <option>Toán học</option> <option>Hóa học</option> <option>Tiếng Anh</option> </select> <button onclick="showParent()" class="btn">Hiển thị phần tử cha của option</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="Phần tử cha của option là " + option.parentElement.nodeName + " phần tử";    } </script> </body> </html>

Kết quả

Đoạn mã trên sẽ cho kết quả như sau:

Nhấn vào nút 「Hiển thị phần tử cha của option」 để lấy phần tử cha của phần tử option.