01-获取元素-获取单个元素-querySelector
<body>
<!-- 先写静态结构:前端开发的第一任务 -->
<div class="head">
头部内容
</div>
<div class="content" id="content">
主体内容
</div>
<div class="footer">
<span>尾部内容</span>
</div>
<script>
// 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 空对象
</script>
02-获取元素-获取多个元素querySelectorAll(伪数组)
<body>
<ul>
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
</ul>
<script>
// 获取所有的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)
</script>
</body>
注意:
1.获取所有的li:document.querySelectorAll
(‘选择器’),一定是拿到一个伪数组
2.一定是伪数组,哪怕只有1个或者没有
03-操作属性-基本属性(标准属性)innerText
:双标签内部文本 className
修改:元素.属性名 = 新值 src
:修改图片**href
:获取链接
<body>
<div class="box item current">
我是 前端新人
<a href="http://www.itcast.cn"><img src="images/cloud.gif" alt=""></a>
<span id="mark">我是带ID的男人</span>
</div>
<script>
// 操作元素:第一步是获取元素
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属性(换图)
</script>
注意:
1.className
会彻底修改掉原来的属性,也会修改顺序,位置,间距。
2.此处一般建议使用classList
,可以手动删除,增加。且不会影响元类名位置和间隔。
04-操作属性-基本属性classList
classList.add('添加类')
classList.remove('删除类')
******此处注意和className
的区别
<body>
<div class="box item one">
我是去前端新人
</div>
<script>
// 需求:修改盒子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')
</script>
</body>
注意:
1.classList
:获取元素的所有类
2.classList.add
(‘添加类’)
3.classList.remove
(‘删除类’)