Thuộc tính HTML DOM beforeElementSibling trả về phần tử trước đó trong cùng một cấp cây của phần tử được chỉ định trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
node.previousElementSibling
Ví dụ
Hãy để chúng tôi xem một ví dụ về thuộc tính beforeElementSibling -
<!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:50%;
border:2px solid #fff;
font-weight:bold;
padding:8px;
}
ul{
list-style-type: none;
padding:0;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:50%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM previousElementSibling Property Demo</h1>
<p>Hi, My favourite subjects are:</p>
<ul>
<li>Physics</li>
<li id="chemistry">Chemistry</li>
<li>Maths</li>
<li>English</li>
</ul>
<button class="btn" onclick="showSibling()">Show Previous Sibling Of Chemistry</button>
<div class="show"></div>
<script>
function showSibling() {
var chemistry= document.querySelector("#chemistry");
document.querySelector(".show").innerHTML=chemistry.previousElementSibling.innerHTML;
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Nhấp vào nút “màu xanh lam” để lấy mục trước của mục danh sách hóa học.
