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);

调试方法：控制台里输入语句