剑指前端（前端入门笔记系列）——DOM（基本组成与操作）

<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById("box");
if(oBox.nodeType == Node.ELEMENT_NODE){
    console.log("元素节点");
}else {
    console.log("不是元素节点");
}
</script>

<div id="box"></div>
<script type="text/javascript">
    var oBox = document.getElementById("box");
    if(oBox.nodeType == 1){
        console.log("元素节点");
    }else {
        console.log("不是元素节点");
    }
</script>

<div id="box">
    <p>段落1</p>
    <p>段落2</p>
    <!--注释123-->
    <p>段落3</p>
</div>
 
<script type="text/javascript">
    var oBox = document.getElementById("box");
    var firstChild_1 = oBox.childNodes[0];
    var firstChild_2 = oBox.childNodes.item(0);
    var count = oBox.childNodes.length;
    console.log("所有子节点：" , oBox.childNodes);
    console.log("第一个子节点：" , firstChild_1);
    console.log("第一个子节点：" , firstChild_2);
    console.log("子节点的数量：" , count);
</script>

<div id="box">
    <p class="p1">段落1</p>
    <p>段落2</p>
    <!--注释123-->
    <p>段落3</p>
</div>
 
<script type="text/javascript">
    var oP= document.getElementsByClassName("p1")[0];
    var parent = oP.parentNode;
    console.log("父节点为：" , parent);
</script>

<div id="box">
    <p class="p1">段落1</p>
    <span></span>
    <h1>段落2</h1>
    <!--注释123-->
    <p>段落3</p>
</div>
 
<script type="text/javascript">
    var oP= document.getElementsByClassName("p1")[0];
    var preSibling = oP.previousSibling;
    var nextSibling = oP.nextSibling;
    console.log("前一个兄弟节点为：" , preSibling);
    console.log("后一个兄弟节点为：" , nextSibling);
</script>

<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>