前端开发之事件绑定-CFANZ编程社区

#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   #上一个兄弟标签元素

#节点操作
"""
通过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)  存在就删除，否则添加

"""
事件达到某个事先设定的条件，自动触发的动作
"""
#常用绑定事件的方式
<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)
}