日度归档:2020年3月26日

html DOM 对象之children属性简介说明


摘要:
下文讲述children属性简介说明,如下所示:


children属性简介

children属性功能:
返回当前html元素的所有一级子节点(但不包含文本节点)。
children属性语法:
let childList = node.children
—–返回值说明—–
返回所有元素一级子节点(但不包含文本子节点)

children属性注意事项:
市面上流行的浏览器都可以获取此属性值


children属性举例说明

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---children所有子节点获取
</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("container");
  let oMsg=document.getElementById("messageInfo");
  let obt=document.getElementById("btn");

  obt.onclick = function () {
    oMsg.innerHTML = odiv.children.length;
  }

}
</script>
</head>
<body>
<div id="messageInfo"></div>
<div id="container">
  <div></div>
  <div></div>
</div>
<input type="button" id="btn" value="子节点查看" />
</body>
</html>


上述代码返回所有子节点为:2
等于两个div节点

html DOM 对象之childNodes属性简介说明


摘要:
下文讲述childNodes属性简介说明,如下所示:


childNodes属性简介

childNodes属性功能:
返回当前html元素的所有子节点。
childNodes属性语法:
let childList = node.childNodes
—–返回值说明—–
返回所有元素子节点

childNodes属性注意事项:
市面上流行的浏览器都可以获取此属性值


childNodes属性举例说明

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
---childNodes所有子节点获取
</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("container");
  let oMsg=document.getElementById("messageInfo");
  let obt=document.getElementById("btn");

  obt.onclick = function () {
    oMsg.innerHTML = odiv.childNodes.length;
  }

}
</script>
</head>
<body>
<div id="messageInfo"></div>
<div id="container">
  <div></div>
  <div></div>
</div>
<input type="button" id="btn" value="子节点查看" />
</body>
</html>


上述代码返回所有子节点为:5
等于两个div节点和三个文本节点

html DOM 对象之childElementCount属性简介说明


摘要:
下文讲述childElementCount属性简介说明,如下所示:


childElementCount属性简介

childElementCount属性功能:
返回当前html元素的第一级子元素的数量。
childElementCount属性语法:
let count = node.childElementCount
—–返回值说明—–
返回第一级子元素的数量
返回值是一个整数值

childElementCount属性注意事项:
1.childElementCount属性是一个只读属性,不可以修改。
2.市面上流行的浏览器都可以获取此属性值


childElementCount属性举例说明

 <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)
----childElementCount属性值获取举例
</title>
<style>
#box{
  width:200px;
  height:150px;
  background-color:gray;
}
#middle{
  width:150px;
  height:100px;
  background-color:blue;
}
#inner{
  width:140px;
  height:50px;
  background-color:red;
  text-align: center;
  line-height: 50px;
  color:white;font-weight:bold;
}
</style>
<script>
window.onload = function() {
   let obox=document.getElementById("box");
   let omiddle=document.getElementById("middle");
   let oinner=document.getElementById("inner");
   oinner.innerHTML="第一级子元素:"+obox.childElementCount;
}
</script>
</head>
<body>
<div id="box">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>
</body>
</html>
javascript DOM childElementCount属性值说明

javascript DOM childElementCount属性值说明