querySelector常用用法

轉載：https://juejin.cn/post/6844903927956111373

通過CSS樣式表選擇器的強大語法，來選擇元素。 返回第一個匹配的元素

var title = document.querySelector("#title"); // CSS ID選擇 var h1 = document.querySelector("h1"); //選取第一個h1元素 復制代碼

1.6、CSS多元素選擇器

通過CSS樣式表選擇器的強大語法，來選擇元素。 返回元素數組

var h1s = document.querySelectorAll("h1"); //返回所有h1標簽元素 復制代碼

二、Dom遍歷

2.1 節點相關

2.1.1 父節點-parentNode

返回父節點，如果document 對象調用則返回 null

 var title = document.querySelector("#title"); title.parentNode.style.color = "red"; 復制代碼

2.1.2 子節點-childNodes

返回所有子節點，即NodeList對象

  var parent = document.querySelector("#parent"); var children = parent.childNodes; for(var i =0; i< children.length; i++) { console.log(i+"="+children[i].nodeName); } console.log(children.length); 復制代碼

2.1.3 首子節點-firstChild

返回第一個子節點

  var parent = document.querySelector("#parent"); var first = parent.firstChild; first.style.color = "red"; 復制代碼

2.1.4 首子節點-lastChild

返回最后一個子節點

  var parent = document.querySelector("#parent"); var last = parent.lastChild; last.style.color = "red"; 復制代碼

2.1.5 下一兄弟節點-nextSibling

返回下一個兄弟節點

 var title = document.querySelector("#title"); var next = title.nextSibling; next.style.color = "red"; 復制代碼

2.1.6 前一兄弟節點-previousSibling

返回前一個兄弟節點

  var title = document.querySelector("#title"); var pre = title.previousSibling; pre.style.color = "red"; 復制代碼

2.1.7 節點類型-nodeType

返回節點類型的數字表示

 1-代表Element節點
 3-代表Text節點
 8-代表Comment節點
 9-代表Document節點
 11-代表DocumentFragment節點 
復制代碼

2.1.8 節點值-nodeValue

返回Text 節點 或 Comment 節點的值

  var title = document.querySelector("#title"); console.log(title.firstChild.nodeValue); 復制代碼

2.1.9 節點名-nodeName

返回元素的標簽名，以大寫形式表示

  var title = document.querySelector("#title"); console.log(title.nodeName); console.log(title.firstChild.nodeName); 復制代碼

2.2 元素相關

2.2.1 子元素-children

返回所有子元素

  var parent = document.querySelector("#parent"); var children = parent.children; for(var i =0 ;i < children.length; i++) { children[i].style.color = "red"; } console.log(children.length); 復制代碼

2.2.2 首子元素-firstElementChild

返回所有子元素中的第一個（節點是元素的一種）

  var parent = document.querySelector("#parent"); var first = parent.firstElementChild; first.style.color = "red"; 復制代碼

2.2.3 尾子元素-lastElementChild

返回所有子元素中的最后一個

  var parent = document.querySelector("#parent"); var last = parent.lastElementChild; last.style.color = "red"; 復制代碼

2.2.4 下一兄弟元素 nextElementSibling

返回下一個兄弟元素

  var title = document.querySelector("#title"); var next = title.nextElementSibling; next.style.color = "red"; 復制代碼

2.2.5 下一兄弟元素 previousElementSibling

返回前一個兄弟元素

  var title = document.querySelector("#title"); var previous = title.previousElementSibling; previous.style.color = "red"; 復制代碼

2.2.6 子元素數量

返回子元素的數量

  var parent = document.querySelector("#parent"); console.log(parent.childElementCount);

調試方法：控制台里輸入語句