6、前端--DOM操作（查找标签、节点操作、获取值操作、class操作、样式操作、绑定事件、内置参数this）

DOM操作之查找标签

前缀关键字>>>:document

# 基本查找(核心)
document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

"""
如果我们的js代码需要页面上某个标签加载完毕
那么该js代码应该写在body内部最下方或者引入外部js文件
"""

# 间接查找(重要)
parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

var aEle = document.createElement('a');  # 创建标签
aEle.setAttribute('href','https://www.mmzztt.com/')  # 设置属性
aEle.innerText = '好不好看?'  # 设置内容文本
document.getElementsByTagName('p')[0].appendChild(aEle)  # 动态添加
"""一定要明确当前手上是什么对象"""
imgEle.getAttribute('title')  # 获取标签属性

innerText
	不加赋值符号是获取内部文本
	加了赋值符号是设置内置文本
	# 不可以识别HTML标签
innerHTML
	不加赋值符号是获取内部标签+文本
	加了赋值符号是设置内置标签+文本
	# 可以识别HTML标签

获取值操作

# 普通的文本数据获取
	标签对象.value
# 特殊的文件数据获取
	标签对象.value  '''仅仅获取一个文件地址而已'''
	标签对象.files[0]  '''获取单个文件数据'''
	标签对象.files  '''获取所有文件数据'''

class操作

classList  查看所有的类
classList.remove(cls)  删除指定类
classList.add(cls)  添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

样式操作

标签对象.style.属性名 = 属性值

事件

# 就是给HTML元素添加自定义的功能
绑定事件的方式1
	<button onclick="func()">点我</button>
	<script>
		function func() {
			alert(123)
		}
	</script>

绑定事件的方式2
	<button id="d1">选我</button>
	<script>
		// 1.先查找标签
		var btnEle = document.getElementById('d1')
		// 2.绑定事件
		btnEle.onclick = function () {
			alert(456)
		}
	</script>

内置参数this

# this指代的就是当前被操作对象本身
在事件的函数体代码内部使用
	btnEle.onclick = function () {
		alert(456)
		console.log(this)
	}

事件练习

onclick单击事件
onfocus聚焦事件
onblur失去焦点事件
onchange文本域变化事件
onload等待...加载完毕后执行的事件
# 定时器
# 数据校验
# 省市联动

补充

# 如果某个标签已经有事件了 那么绑定会冲突