好多写前端JS的开发者经常在修改代码（不管是自己的还是别人的）的时候经常会出现修改了某个元素节点之后接下来的代码无法执行，或者报一些莫名其妙的错误，但是当你检查代码的时候又会发现代码逻辑或者语法没有一点错误。这就很让人蛋疼了……
一般出现这样的问题通常都是使用选择器的时候，如果当选择器指定的元素绩点不存在，代码执行到这一步的时候就会停止，然后报一个错误，诸如
"Uncaught TypeError: Cannot set property 'innerHTML' of null" /AJAX_TEST/selector_test.html (43)
来看下面这段代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
background-color: darkred;
}
#div1{
width: 100%;
height: 30%;
background-color: darkolivegreen;
}
.div2{
width: 100%;
height: 30%;
background-color: darkturquoise;
}
.div3{
width: 100%;
height: 30%;
background-color: darkturquoise;
}
</style>
</head>
<body>
<div id="div1">
<!--<div class="div3"></div>-->
</div>
<div class="div2">
</div>
<script type="text/javascript">
document.querySelector("#div1 > div").innerHTML = "first div";
alert("111111111111");
</script>
</body>
</html>
当我们运行这段代码的时候报出了一个错误
"Uncaught TypeError: Cannot set property 'innerHTML' of null" /AJAX_TEST/selector_test.html (43)
这个时候我们只要根据错误提示找到出错的地方(43)行，这个时候我们会发现这段代码
document.querySelector("#div1 > div").innerHTML = "first div";
出错的原因就是
document.querySelector("#div1 > div")
该选择器找不到该元素节点，然后我们根据选择器找到节点
<div id="div1">
<!--<div class="div3"></div>-->
</div>
发现该元素节点被注释掉了，我们将该注释取消就OK了。
网友评论