DOM操作

一，查找标签

基本查找：
    document.getElementById('查找的内容')       根据ID获取一个标签
    document.getElementsByClassName             根据class属性获取
    document.getElementsByTagName                根据标签名获取标签合集

"""
    如果我们的js代码需要页面上某个标签加载完毕
    那么该js代码应该写在boby内部最下方或者引入外部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     #(<H>DSADAS</H>)
	不加赋值符号是获取内部标签+文本
    加了赋值符号是设置内置标签+文本
    # 可以识别HTML标签   # 识别<h>, 网页文本不显示

 

 

三，获取值操作

# 普通的文本数据获取
	标签对象.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指代的就是当前被操作对象本身
在事件的函数体代码内部使用
	btnEle.onclick = function () {
            alert(456)
            console.log(this)
        }