剑指前端（前端入门笔记系列）——DOM（元素节点）

<div id="box">div_id_1</div>
<div id="box">div_id_2</div>
<div id="char">div_id_2</div>
 
<div class="cont">div_class_1</div>
<div class="cont">dic_class_2</div>
<div class="pre">dic_class_2</div>
 
<span>span1</span>
<span>span2</span>
 
<input type="text" name="user" id="user2" value="user2" />
<input type="text" name="user" id="user1" value="user1" />
<input type="text" name="pass" id="user" value="pass" />
<script type="text/javascript">
    //id:返回的是单个元素，就算有多个，获取的也只是一个
    var obox = document.getelementbyid("box");
    console.log("id选择结果：" , obox);
    console.log("直接获取结果的网页内容" , obox.innerhtml);
    console.log("第一个" , obox[0]);
    console.log("第一个的网页内容obox[0].innerhtml会报错");
    console.log("-------------------------------------------");
 
    //class:返回的是数组，就算只有一个，获取的也是数组
    var acont = document.getelementsbyclassname("cont");
    console.log("class选择结果："  , acont);
    console.log("直接获取结果的网页内容" , acont.innerhtml);
    console.log("第一个" , acont[0]);
    console.log("第一个的网页内容" , acont[0].innerhtml);
    console.log("-------------------------------------------");
 
    //tag:返回的是数组，就算只有一个，获取的也是数组
    var aspan = document.getelementsbytagname("span");
    console.log("tag选择结果" , aspan);
    console.log("直接获取结果的网页内容" , aspan.innerhtml);
    console.log("第一个" , aspan[0]);
    console.log("第一个的网页内容" , aspan[0].innerhtml);
    console.log("-------------------------------------------");
 
    //name:返回的是数组，就算只有一个，获取的也是数组，
    var auser = document.getelementsbyname("user");
    console.log("name选择结果" , auser);
    console.log("直接获取结果的网页内容" , auser.innerhtml);
    console.log("第一个" , auser[0]);
    console.log("第一个的网页内容" , auser[0].innerhtml);
 
</script>

<ul>
    <li>1</li>
    <li class="two">2</li>
    <li>3</li>
    <li>4</li>
</ul>
 
<div id="msg">
    <h2>msg_h2_1</h2>
    <h2>msg_h2_2</h2>
    <span>msg_span</span>
</div>
 
<div id="box">box_1</div>
<div id="box">box_2</div>
<div id="box">box_3</div>
 
<div class="cont">cont_1</div>
<div class="cont">cont_2</div>
<div class="cont">cont_3</div>
 
<span>span_1</span>
<span>span_2</span>
<span>span_3</span>
 
<input type="text" name="sex" value="" />
<input type="text" name="sex" value="" />
<input type="text" name="user" value="" />
</body>
<script type="text/javascript">
 
 
    //返回的是单个元素，就算有多个，获取的也只是第一个
    var obj1 = document.queryselector("#box");
    var obj2 = document.queryselector(".cont");
    var obj3 = document.queryselector("span");
    var obj4 = document.queryselector("#msg h2");
    var obj5 = document.queryselector("#box,.cont");
    console.log("以下为queryselector获取结果");
    console.log("#box匹配" , obj1);
    console.log(".cont匹配" , obj2);
    console.log("span匹配" , obj3);
    console.log("#msg h2匹配" , obj4);
    console.log("#box,.cont匹配" , obj5);
    console.log("----------------------------------------------------------");
 
 
    //返回的是数组，就算只有一个，获取的也是数组，操作数组中的数据时，要解析
    var arr1 = document.queryselectorall("#box");
    var arr2 = document.queryselectorall(".cont");
    var arr3 = document.queryselectorall("span");
    var arr4 = document.queryselectorall("#msg h2");
    var arr5 = document.queryselectorall("#msg *");
    var arr6 = document.queryselectorall("#box,.cont,span");
    console.log("以下为queryselectorall获取结果");
    console.log("#box匹配" , arr1);
    console.log(".cont匹配" , arr2);
    console.log("span匹配" , arr3);
    console.log("#msg h2匹配" , arr4);
    console.log("#msg *匹配" , arr5);
    console.log("#box,.cont,span匹配" , arr6);
</script>