DOM的选择器

这几天学习了DOM的选择器，现在来进行一下总结分类。

1.DOM里的元素节点选择器

元素节点选择器包括id,class,name,tagname,高级,关系。

1.1 id选择器

id:返回的是单个对象

1.2 class选择器

class：返回的是数组对象，如果要使用其中的元素，通过索引解析

class选择器代码

var acont = document.getElementsByClassName("cont")

    console.log(acont)

    console.log(acont[0])

    console.log(acont[0].innerHTML)

    console.log(acont.innerHTML)

控制台显示效果

1.3 tagname选择器

tagname：返回的是数组对象，如果要使用其中的元素，通过索引解析

tagname选择器代码

var aspan = document.getElementsByTagName("span")

    console.log(aspan)

    console.log(aspan[1])

    console.log(aspan[1].innerHTML)

    console.log(aspan.innerHTML)

控制台显示效果

1.4 name选择器

name:返回的是数组对象，如果要使用其中的元素，通过索引解析

name选择器代码

var auser = document.getElementsByName("user")

    console.log(auser)

控制台效果

1.5高级选择器：ES5新增的

1.5.1.querySelector：返回的是单个对象

querySelector选择器代码

var ele = document.querySelector("#box")
console.log( ele)
var ele = document.querySelector(".cont")
console.log( ele)
var ele = document.querySelector("span")
console.log( ele)
var ele = document.querySelector(".msg h2")
console.log( ele)
var ele = document.querySelector(".msg>h2")
console.log( ele)

控制台显示效果

1.5.2.querySelectorAll：返回的是数组对象，如果要使用其中的元素，通过索引解析

querySelectorAll选择器代码

var ele = document.querySelectorAll("#box")
console.log(ele[1])
var ele = document.querySelectorAll(".cont")
console.log(ele[1])
var ele = document.querySelectorAll("span")
console.log(ele[1])
var ele = document.querySelectorAll(".msg h2")
console.log(ele[1])
var ele = document.querySelectorAll(".msg>h2")
console.log(ele[1])

控制台效果

1.6关系选择器

1.6.1 父选子

var omsg = document.querySelector(".msg");

        console.log(omsg.children);

        console.log(omsg.children[0].innerHTML)

控制台效果

1.6.2子选父

var osbox = document.querySelector(".sbox");

        console.log(osbox.parentNode);

1.6.3选第一个子

 var omsg = document.querySelector(".msg");

        console.log(omsg.firstChild)

1.6.4选最后一个子

var omsg = document.querySelector(".msg");

        console.log(omsg.lastElementChild)

1.6.5 上一个兄弟

    var omsg = document.querySelector(".msg");

        console.log(omsg.previousElementSibling)

1.6.6 下一个兄弟

    var omsg = document.querySelector(".msg");

        console.log(omsg.nextElementSibling)

2其他节点选择器

<body>

    <span>qwe</span>

    <div class="box">

        <span>1</span>

        <p>2</p>

        hello

        <!-- 这是注释 -->

        <em>3</em>

    </div>

    <span>zxc</span>

</body>

2.1 父选子

 var obox = document.querySelector(".box")

            console.log(obox.childNodes)

2.2 选上一个兄弟

 var obox = document.querySelector(".box")

            console.log(obox.previousSibling)

            console.log(obox.previousSibling.nodeName)

2.3 选下一个兄弟

 var obox = document.querySelector(".box")

            console.log(obox.nextSibling)

2.4 选第一个子和最后一个子

 var obox = document.querySelector(".box")

            console.log(obox.firstChild)

var obox = document.querySelector(".box")

            console.log(obox.lastChild)