querySelector()

1. 基本语法document.querySelector(选择器)比如let box document.querySelector(#box);意思去整个网页document里面找 id 为 box 的元素。一、先回顾 CSS 选择器你学 CSS 的时候应该见过1. id选择器CSS#box { }意思找到div idbox/div2. class选择器CSS.box { }意思找到div classbox/div3. 标签选择器CSSdiv { }意思找到div/div而querySelector()就是直接使用这些 CSS 选择器。二、获取 id 元素HTMLh1 idtitle 学习JavaScript /h1CSS 找它#title所以 JSlet h1 document.querySelector(#title);解释拆开看document表示整个网页。.querySelector()表示寻找元素。#title表示寻找 idtitle。所以document.querySelector(#title)就是在网页中找到 id 为 title 的元素。然后h1.innerHTML你好;页面之前学习JavaScript变成你好三、获取 class 元素HTMLp classtext 我是文字 /pCSS.text注意class 前面必须加.所以let pdocument.querySelector(.text);找到p classtext四、获取标签元素HTMLh1 标题 /h1CSSh1JSlet h1document.querySelector(h1);注意标签不用加符号。错误document.querySelector(#h1)这是找idh1不是找标签。五、最重要querySelector只能获取第一个例如HTMLp classtext 第一段 /p p classtext 第二段 /p p classtext 第三段 /pJSlet pdocument.querySelector(.text);结果只得到p classtext 第一段 /p为什么因为querySelector 找第一个符合条件的。如果想全部获取使用document.querySelectorAll(.text);得到第一段 第二段 第三段六、组合选择器非常重要querySelector 最大的优势它支持 CSS 的复杂选择器。比如HTMLdiv classbox p hello /p /div你想找 div 里面的 p。CSS.box p意思找到class为box里面的pJSlet pdocument.querySelector(.box p);成功找到p hello /p七、举一个完整例子HTML:div idbox h1 标题 /h1 p 内容 /p /div需求修改标题。方法let titledocument.querySelector(#box h1); title.innerHTML新的标题;分析#box h1相当于 CSS#box h1意思找到idbox里面的h1八、querySelector 常用写法总结HTMLCSS写法JSidbox#boxquerySelector(#box)classbox.boxquerySelector(.box)div标签divquerySelector(div)div里面pdiv pquerySelector(div p)第一个liliquerySelector(li)九、你可以这样记以前document.getElementById(box)现在document.querySelector(#box)等价。class以前document.getElementsByClassName(box)现在document.querySelector(.box)最后用一句话记忆querySelector(CSS选择器)看到什么 CSS 写法就直接放进去。例如CSS#nav .item pJSdocument.querySelector(#nav .item p)