事件和DOM对象

一、事件

事件的作用：为html的元素添加动作（行为）

1.1鼠标事件

鼠标单击事件   onclick

鼠标双击事件  ondbclick

鼠标滑过事件   onmousecver

鼠标移出事件   onmouseout

鼠标穿过事件

1.2表单事件

获得焦点（聚焦）事件  onfocus

失去焦点事件     onblur

内容改变事件   onchange

1.3键盘事件

键盘按下事件   onkeydown

键盘弹起事件   onkeyup

键盘按压事件   onkeypress

1.4其他事件

页面加载事件   onload

页面卸载事件   onbeforeunload

二、DOM对象

1.1 DOM对象

什么是DOM对象？

document   object  model   文档对象模型

文档  : html文档

模型 :DOM树 

DOM对象可以干什么？

可以操作html把标签的内容、属性、样式

1.2获取html的标签元素

a.通过标签的id属性值来获取元素

document.getElementBy(id属性值)

<a href="#" id="test1">百度1</a>
<script>
// 通过id的方式获取dom元素
var obj = document.getElementById('test1')
</script>

注意： 在同一个html文档中id的值不能重复

如果id值重复了。谁先出现就获取谁 

b.通过标签的类名来获取元素

document.getElementsByClassName(类名)

<a href="#" class="demo">百度2</a>
<span class="demo">span标签</span>
<script>
 // 通过class(类名的方式)获取dom元素
 var obj1 = document.getElementsByClassName('demo')
</script>

注意：获取到的是一个html元素集合

c.通过标签名称获取元素

document.getElementByTagName(标签名）

d. 通过标签的name属性来获取元素

document.getElementByName(name属性值)

 

1.3 样式修改的对象

语法： dom对象.style.css属性名=值

<script>
// 修改样式   dom对象.style.css属性名称 = 值
obj.style.color='red'
</script>

 

注意：一次只能修改一个属性值，适用于修改少量样式的时候

如果需要修改的样式比较多，不建议使用这种方法去修改，推荐使用设置类名的方式去修改

 <script>
var obj2 = document.getElementById('test2')
 obj2.className +=' yushe'
</script>    

 

1.4 内容

a. 普通标签设置内容和获取内容

dom对象.innerHTML

dom对象.innerText

b. 标签标签的内容设置和获取

dom对象.value

1.5 属性

dom对象.getAttribute(标签属性的名称)  

 <div id="con" name="mydiv">上课别<b>玩游戏</b></div>
<script>
// 通过id的方式来获取元素
        var conObj = document.getElementById('con');
    // 获取属性值
        var attr = conObj.getAttribute('name')
        console.log(attr);
</script>

  dom对象.setAttribute(标签属性的名称,值)

 <script>
// 设置属性值
 conObj.setAttribute('name','new')
</script>

 

设置图片的路径

dom对象.src

设置单选按钮和复选框选中

dom对象.checked = true // 选中