querySelect and querySelectorAll
querySelect
// get <body> element
let body = document.querySelector("body");
// ID "mDiv"
let myDiv = document.querySelector(#myDiv )
// firtst named selected
let selected = document.querySelector ("selected");
// first tag img className "button"
let img = document.body.querySelector("img.button);
querySelectorAll
// get all em elements with id "myDiv"
let ems = document.getElementById(myDiv).querySelectorAll("em);
// get all elements with className "selected"
let selecteds = document.querySelectorAll(".selected");
// get all strong elements of p
let strongs = document.querySelectorAll("p strong");
tips: like querySelect, returns not just one element, but static NodeList
getElementBy...
getElementById
let div = document.getElementById(myDiv)
let div = document.getElementById(mydiv)
tips： case sensitive
getElementByTagName
// return a HTMLCollection with all of img elements
let images = document.getElementsByTagName ("img")
getElementByName
let radios = document.getElementsByName("color")
tips:like getElementByTagName, but the namedItem() method only can get first item because all the names are the same
Difference
- Selector API return static node，getElementBy return dynamic node
- HTMLCollection contains only element node，but NodeList contains all nodes such as text nodes
