```python
#js中dom使用方法
"""
直接查找方法
1.id查找
2.类查找
3.标签查找
"""
#id查找
document.getElementById('id名')
#2.类查找
docunment.getElementClassName('类名')
#3.标签查找
docunment.getElementByTagName('div(类似的标签名字查找)')[索引值]
#当你用变量名指代标签对象的时候,一般情况下都推荐你书写成xxxEle
#基本查找
document.getElementById #根据ID获取一个标签
document.getElementByClassName #根据class属性获取
document.getElementByTagName #根据标签名获取标签合集
#间接查找
parentElement #父节点标签元素
children #所有子标签
firstElementChild #第一个子标签元素
lastElementChild #最后一个子标签元素
nextElemntSibling #下一个兄弟标签元素
previousElementSibing #上一个兄弟标签元素
```
```python
#节点操作
"""
通过dom操作动态的创建img标签
并且给标签加属性
最后将标签添加到文本中
"""
#案例文字后面追加一张图片,图片放在文件夹中
<div class='d1'>我是d1</div>
var d1Ele=document.getElementByclassName('d1')
#创建图片标签
var imgEle=document.creatElement('img')
imgEle.src='111.jpg'
#设置图片属性
imgEle.setAttribute('name','jason')
>>>(img src="111.jpg" name="jason")
#文字尾部追加图片
d1Ele.appendChild(imgEle)
.innerHtml:指的是文本和标签都可取出,可以识别标签
.innerText:指的是拿到文本内容,不能识别标签
#获取值操作
# 普通的文本数据获取
标签对象.value
# 特殊的文件数据获取
标签对象.value '''仅仅获取一个文件地址而已'''
标签对象.files[0] '''获取单个文件数据'''
标签对象.files '''获取所有文件数据'''
#class操作
classList 查看所有的类
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true,否则返回false
classList.toggle(cls) 存在就删除,否则添加
```
```python
"""
事件达到某个事先设定的条件,自动触发的动作
"""
#常用绑定事件的方式
<button id="d1">选我</button>
<script>
# 1.先查找标签
var btnEle = document.getElementById('d1')
# 2.绑定事件
btnEle.onclick = function () {
alert(456)
}
</script>
#内置参数this,就是当前被操作对象本身
*#在事件的函数体代码内部使用*
btnEle.onclick=function(){
alert('oho coming')
console.log(this)
}
```
前端开发之事件绑定
最新推荐文章于 2023-05-29 21:25:26 发布