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

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