如何检查元素在JavaScript中是否有任何子代?

2021年3月11日17:06:32 发表评论 777 次浏览

该任务借助JavaScript查找一个元素是否具有子元素。我们将讨论几种技术。

方法:

  • 选择父元素。
  • 使用其中之一firstChild, childNodes.length, children.length属性, 以查找element是否具有子元素
  • hasChildNodes()方法也可以用于查找父节点的子节点。

范例1:在这个例子中hasChildNodes()方法用于确定<div>元件。

<!DOCTYPE HTML>
< html >
  
< head >
     < title >
         How to check if element has
         any children in JavaScript ?
     </ title >
</ head >
  
< body style = "text-align:center;" >
      
     < h1 style = "color:green;" > 
         lsbin
     </ h1 >
      
     < div id = "div" >
         < p id = "GFG_UP" style =
             "font-size: 19px; font-weight: bold;" >
         </ p >
     </ div >
      
     < button onclick = "GFG_Fun()" >
         click here
     </ button >
      
     < p id = "GFG_DOWN" style =
         "color:green; font-size:24px; font-weight:bold;" >
     </ p >
      
     < script >
         var parentDiv = document.getElementById("div");
         var el_up = document.getElementById("GFG_UP");
         var el_down = document.getElementById("GFG_DOWN");
          
         el_up.innerHTML = "Click on the button to check "
                     + "whether element has children.";
  
         function GFG_Fun() {
             var ans = "Element < div > has no children";
              
             if (parentDiv.hasChildNodes()) {
                 ans = "Element < div > has children";
             }
              
             el_down.innerHTML = ans;
         }
     </ script >
</ body >
  
</ html >

输出如下:

在单击按钮之前:

如何检查元素在JavaScript中是否有任何子代?1

单击按钮后:

如何检查元素在JavaScript中是否有任何子代?2

范例2:在这个例子中children.length属性用于确定<div>元件。

<!DOCTYPE HTML>
< html >
  
< head >
     < title >
         How to check if element has
         any children in JavaScript ?
     </ title >
</ head >
  
< body style = "text-align:center;" >
      
     < h1 style = "color:green;" > 
         lsbin
     </ h1 >
      
     < div id = "div" >
         < p id = "GFG_UP" style =
             "font-size: 19px; font-weight: bold;" >
         </ p >
     </ div >
      
     < button onclick = "GFG_Fun()" >
         click here
     </ button >
      
     < p id = "GFG_DOWN" style =
         "color:green; font-size:24px; font-weight:bold;" >
     </ p >
      
     < script >
         var parentDiv = document.getElementById("div");
         var el_up = document.getElementById("GFG_UP");
         var el_down = document.getElementById("GFG_DOWN");
          
         el_up.innerHTML = "Click on the button to "+
                 "check whether element has children.";
  
         function GFG_Fun() {
             var ans = "Element < div > has no children";
              
             if (parentDiv.children.length > 0) {
                 ans = "Element < div > has children";
             }
              
             el_down.innerHTML = ans;
         }
     </ script >
</ body >
  
</ html >

输出如下:

在单击按钮之前:

如何检查元素在JavaScript中是否有任何子代?3

单击按钮后:

如何检查元素在JavaScript中是否有任何子代?4

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: