DOM选择器之元素节点选择器

原创

阿里CTO 2022-07-22 15:39:50 博主文章分类：DOM ©著作权

©著作权归作者所有：来自51CTO博客作者阿里CTO的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">1</div>
    <div id="box">2</div>
    <div id="box">3</div>
    <div class="msg">
        <div class="sbox">
            <h2>三级标题</h2>
            <h2>三级标题</h2>
        </div>
        <h2>二级标题</h2>
        <h2>二级标题</h2>
    </div>
    <div class="cont">4</div>
    <div class="cont">5</div>
    <div class="cont">6</div>
    <span>5</span>
    <span><em>hello</em></span>
    <span>9</span>
    <input type="text" name="user" value="你好">
    <input type="text" name="user">
    <input type="text" name="pass">
</body>
<script>

    // 选择器：
    //     元素节点选择器：
    //          id,class,name,tagname,高级,关系

    // id:返回的是单个对象
     var box = document.getElementById("box");
     console.log(box)   //<div id="box">1</div>
    // class：返回的是数组对象，如果要使用其中的元素，通过索引解析
     var acont = document.getElementsByClassName("cont")
     console.log(acont)//[div.cont, div.cont, div.cont]
     console.log(acont[0])//<div class="cont">4</div> ，返回数组中的单个对象
     console.log(acont[0].innerHTML)//4 返回数组中的单个对象中的值
     console.log(acont.innerHTML) //undefined
    // tagname：返回的是数组对象，如果要使用其中的元素，通过索引解析
     var aspan = document.getElementsByTagName("span")
     console.log(aspan) // [span, span, span],第二个span中有元素，但是在数组只显示一个span
    // name:返回的是数组对象，如果要使用其中的元素，通过索引解析
     var auser=document.getElementsByName("user")
     console.log(auser) //[input, input]
     console.log(auser[0])//<input type="text" name="user">
    console.log(auser[0].value)//你好
    // 高级:ES5新增的
//     querySelector：返回的是单个对象
     var a = document.querySelector("#box")
    console.log(a)  //<div id="box">1</div>
    var b=document.querySelector(".msg")
    console.log(b)//<div class="msg"><div class="sbox"><h2>二级标题</h2><h2>二级标题</h2></div><h2>二级标题</h2><h2>二级标题</h2></div>
     var ele = document.querySelector("span")
    console.log(ele)//<span>5</span>
     var ele = document.querySelector(".msg h2")
    console.log(ele)//<h2>三级标题</h2>
     var ele = document.querySelector(".msg>h2")
    console.log(ele)//<h2>二级标题</h2>
    // querySelectorAll：返回的是数组对象，如果要使用其中的元素，通过索引解析
     var ele = document.querySelectorAll("#box") //[div#box, div#box, div#box]
     var ele = document.querySelectorAll(".cont")// [div.cont, div.cont, div.cont]
     var ele = document.querySelectorAll("span") //[span, span, span]
     var ele = document.querySelectorAll(".msg h2")//[h2, h2, h2, h2]
     var ele = document.querySelectorAll(".msg>h2")//[h2, h2]
     console.log(ele)

    // 关系：
    // 父选子,返回的是数组对象
         var omsg = document.querySelector(".msg");
         console.log(omsg.children);//[div.sbox, h2, h2]
    // 子选父,返回的是单个对象
         var osbox = document.querySelector(".sbox");
          console.log(osbox.parentNode);//<div class="msg"><div class="sbox"><h2>三级标题</h2><h2>三级标题</h2></div><h2>二级标题</h2><h2>二级标题</h2></div>
    // 第一个子,返回的是单个对象
         var omsg = document.querySelector(".msg");
         console.log(omsg.firstElementChild) //<div class="sbox"><h2>三级标题</h2><h2>三级标题</h2></div>
    // 最后一个子,返回的是单个对象
         var omsg = document.querySelector(".msg");
         console.log(omsg.lastElementChild)//<h2>二级标题</h2>
    // 上一个兄弟,返回的是单个对象
         var omsg = document.querySelector(".msg");
        console.log(omsg.previousElementSibling)//<div id="box">3</div>
1    // 下一个兄弟,返回的是单个对象
         var omsg = document.querySelector(".msg");
         console.log(omsg.nextElementSibling)//<div class="cont">4</div>
    //     其他节点选择器：