为什么 ID 与class 未定义却不报错，queryselector的用法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<style>
header{
width: 500px;
height: 200px;
margin: 50px auto;
}
.div_2{padding-top: 20px;}
.div_2 input{margin-right: 20px;}
</style>
</head>
<body>
<header>
<div class="div_1">
<input type="text" class="tex1" id="tex1" value="5">
<span class="sign" id="sign">+</span>
<input type="text" class="tex2" id="tex2" value="4">
<span>=</span>
<span id="res">9</span>
</div>
<div class="div_2">
<input type="button" value="+" class="btns" title="add" id="addition"> 
<input type="button" value="-" class="btns" title="sub" id="subtraction"> 
<input type="button" value="*" class="btns" title="mul" id="multipcation"> 
<input type="button" value="/" class="btns" title="div" id="division"> 
</div>
<script>
var btns = document.getElementsByClassName('btns');
//回调
each(btns,function(index,elem){
elem.onclick=function(){
switch (this.id) {
case 'addition' : addResult();
break;
case 'subtraction' : subResult();
break;
case 'multipcation' : mulResult();
break;
case 'division' : divResult();
break;
}
}
});
//封装 for循环
function each(array,fn){
for(var i=0;i<btns.length;i++){
fn(i,array[i]);
}
}

//更新符号
function replacSign(sympo){
sign.innerHTML=sympo;
}

//运算符
//加法
function addr(num1,num2){
return +num1 + +num2 ;
}
//减法
function subr(num1,num2){
return num1 - num2 ;
}
//乘法
function mulr(num1,num2){
return num1 * num2 ;
}
//除法
function divr(num1,num2){
return num1 / num2 ;
}
//输出结果
function Result(output){
res.innerHTML = output;
}

function addResult(){
replacSign('+');
Result(addr(tex1.value,tex2.value));
}
function subResult(){
replacSign('-');
Result(subr(tex1.value,tex2.value));
}
function mulResult(){
replacSign('*');
Result(mulr(tex1.value,tex2.value));
}
function divResult(){
replacSign('/');
Result(divr(tex1.value,tex2.value));
}

</script>

</header>
</body>
</html>

如代码，tex1，tex2，sign，res都为给其定义，为何程序正常执行？

还有就是

var div_1 = document.querySelector('#div_1');

var tex1 = div_1.querySelector('.tex1');

var tex2 = div_1.querySelector('.tex2');

var sign = div_1.querySelector('#sign')

var res = div_1.querySelector('#res');

为何这样定义明明正确，但打印台处却总是无法识别queryselector属性

qq_没有名称的昵称_0 2017-08-13

源自：JavaScript实现简易计算器 4-5 第四次修改--管理代码