好多寫(xiě)前端JS的開(kāi)發(fā)者經(jīng)常在修改代碼（不管是自己的還是別人的）的時(shí)候經(jīng)常會(huì)出現(xiàn)修改了某個(gè)元素節(jié)點(diǎn)之后接下來(lái)的代碼無(wú)法執(zhí)行屎即，或者報(bào)一些莫名其妙的錯(cuò)誤掐松，但是當(dāng)你檢查代碼的時(shí)候又會(huì)發(fā)現(xiàn)代碼邏輯或者語(yǔ)法沒(méi)有一點(diǎn)錯(cuò)誤。這就很讓人蛋疼了……
一般出現(xiàn)這樣的問(wèn)題通常都是使用選擇器的時(shí)候，如果當(dāng)選擇器指定的元素績(jī)點(diǎn)不存在，代碼執(zhí)行到這一步的時(shí)候就會(huì)停止，然后報(bào)一個(gè)錯(cuò)誤遂唧，諸如
"Uncaught TypeError: Cannot set property 'innerHTML' of null" /AJAX_TEST/selector_test.html (43)
來(lái)看下面這段代碼：
<!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>
當(dāng)我們運(yùn)行這段代碼的時(shí)候報(bào)出了一個(gè)錯(cuò)誤
"Uncaught TypeError: Cannot set property 'innerHTML' of null" /AJAX_TEST/selector_test.html (43)
這個(gè)時(shí)候我們只要根據(jù)錯(cuò)誤提示找到出錯(cuò)的地方(43)行，這個(gè)時(shí)候我們會(huì)發(fā)現(xiàn)這段代碼
document.querySelector("#div1 > div").innerHTML = "first div";
出錯(cuò)的原因就是
document.querySelector("#div1 > div")
該選擇器找不到該元素節(jié)點(diǎn)吊奢，然后我們根據(jù)選擇器找到節(jié)點(diǎn)
<div id="div1">
<!--<div class="div3"></div>-->
</div>
發(fā)現(xiàn)該元素節(jié)點(diǎn)被注釋掉了盖彭，我們將該注釋取消就OK了。
