querySelector常⽤⽤法通过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.lor = "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;
lor = "red";
复制代码
2.1.4 ⾸⼦节点-lastChild
返回最后⼀个⼦节点
var parent = document.querySelector("#parent");
var last = parent.lastChild;
lor = "red";
复制代码
2.1.5 下⼀兄弟节点-nextSibling
返回下⼀个兄弟节点
var title = document.querySelector("#title");
var next = Sibling;
lor = "red";
复制代码
2.1.6 前⼀兄弟节点-previousSibling
返回前⼀个兄弟节点
var title = document.querySelector("#title");
var pre = title.previousSibling;
lor = "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(deValue);
复制代码
2.1.9 节点名-nodeName
返回元素的标签名，以⼤写形式表⽰
var title = document.querySelector("#title");
console.deName);
console.log(deName);
复制代码
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].lor = "red";
}
console.log(children.length);
复制代码
2.2.2 ⾸⼦元素-firstElementChild
返回所有⼦元素中的第⼀个（节点是元素的⼀种）  var parent = document.querySelector("#parent");
var first = parent.firstElementChild;
lor = "red";
复制代码
2.2.3 尾⼦元素-lastElementChild
返回所有⼦元素中的最后⼀个
var parent = document.querySelector("#parent");
var last = parent.lastElementChild;
lor = "red";
复制代码
2.2.4 下⼀兄弟元素 nextElementSibling
返回下⼀个兄弟元素
nodeselectorvar title = document.querySelector("#title");
var next = ElementSibling;
lor = "red";
复制代码
2.2.5 下⼀兄弟元素 previousElementSibling
返回前⼀个兄弟元素
var title = document.querySelector("#title");
var previous = title.previousElementSibling;
lor = "red";
复制代码
2.2.6 ⼦元素数量
返回⼦元素的数量
var parent = document.querySelector("#parent");  console.log(parent.childElementCount);
调试⽅法：控制台⾥输⼊语句

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。