Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM chứa () Phương thức

Phương thức HTML DOM contains () được sử dụng để tìm xem một nút có phải là con của nút được chỉ định hay không. Một hậu duệ có thể là con ngay lập tức của nút, cháu và thậm chí là chắt. Nó trả về một boolean true cho biết nút thực sự là con của nút được chỉ định và false nếu nó không phải là con của nút đã cho.

Cú pháp

Sau đây là cú pháp cho phương thức HTML DOM chứa () -

node.contains(givenNode)

Ở đây, Mã cho sẵn là một giá trị tham số bắt buộc chỉ định xem Nút đã cho có đang được chứa bởi nút hay không.

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho phương thức HTML DOM chứa () -

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      border: 2px solid blue;
      width:160px;
   }
</style>
</head>
<body>
<div id="DIV1">
<p>I live in the <attr id="At" title="United States of America">U.S.A </attr></p>
</div>
<p>Click the below button to find out if the attr element is a descendant of div element or not</p>
<button type=”button” onclick="divDesc()">CONTAINS</button>
<p id="Sample"></p>
<script>
   function divDesc() {
      var attr = document.getElementById("At");
      var div = document.getElementById("DIV1").contains(attr);
      if(div==true)
         document.getElementById("Sample").innerHTML="Span element is the descendant of the div element."
      else
         document.getElementById("Sample").innerHTML="Span element is not the descendant of the div element."
   }
</script>
</body>
</html>

Đầu ra

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

HTML DOM chứa () Phương thức

Khi nhấp vào nút MONG MUỐN -

HTML DOM chứa () Phương thức

Trong ví dụ trên -

Chúng tôi đã tạo phần tử

với id “DIV1” có phần tử

và bên trong phần tử

là phần tử . Một đường viền được áp dụng cho “DIV1” và chiều rộng của nó đã được chỉ định bằng cách sử dụng các kiểu css -

#DIV1{
   border: 2px solid blue;
   width:160px;
}
<div id="DIV1">
<p>I live in the <attr id="At" title="United States of America">U.S.A </attr></p>
</div>

Sau đó, chúng tôi đã tạo một nút CONTAINS thực thi phương thức divDesc () khi người dùng nhấp vào -

<button type=”button” onclick="divDesc()">CONTAINS</button>

Phương thức divDesc () nhận phần tử bằng cách sử dụng phương thức getElementById () của đối tượng document và gán nó cho biến attr. Sau đó, nó sử dụng phương thức chứa của phần tử

và chuyển phần tử làm tham số cho nó.

Vì phần tử

chứa phần tử tức là phần tử là con của phần tử
nên nó trả về true. Sử dụng câu lệnh có điều kiện, chúng tôi hiển thị văn bản phù hợp bằng cách sử dụng thuộc tính innerHTML trong đoạn văn có id “Sample” -

function divDesc() {
   var attr = document.getElementById("At");
   var div = document.getElementById("DIV1").contains(attr);
   if(div==true)
      document.getElementById("Sample").innerHTML="Span element is the descendant of the div element."
   else
      document.getElementById("Sample").innerHTML="Span element is not the descendant of the div element."
}