内容概要

• DOM操作
• DOM操作之查找标签
• DOM操作之操作标签

内容详细

DOM操作之查找标签

前缀关键字>>>:document
    
# 基本查找(重点)
document.getElementById			根据ID获取一个标签
document.getElementsByClassName	 根据class属性获取
document.getElementsByTagName	 根据标签名获取标签合集

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

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

节点操作

var aEle = document.createElement('a');		# 创建标签
aEle.setAttribute('href','http://www.4399.com/')	# 设置属性
aEle.innerText = '点我开始游戏'	# 设置内容文本
document.getElementsBytagName('p')[0].appendChild(aEle)	# 动态添加
"""一定要明确当前手上是什么对象"""
imgEle.getAttribute('title')	# 获取标签属性

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

获取值操作

步骤:
    var filEle = document.getElementById('d2')
    filEle.getAttribute('value')
    filEle.value	//	filEle.files
# 普通的文本数据获取
	标签对象.value
# 特殊的文件数据获取
	标签对象.value	'''仅仅获取一个文件地址而已'''
    标签对象.files[0]	'''获取单个文件数据'''
    标签对象.files		'''获取所有文件数据'''

class操作

classList	查看所有的类
classList.remove(cls)	删除指定类
classList.add(cls)		添加类
vlassList.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(123)
        console.log(this)
    }

事件练习

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

补充

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