DOM操作

一，查找标签

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

基本查找：     document.getElementById('查找的内容')       根据ID获取一个标签     document.getElementsByClassName             根据class属性获取     document.getElementsByTagName                根据标签名获取标签合集   """     如果我们的js代码需要页面上某个标签加载完毕     那么该js代码应该写在boby内部最下方或者引入外部js文件 """   间接查找     parentElement            父节点标签元素     children                 所有子标签     firstElementChild        第一个子标签元素     lastElementChild         最后一个子标签元素     nextElementSibling       下一个兄弟标签元素     previousElementSibling   上一个兄弟标签元素

 

 

二，节点操作

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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>, 网页文本不显示

 

 

三，获取值操作

?

1 2 3 4 5 6

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

　　

四，class操作

?

1 2 3 4 5

classList  查看所有的类 classList.remove(cls)  删除指定类 classList.add(cls)  添加类 classList.contains(cls)  存在返回true，否则返回false classList.toggle(cls)  存在就删除，否则添加<br><br>样式操作：<br>　　标签对象.style.属性名 = 属性值

　

 

 

 

五，事件

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

# 就是给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>

 

 

 

六，内置参数

?

1 2 3 4 5 6

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