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

发布时间:2019-07-02 22:00:16发布者:Mr.Zhang阅读(294)

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>
  • ES5新增
ES5新增了方法querySelector()和querySelectorAll(),可以用CSS选择器来做为参数传入,两者搭配可以实现以上所有方法,所以是现在选择器的首选方法。
<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>
 
关系选择器
  • 父子关系
<div class="msg">
    <div class="xbox">
        <h2>msg_xbox_1</h2>
        <h2>msg_xbox_2</h2>
    </div>
    <h2>msg_1</h2>
    <h2>msg_2</h2>
</div>
<script type="text/javascript">
    // 父选子元素:返回的是数组,就算只有一个,获取的也是数组,操作数组中的数据时,要解析
    var omsg1 = document.querySelector(".msg");
    console.log("msg的子元素:" , omsg1.children);
    console.log("msg的第一个子元素:" , omsg1.children[0]);
    // 第一个子元素:返回的是单个元素
    var omsg2 = document.querySelector(".msg");
    console.log("msg的第一个子元素:" , omsg2.firstElementChild);
    // 最后一个子元素:返回的是单个元素
    var omsg3 = document.querySelector(".msg");
    console.log("msg的最后一个子元素:" , omsg3.lastElementChild);
    console.log("----------------------------------------");
    // 子选父元素:返回的是单个元素
    var oxbox = document.querySelector(".xbox");
    console.log("xbox的父元素:" , oxbox.parentNode);
</script>

  • 兄弟关系
<div id="box">box_1</div>
<div id="box">box_2</div>

<div class="msg">
    <div class="xbox">
        <h2>msg_xbox_1</h2>
        <h2>msg_xbox_2</h2>
    </div>
    <h2>msg_1</h2>
    <h2>msg_2</h2>
</div>

<div class="cont">cont_1</div>
<div class="cont">cont_2</div>
<script type="text/javascript">
//    上一个兄弟元素:返回的是单个元素
    var omsg1 = document.querySelector(".msg");
    console.log("msg的上一个兄弟元素:" , omsg1.previousElementSibling);
//    下一个兄弟元素:返回的是单个元素
    var omsg2 = document.querySelector(".msg");
    console.log("msg的下一个兄弟元素:" , omsg2.nextElementSibling)
</script>

 

总结
(1)元素节点作为操作页面最常用的节点,又可以通过HTML语言中的标签名以及标签的属性名id、class以及name来获取
(2)元素节点的获取方法在ES5中新增了querySelector()和querySelectorAll()方法,这两个方法用CSS选择器来做为参数,两者搭配可以获取到所有元素节点,是获取元素节点的首选方法。
 




本文转自博客园,原文地址:https://www.cnblogs.com/AI-fisher/p/11121665.html