JavaScript全解析——DOM操作 - 元素操作方式（上）
操作元素样式
style
●专门用来给元素添加 css 样式的
●在 JS 内操作元素样式style的情况分成三种
○设置元素的行内样式
○获取元素行内样式(只能获取到行内样式)
○获取元素非行内样式(可以获取行内样式也可以获取非行内样式)
■非行内样式有内嵌式和外链式
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.style.width = "100px"
div.style.height = "100px"
div.style.backgroundColor = "pink"
console.log(div)
// <div style="width: 100px; height: 100px; background-color: pink;"></div>
</script>
</body>
●页面中的 div 就会变成一个宽高都是 100，背景颜色是粉色
操作元素类名
className
●专门用来操作元素的 类名的
●实际上就是操作元素的原生属性，只不过在js中class是一个关键字，所以我们操作原生属性改用className
获取
●语法：元素对象.calssName
●返回值：得到的就是元素的完整类名
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
console.log(div.className) // box
</script>
</body>
设置
●语法：元素对象.className = '值'
●这样设置是全覆盖式的操作，也就是把之前的类名会全部覆盖掉
<body>
<div class="box"></div>
<script>
var div = document.querySelector('div')
div.className = 'test'
console.log(div) // <div class="test"></div>
</script>
</body>
●在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖
追加
●语法：元素.className += ' 值'
●注意: 值的位置要书写一个空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="seal">你好 世界</div>
<script>
var box = document.querySelector('div')
box.className += ' container'
console.log(box);//<div class="seal container">你好 世界</div>
</script>
</body>
</html>
classList
●每一个元素都有一个属性叫做 classList，是一个类似数组的集合, 里面记录了元素所有的类名
●classList操作类名有几种方式：添加，删除和切换
添加类名
●语法: 元素.classList.add('要添加的类名')
●作用: 给该元素添加一个类名, 但是重复的不会添加进去了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="seal">你好 世界</div>
<script>
var box = document.querySelector('div')
console.log(box.classList); //['seal', value: 'seal']
box.classList.add('cls')
console.log(box);//<div class="seal cls">你好 世界</div>
</script>
</body>
</html>
删除类名
●语法: 元素.classList.remove('要删除的类名')
●作用: 该该元素删除一个类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="seal hello">你好 世界</div>
<script>
var box = document.querySelector('div')
box.classList.remove('hello')
console.log(box); //<div class="seal">你好 世界</div>
</script>
</body>
</html>
切换类名
●语法: 元素.classList.toggle('要切换的类名')
●作用: 该元素切换一个类名
●切换: 有就删除, 没有就添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="seal hello">你好 世界</div>
<script>
var box = document.querySelector('div')
box.classList.toggle('hello')
box.classList.toggle('world')
console.log(box); //<div class="seal world">你好 世界</div>
</script>
</body>
</html>
操作元素属性
●元素属性:书写在标签身上, 一个 key=value 的键值对, 叫做一条属性
●通过我们各种获取元素的方式获取到页面中的标签以后
●我们可以直接操作 DOM 元素的属性，就能直接把效果展示在页面上
属性的分类
●原生属性
○在 W3C 规范中提到的属性, 对标签有一定的特殊意义或者描述作用
■id, class, src, type, ...
●自定义属性
○对于标签没有特殊的作用或者描述任务, 只是用来在标签身上记录一些信息
●H5 自定义属性
○只是 H5 自定义属性会以 data- 开头, 直观的看出来是自定义属性
○设置的方式: data-属性名=属性值
操作元素属性
●以下的所有操作属性的方式和方法, 均不操作 类名(class) 和 样式(style)
●操作原生属性
○直接依靠属性名进行操作
■获取: 元素.属性名
●得到的就是该元素指定属性的值
■设置: 元素.属性名 = 属性值
●作用修改该属性的值
●操作自定义属性
○获取:
■语法: 元素.getAttribute(属性名)
■返回值: 元素中该属性对应的值
○设置:
■语法: 元素.setAttribute(属性名, 属性值)
■作用: 设置或者修改一条自定义属性
○删除:
■语法: 元素.removeAttribut(属性名)
■作用: 删除元素身上该自定义属性
●操作H5 自定义属性
○每一个元素身上自带一个属性, 叫做 dataset, 是一个类似于对象的数据结构
○里面记录的是该元素身上所有的 data- 开头的自定义属性
○对于所有 H5 自定义属性的操作依赖于这个 dataset
○获取: 元素.dataset.属性名
○设置: 元素.dataset.属性名 = 属性值
○删除: delete 元素.dataset.属性名
<!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="container" class="box" hello="world" data-index="1" data-id="10">123</div>
<!-- <img src="https://img2.baidu.com/it/u=2102736929,2417598652&fm=26&fmt=auto&gp=0.jpg" alt=""> -->
<script>
// 0. 获取元素
var box = document.querySelector('div')
var img = document.querySelector('img')
// 1. 操作原生属性
// 1-1. 原生属性获取
console.log(box.id)
console.log(img.src)
// 1-2. 原生属性修改
box.id = 'abcd'
img.src = 'https://img0.baidu.com/it/u=1514002029,2035215441&fm=26&fmt=auto&gp=0.jpg'
// 2. 自定义属性
// 2-1. 自定义属性获取
var res = box.getAttribute('hello')
console.log(res)
// 2-2. 自定义属性设置
box.setAttribute('guoxiang', '你好')
box.setAttribute('guoxiang', '世界')
// 2-3. 自定义属性删除
box.removeAttribute('hello')
// 3. H5 自定义属性
// 3-1. 获取
console.log(box.dataset.index)
// 3-2. 设置
// 在标签上设置了一个 data-guoxiang="你好"
box.dataset.guoxiang = '你好'
box.dataset.guoxiang = '世界'
// 3-3. 删除
delete box.dataset.index
</script>
</body>
</html>
案例-密码可视
<!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>
<input type="password"><button>眼睛</button>
<script>
/*
案例 - 密码可视
+ 当点击这个 眼睛 按钮的时候
=> 判断 input 元素的 type 属性如果是 password 修改为 text
=> 判断 input 元素的 type 属性如果是 text 修改为 password
*/
// 0. 获取元素
var inp = document.querySelector('input')
var btn = document.querySelector('button')
// 1. 给 btn 绑定点击事件
btn.onclick = function () {
// 2. 拿到元素现在的 type 属性的值
var current = inp.type
// 3. 判断
if (current === 'password') {
// 设置为 text
inp.type = 'text'
} else {
// 设置为 password
inp.type = 'password'
}
}
</script>
</body>
</html>
