获取单个元素 |
您所在的位置：网站首页 › 获取某个元素的子元素 › 获取单个元素 |
获取单个元素
|
01-获取元素-获取单个元素-querySelector
头部内容
主体内容
尾部内容
// JS要获取元素：document.querySelector('选择器')
// 认识document
console.log(document)
// 具体获取元素：选择器
// 类选择器： .类名
let head = document.querySelector('.head')
console.log(head)
// 标签选择器：querySelector()获取第一个
let head1 = document.querySelector('div')
console.log(head1)
// 只要能够构成选择器的：都可以用来获取元素
let content = document.querySelector('#content')
console.log(content)
// 后台或者子代选择器
let span = document.querySelector('.footer span')
console.log(span)
// 补充：所有的获取到的都是对象：是因为浏览器为了开发者使用方便，输出的时候都变成了字符串（元素标签）
// 扩展：如果拿不到会得到null（对象：空对象）
let a = document.querySelector('a')
console.log(a) // null 空对象
02-获取元素-获取多个元素querySelectorAll(伪数组)
隔壁老王1
隔壁老王2
隔壁老王3
// 获取所有的li：document.querySelectorAll('选择器')，一定是拿到一个伪数组
let lis = document.querySelectorAll('ul li')
console.log(lis)
// 拿到的是个伪数组：不能直接用，要一个一个的取出里面的真实元素才能使用
// 当前伪数组：可以受用for循环，也可以使用forEach
lis.forEach(function (li) {
console.log(li)
})
// querySelectorAll()特点：一定是伪数组，哪怕只有1个或者没有
let ul = document.querySelectorAll('ul')
console.log(ul)
// 容易犯错的地方：获取一个，不小心用了querySelectorAll()
let a = document.querySelectorAll('a')
console.log(a)
注意： 1.获取所有的li：document.querySelectorAll(‘选择器’)，一定是拿到一个伪数组 2.一定是伪数组，哪怕只有1个或者没有 03-操作属性-基本属性（标准属性）innerText：双标签内部文本 className修改：元素.属性名 = 新值 src:修改图片**href：获取链接 我是 前端新人 我是带ID的男人 // 操作元素：第一步是获取元素 let box = document.querySelector('.box') console.log(box) // 访问属性：类名className console.log(box.class) // js中不识别 console.log(box.className) // 所有类名 let a = document.querySelector('.box a') let img = document.querySelector('.box img') let span = document.querySelector('#mark') // href：a特有的 console.log(a.href) // src：img（audio\vedio） console.log(img.src) // 不管是a.href还是img.src拿到都是完整路径 // id console.log(span.id) // innerText：双标签内部文本 console.log(span.innerText) // 修改：元素.属性名 = 新值 box.className = 'now' console.log(box.className) // 所有属性都可以改 span.innerText = '我是带Id的人' img.src = 'images/b1.jpg' // 新增属性：元素.属性名 = 新值 span.className = 'add' // 删除：delete delete span.className // 属性不能删除 console.log(span.className) // 基本属性操作用的最多的 // 1. 类名：需要修改（一般是修改） // 2. href属性（换链接） // 3. src属性（换图）
注意： 1.className会彻底修改掉原来的属性，也会修改顺序，位置，间距。 2.此处一般建议使用classList，可以手动删除，增加。且不会影响元类名位置和间隔。 04-操作属性-基本属性classList classList.add('添加类') classList.remove('删除类')******此处注意和className的区别 我是去前端新人 // 需求：修改盒子box的颜色 // 解决方案：干掉类名one，添加类名two // 1. 获取元素 let box = document.querySelector('.box') // 2. 修改类名 // box.className = 'box item two' // 操作特点：肉眼编程 // 有一种更好的方式：只要操作想要操作的类即可（不影响别的类） // classList：获取元素的所有类 console.log(box.classList) // 看到所有类：是一个对象，这个对象提供了两个方法操作类： // classList.add('添加类') // classList.remove('删除类') // 1. 先干掉one box.classList.remove('one') // 2. 后添加two box.classList.add('two')注意： 1.classList：获取元素的所有类 2.classList.add(‘添加类’) 3.classList.remove(‘删除类’) |
【本文地址】