HTMl文件的阶层架构访问父元素和子元素

最新推荐文章于 2024-06-22 15:04:00 发布

weixin_34242331

最新推荐文章于 2024-06-22 15:04:00 发布

阅读量147

点赞数

文章标签： javascript ViewUI

<html>
<head>
<title>访问父元素和子元素</title>
<script language="JavaScript">
function showParentTag(){
   alert(myP.parentElement.tagName);
}
function showChildsTag(){
   var strTags = "";
   for (var i=0; i<myP.children.length; i++){
      objEle = myP.children.item(i);
      strTags += objEle.tagName + " ";
   }
   alert(strTags);
}
function checkChild(){
   var objEle = document.all("myP").children.item(1);
   if (document.all("myP").contains(objEle))
      alert("myP有子元素" + objEle.tagName);
   else
      alert("myP没有子元素" + objEle.tagName);
}
</script>
</head>
<body id="myBody">
<h2 id="myH2">访问父元素和子元素</h2>
<hr>
<p id="myP">访问<b><i>HTML</i></b>文件的<b>父元素</b>和<i>子元素</i></p>
<form>
<input type="button" οnclick="showParentTag()" value="获取父元素">
<input type="button" οnclick="showChildsTag()" value="显示子元素">
<input type="button" οnclick="checkChild()" value="检查是否有子元素">
</form>
</body>
</html>