+ 用一个变量保存页面的中的某个或者某些元素
+ 获取元素的方法分成两类
1. 获取非常规元素
=> html: document.documentElement
=> head: document.head
=> body: document.body
2. 获取常规元素
2-1. 根据 id 获取元素
=> 语法: document.getElementById('元素 id 名')
=> 返回值:
-> 如果页面上有 id 对应的元素, 那么就是这个元素
-> 如果页面上没有 id 对应的元素, 那么就是 null
2-2. 根据 类名 获取元素
=> 语法: document.getElementsByClassName('元素类名')
=> 返回值: ** 必然是一个伪数组 **
-> 如果页面上有 类名 对应的元素, 那么有多少获取多少, 放在伪数组内返回
-> 如果页面上没有 类名 对应的元素, 那么就是一个空的伪数组
2-3. 根据 标签名 获取元素
=> 语法: document.getElementsByTagName('标签名')
=> 返回值: ** 必然是一个伪数组 **
-> 如果页面上有 标签名 对应的元素, 那么有多少获取多少, 放在伪数组内返回
-> 如果页面上没有 标签名 对应的元素, 那么就是一个空的伪数组
2-4. 根据选择器获取 ** 一个 ** 标签
=> 语法: document.querySelector('选择器')
=> 返回值:
-> 如果页面上有 选择器 对应的元素, 那么返回选择器对应的第一个元素
-> 如果页面上没有 选择器 对应的元素, 那么就是 null
2-5. 根据选择器获取 ** 一组 ** 标签
=> 语法: document.querySelectorAll('选择器')
=> 返回值: ** 必然是一个伪数组 **
-> 如果页面上有 选择器 对应的元素, 有多少获取多少, 放在一个伪数组内返回
-> 如果页面上没有 选择器 对应的元素, 那么就是一个空的伪数组
// 1. 获取非常规元素
// 1-1. html
// console.log(document.documentElement)
// 1-2. head
// console.log(document.head)
// 1-3. body
// console.log(document.body)
// 2. 获取常规元素
// 2-1. 通过 id 获取
// var ele = document.getElementById('box')
// console.log(ele)
// 2-2. 通过 类名 获取
// var eles = [ ...document.getElementsByClassName('box') ]
// console.log(eles)
// 2-3. 通过 标签名 获取
// var eles = document.getElementsByTagName('div')
// console.log(eles)
// 2-4. 通过 选择器 获取一个
// var ele = document.querySelector('li:nth-child(3)')
// console.log(ele)
// 2-5. 通过 选择器 获取一组
// var eles = document.querySelectorAll('.box')
// console.log(eles)
// 遍历
// for (var i = 0; i < eles.length; i++) {
// console.log(eles[i])
// }
// forEach, querySelectorAll 这个方法获取的元素集合可以直接使用 forEach
// eles.forEach(function (item) {
// console.log(item)
// })
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box1"></div>
<ul>
<li class="box">1</li>
<li class="box">2</li>
<li class="box">3</li>
<li class="box">4</li>
<li class="box">5</li>
<li class="box">6</li>
<li class="box">7</li>
<li class="box">8</li>
<li class="box">9</li>
<li class="box">10</li>
</ul>
<div class="box">div</div>
效果图
操作元素的属性
标签属性: 属性名=属性值
标签属性分类:
1. 原生属性
=> 在 W3C 规范中有的属性名
=> 比如: id class style type src href ...
2. 自定义属性
=> 在 W3C 规范中没有的属性名, 是我们自己书写在标签身上的
3. H5 自定义属性
=> 目的: 就是为了区分和原生出行写在标签上的表现形式
=> 要求: 书写 H5 自定义属性的时候, 以 data- 开头
=> 示例: data-hello="world"
-> data- 表示的是 H5 自定义属性的标志
-> hello 表示的是属性名
-> world 表示的是属性值
操作元素属性
1. 操作原生属性
+ 语法: 元素.属性名 = 属性值
+ 注意: 如果遇到布尔类型属性, 可以使用 true 或者 false 赋值
2. 操作自定义属性(非 H5 自定义属性)
+ 设置:
=> 语法: 元素.setAttribute(key, value)
+ 删除:
=> 语法: 元素.removeAttribute(key)
+ 获取:
=> 语法: 元素.getAttribute(key)
=> 返回值: 该元素指定自定义属性的值
+ 注意: 可以操作原生属性, 但是不推荐, 也不要用它去删除原生属性
3. 操作 H5 自定义属性
+ 每一个 元素节点 身上有一个天生自带的属性, 叫做 dataset
+ 是一个类似对象的数据结构, 存储的就是该标签身上所有的 H5 自定义属性
+ 对于 H5 自定义属性的操作, 就是对 dataset 这个数据结构的操作(同对象操作语法)
// 0. 获取元素
var ele = document.querySelector('div')
var img = document.querySelector('img')
var inp = document.querySelector('input')
var btn = document.querySelector('button')
// 1. 原生属性
// 操作 id 属性
// console.log(ele.id)
// 设置 id 属性
// ele.id = 'container'
// btn.onclick = function () {
// console.log(inp.type)
// if (inp.type === 'text') {
// inp.type = 'password'
// } else {
// inp.type = 'text'
// }
// }
// 2. 自定义属性
// 2-1. 设置属性
// ele.setAttribute('gx', 100)
// 2-2. 删除属性
// ele.removeAttribute('id')
// 2-3. 获取属性
// var res = ele.getAttribute('gx')
// console.log(res)
// console.log(typeof res)
// 3. H5 自定义属性
console.log(ele.dataset)
// 增:
ele.dataset.aaa = 100
// 删:
delete ele.dataset.hello
// 改:
ele.dataset.aaa = 300
// 查:
console.log(ele.dataset.id)
案例：全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 100px;
padding: 20px;
margin: 50px auto;
border-radius: 10px;
border: 2px solid #333;
}
hr {
margin: 10px 0;
}
</style>
</head>
<body>
<div class="box">
<input class="all" type="checkbox"> 全选
<hr>
<input class="item" type="checkbox"> 选项一 <br>
<input class="item" type="checkbox"> 选项二 <br>
<input class="item" type="checkbox"> 选项三 <br>
<input class="item" type="checkbox"> 选项四 <br>
</div>
<script>
/*
全选
需求:
1. 全选按钮的点击操作
=> 当全选按钮是选中状态的时候, 所有选项按钮也是选中状态
=> 当全选按钮是未选中状态的时候, 所有选项按钮也是未选中状态
2. 点击每一个选项按钮的操作
=> 每一个选项按钮点击的时候, 需要判断
=> 如果所有选项按钮都是选中状态, 那么全选按钮选中
=> 只要有任何一个选项按钮是未选中状态, 那么全选按钮未选中
*/
var allBtn = document.querySelector('.all')
var items = [ ...document.querySelectorAll('.item') ]
// 1. 全选按钮的点击操作
allBtn.onclick = function () {
items.forEach(function (item) { item.checked = allBtn.checked })
}
// 问题: 什么时候出现效果 ?
// 点击全选按钮的时候, 需要给全选按钮绑定点击事件
// allBtn.onclick = function () {
// // 问题2: 需要拿到什么内容 ?
// // 全选按钮自己的选中状态, 一个原生属性, checked
// var self = allBtn.checked
// // 问题3: 给谁设置 ? 给每一个选项按钮
// // self 是 true, 给每一个选项按钮设置 checked 属性为 true
// // self 是 false, 给每一个选项按钮设置 checked 属性为 false
// items.forEach(function (item) { item.checked = self })
// }
// 2. 点击每一个选项按钮的操作
// 问题1: 给谁绑定点击事件 ? 每一个选项按钮
items.forEach(function (item) { item.onclick = handler })
function handler() {
allBtn.checked = items.every(function (item) { return item.checked })
}
// 事件处理函数
// function handler() {
// // 问题2: 我要拿到谁的什么属性 ?
// // 拿到所有选项按钮的选中状态
// // 以本题为例, 我只有拿到 4 个 true 的时候, 才让全选按钮 选中 true
// // 只要不是 4 个 true, 全选按钮就是 未选中 false
// // 统计四个选项按钮内有多少个 true
// var total = 0
// items.forEach(function (item) {
// if (item.checked) total++
// })
// // 循环结束以后, total 就是 chekced 为 true 的数量
// // console.log(total)
// // 判断
// // 如果 total === items.length 为 true, 说明全都是选中的, 全选按钮设置为 true
// // 如果 total === items.length 为 false, 说明至少有一个是未选中的, 全选按钮设置为 false
// allBtn.checked = total === items.length
// }
// function handler() {
// // 问题: 核心目的 就是为了知道是不是都是 true
// // every, 每一项都是 true 的时候, 才会返回 true, 只要有任何一个是 false 就会返回 false
// // 但是 every 是一个数组方法, items 用不了
// var res = items.every(function (item) { return item.checked })
// // 直接把 res 赋值给 allBtn 的 checked
// allBtn.checked = res
// }
</script>
</body>
</html>
效果图：
操作元素样式
+ 在 JS 内操作元素样式有三种
1. 获取元素行内样式(只能获取到行内样式)
2. 获取元素非行内样式(包含行内和非行内)
3. 设置元素的样式(只能设置行内样式)
+ 注意: 涉及到带有中划线的样式名的时候
=> 转换成驼峰命名法
var ele = document.querySelector('div')
=> 使用数组关联语法
// 1. 获取元素行内样式
// 语法: 元素.style.样式名
// console.log(ele.style.width)
// console.log(ele.style.height) // 非行内样式
// console.log(ele.style.fontSize)
// console.log(ele.style['font-size'])
// 2. 获取元素非行内样式
// 语法: window.getComputedStyle(要获取样式的元素).样式名
// console.log(window.getComputedStyle(ele).width)
// console.log(window.getComputedStyle(ele).height)
// console.log(window.getComputedStyle(ele).fontSize)
// console.log(window.getComputedStyle(ele)['background-color'])
// 3. 设置元素样式(只能设置行内样式)
// 语法: 元素.style.样式名 = 样式值
// ele.style.backgroundColor = 'red'
案例：回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 5000px;
}
.header {
width: 100%;
height: 60px;
font-size: 40px;
background-color: skyblue;
color: #fff;
text-align: center;
line-height: 60px;
position: fixed;
left: 0;
top: -60px;
transition: top .5s linear;
}
.goTop {
position: fixed;
right: 50px;
bottom: 50px;
width: 50px;
height: 50px;
font-size: 20px;
line-height: 25px;
text-align: center;
background-color: pink;
color: #fff;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<div class="header">顶部通栏</div>
<div class="goTop">回到顶部</div>
<script>
/*
案例 - 回到顶部
需求:
1. 内容的出现
=> 当页面滚动到 临界点(350) 以上的时候
-> header 出现 设置 top 样式为 0
-> goTop 出现 设置 display 样式为 block
=> 当页面滚动到 临界点(350) 以下的时候
-> header 隐藏 设置 top 样式为 -60px
-> goTop 隐藏 设置 display 样式为 none
2. 回到顶部
=> 点击 goTop 按钮的时候
=> 让滚动条滚动回到顶部
*/
// 0. 获取元素
var header = document.querySelector('.header')
var goTop = document.querySelector('.goTop')
// 1. 内容的出现
// 问题1: 什么时候出现效果 ? 随着滚动条的改变而出现效果
// 给浏览器绑定 scroll 事件
window.onscroll = function () {
// 问题2: 通过什么判断 ? 浏览器卷去的高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 判断
if (scrollTop > 350) {
header.style.top = 0
goTop.style.display = 'block'
} else {
header.style.top = '-60px'
goTop.style.display = 'none'
}
}
// 2. 回到顶部
goTop.onclick = function () {
window.scrollTo({ top: 0, behavior: 'smooth' })
}
</script>
</body>
</html>
操作元素类名
+ 目的: 批量给变样式
1. className
+ 就是原生属性的操作
+ 因为 JS 内有一个关键字叫做 class, 为了避开改名叫做 className
+ 注意: 类名的值是一个字符串没错, 但是字符串中可能包含多个类名
2. classList
+ 每一个 元素节点 身上自带一个属性叫做 classList
+ 是一个类似数组的数据结构, 存放的是该元素的所有类名
+ 增删改查都是对 classList 的操作, 给出专用的 api
+ 增: 元素.classList.add(类名)
+ 删: 元素.classList.remove(类名)
+ 切换: 元素.classList.toggle(类名)
-> 原先有就删除, 原先没有就增加
var ele = document.querySelector('div')
// 1. className
// 1-1. 获取 元素.className
// console.log(ele.className)
// 1-2. 设置 元素.className = '值'
// 因为是 等于号(=) 赋值, 所以你赋值的时候, 会把原先的全部覆盖
// ele.className = 'box'
// 1-3. 追加 元素.className += '值' //等于号后有一个空格
// ele.className = ele.className + ' box'
// 2. classList
console.log(ele.classList)
// 2-1. 增加
ele.classList.add('box') //box未类名
// 2-2. 删除
ele.classList.remove('c') //c为类名
// 2-3. 切换
ele.onclick = function () {
ele.classList.toggle('active') //active为类名
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
background-color: pink;
}
div.active {
width: 200px;
height: 200px;
background-color: skyblue;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="a b c d"></div>
<script>
var ele = document.querySelector('div')
// 1. className
// 1-1. 获取 元素.className
// console.log(ele.className)
// 1-2. 设置 元素.className = '值'
// 因为是 等于号(=) 赋值, 所以你赋值的时候, 会把原先的全部覆盖
// ele.className = 'box'
// 1-3. 追加 元素.className += '值' //等于号后有一个空格
// ele.className = ele.className + ' box'
// 2. classList
console.log(ele.classList)
// 2-1. 增加
ele.classList.add('box') //box未类名
// 2-2. 删除
ele.classList.remove('c') //c为类名
// 2-3. 切换
ele.onclick = function () {
ele.classList.toggle('active') //active为类名
}
</script>
</body>
</html>
效果图：
操作元素内容
1. innerText
+ 一个读写的属性
+ 读:
=> 语法: 元素.innerText
=> 得到: 该元素内的所有文本内容
+ 写:
=> 语法: 元素.innerText = '值'
=> 作用: 完全覆盖式的书写该标签内的文本内容
=> 注意: 没有办法识别解析 html 格式字符串
2. innerHTML
+ 一个读写的属性
+ 读:
=> 语法: 元素.innerHTML
=> 得到: 该元素内的所有内容(包含超文本), 以一个 html 格式字符串的形式给你
+ 写:
=> 语法: 元素.innerHTML = '值'
=> 作用: 完全覆盖式的书写该标签内的超文本内容
=> 注意: 可以识别解析 html 格式字符串
3. value
+ 一个读写的属性, 其实就是原生属性 value 的操作
+ 读:
=> 语法: 表单元素.value
=> 得到: 该表单元素的 value 值
+ 写:
=> 语法: 表单元素.value = '值'
=> 作用: 设置表单元素的 value 值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
hello
<p>你好 世界</p>
world
</div>
<input type="text">
<script>
// 获取元素
var ele = document.querySelector('div')
var inp = document.querySelector('input')
// 1-1. innerText 获取
// console.log(ele.innerText)
// 1-2. innerText 设置
// ele.innerText = '<h1>我是新来的</h1>'
// 2-1. innerHTML 获取
// console.log(ele.innerHTML)
// 2-2. innerHTML 设置
// ele.innerHTML = '<h1>我是新来的</h1>'
// 3-1. value 设置
inp.value = '我是新来的'
// 3-2. value 获取
console.log(inp.value)
</script>
</body>
</html>
6934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
