随笔 - 321  文章 - 0  评论 - 6  阅读 - 34万

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

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

 

posted on   该用户很懒  阅读(3675)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示