通过上面的讲解已经学会了如何动态给页面添加一个标签，并且也知道了如何给标签添加或修改属性。可是，我们在工作中，往往在添加之前会先确认一下节点中是否存在子节点，或元素是否存在某属性。
一、判断节点中是否存在子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
<div id="box1"></div>
<div id="box2">
</div>
</body>
<script>
var box=document.getElementById('box');
var bool=box.hasChildNodes();
console.log(bool);
var box1=document.getElementById('box1');
var bool=box1.hasChildNodes();
console.log(bool);
var box2=document.getElementById('box2');
var bool=box2.hasChildNodes();
console.log(bool);
</script>
</html>
上上面的代码中，我们分别判断了3次，第一次判断id为box的div标签是否有子节点，显示是有的，程序也返回了true，这没什么好说的
第二次，我们判断一个id为box1的空div标签，它返回flase，这也无可争议。
第三次，我们判断一个id为box2的空div标签，发现优先奇怪，它竟然返回了true。需要说明的是，在节点对象中，节点中的的空行或换行符也算是节点。
执行结果如下：
二、判断元素中是否存在某属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
<div id="box1"></div>
<div id="box2">
</div>
</body>
<script>
var box=document.getElementById('box');
var bool=box.hasAttribute('id');
console.log(bool);
var bool=box.hasAttribute('name');
console.log(bool);
</script>
</html>
在上面的代码中，我们先判断id为box的div标签是否有id属性，自然是有的，它也返回了true
然后又判断了该标签是否有name属性，它返回了false，该标签确实不存在name属性。
通过以上的实验，我们已经学会了如何判断节点下是否有子节点以及标签中是否有某属性，大家可以动手测试一下其它标签和其它属性以加深印象。
|
窥视卡
雷达卡
发表于 2023-1-25 13:01:37
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-18 06:22:15
