These days learning the DOM selector, now to sum up the classification.
1.DOM in the element node selector
Element node selector includes id, class, name, tagname, senior, relationships.
1.1 id selector
id: returns a single object
Related Tags Code
<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</Subheadings div > < H2 > subheadings </ H2 > < H2 > The second subheadings </ H2 > </ div > < div class = "CONT" > . 4 </ div > < div class = "CONT" > . 5 </ div > < div class = "CONT" > . 6 </ div > < span > . 7 </span> <span><em>hello</em></span> <span>9</span> <input type="text" name="user"> <input type="text" name="user"> <input type="text" name="pass"> </body>
id selector code
var box = document.getElementById("box");
console.log(box)
Console display
1.2 class selector
class: Returns the array object, if the element to be used therein, by parsing the index
class selector code
var acont = document.getElementsByClassName("cont")
console.log(acont)
console.log(acont[0])
console.log(acont[0].innerHTML)
console.log(acont.innerHTML)
Console display
1.3 tagname selector
tagname: Returns the array object, if the element to be used therein, by parsing the index
tagname selector code
var aspan = document.getElementsByTagName("span")
console.log(aspan)
console.log(aspan[1])
console.log(aspan[1].innerHTML)
console.log(aspan.innerHTML)
Console display
1.4 name selector
name: Returns the array object, if the element to be used therein, by parsing the index
selector code name
var auser = document.getElementsByName("user")
console.log(auser)
Console effect
1.5 Advanced Selector: ES5 new
1.5.1.querySelector: returns a single object
querySelector selector code
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)
Console display
1.5.2.querySelectorAll: returns an array of objects, if you want to use the elements which, by parsing index
querySelectorAll selector code
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])
Console effect
1.6 Relations selector
1.6.1 election parent child
var omsg = document.querySelector(".msg");
console.log(omsg.children);
console.log(omsg.children[0].innerHTML)
Console effect
1.6.2 submenu Father
var osbox = document.querySelector(".sbox");
console.log(osbox.parentNode);
1.6.3 selected first child
var omsg = document.querySelector(".msg");
console.log(omsg.firstChild)
1.6.4 election last child
var omsg = document.querySelector(".msg");
console.log(omsg.lastElementChild)
A brother on 1.6.5
var omsg = document.querySelector(".msg");
console.log(omsg.previousElementSibling)
1.6.6 next sibling
var omsg = document.querySelector(".msg");
console.log(omsg.nextElementSibling)
2 other nodes selector
<body> <span>qwe</span> <div class="box"> <span>1</span> <p>2</p> hello <!-- 这是注释 --> <em>3</em> </div> <span>zxc</span> </body>
Father son 2.1 selected
var obox = document.querySelector(".box")
console.log(obox.childNodes)
2.2 chosen a brother
var obox = document.querySelector(".box")
console.log(obox.previousSibling)
console.log(obox.previousSibling.nodeName)
2.3 By a brother
var obox = document.querySelector(".box")
console.log(obox.nextSibling)
2.4 and selected from the first child last child
var obox = document.querySelector(".box")
console.log(obox.firstChild)
var obox = document.querySelector(".box")
console.log(obox.lastChild)
