<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div id="box" onclick="alert(1)">
<p>段落内容 1</p>
<div>
<p id="p2">段落内容 2</p>
</div>
<p>段落内容 3</p>
<p>段落内容 4</p>
</div>
<div id="demo">
</div>
<script>
function my$(id){
return document.getElementById(id)
};
var box = my$("box");
var p2 = my$("p2");
var demo = my$("demo");
//false假
//true真
//判断节点内部是否有某个后代节点，（不是父子节点，只要该元素内包含）
//id为box中是否有p2
//console.log(box.contains(p2));
//判断内部是否有子节点的方法有三种
//1.判断有没有子节点，不区分节点类型
console.log(box.hasChildNodes())
console.log(demo.hasChildNodes())
//2.判断节点内部第一个子节点是否不为空
console.log(box.firstChild !== null);
console.log(demo.firstChild !== null);
//3.判断子节点的数组对象的长度是否为0
console.log(box.childNodes.length > 0);
console.log(demo.childNodes.length > 0);
//补充子元素节点是否存在
console.log(box.children.length > 0);
console.log(demo.children.length > 0);
</script>
</body>
</html>
