JavaScript笔记 09

01 DOM操作事件的体验

02 获取元素对象的五种方式

03 事件中this指向问题

04循环绑定事件

05 DOM节点对象的常用操作

06 点亮盒子的案例

07 节点访问关系

08 设置和获取节点内容的属性

09 以上内容的小总结

01 DOM操作事件的体验

js本身是受事件驱动的脚本语言

什么是事件?

一系列状态比如: 点击事件鼠标离开事件页面加载事件

驱动: 驱使程序动起来

页面元素绑定事件的步骤:

1.获取页面元素对象

2.元素对象.on事件名称=匿名函数(js系统提供好了很多事件)

3.在匿名函数里面定义执行的功能代码

02 获取元素对象的五种方式

获取页面元素的五种方式:

1.通过id获取元素对象

var 变量=document.getElementById('元素id')

2.通过class获取元素对象返回的是一个伪数组对象

var 变量=document.getElementByClassName('标签class属性')

不能直接拿来当做节点对象操作

要想使用其中的元素对象,必须通过伪数组[索引值]

取出里面指定索引值的元素对象再践行操作

3.通过标签名获取返回值是伪数组

var 变量=document.getElementsByTagName('标签名')

4.通过选择器获取单个元素

var 变量=document.querySelector('css选择器')

只能选中单个元素

5.通过选择器获取多个元素

var 变量=document.querySelectorAll('选择器')

伪数组:

只有索引功能和length属性但是没有数组的那些常用的函数(push pop shift...)

循环遍历伪数组:

for(var i=0;i<伪数组名.length;i++){

lis[i].style.backgroundColor='red'

}

03 事件中this指向问题

事件源:

var box=document.getElementById('box');

var box=document.querySelector('#box')

console.log(box)

事件名称事件驱动函数

事件源.on事件名称=事件驱动函数(匿名函数)

box.οnclick=function(){

alert('你好')

}

在事件当中的this 指向的是当前绑定这个事件的事件源对象

也就是本次触发这个事件的事件源

总结: 谁触发了这个事件 this就指向谁

04循环绑定事件

如果页面多个元素想要绑定同一个事件并且事件代码功能也相同,

那么就可以使用循环遍历的方式绑定.

var btnArr=document.querySelectorAll('button');

console.log(btnArr);

for(var i=0;i<btnArr.length;i++){

btnArr[i].οnclick=function(){

// 这个函数是页面加载时循环给每一个按钮绑定的事件驱动函数

// 只有点击的时候才执行里面的代码

// 页面加载时只是绑定了函数

// 所以等到函数执行的时候也就是你点击的时候页面早就加载完毕了

// 页面加载完毕了也就以为这这个循环早就结束了也就是这个循环执行完了

// 那么这个 i 变量的值就已经是5了

// console.log(btnArr[i]);

// btnArr[i].style.backgroundColor='blue'

console.log(this);

this.style.backgroundColor='blue'

}

05 DOM节点对象的常用操作

操作元素的class

获取: 元素对象.className

设置: 元素对象.className='新类名1 新类名2...'

通过className属性改变标签类名会全部设置上新赋的值

如果想要原本的类名需要在赋值的时候也增加上

设置行内样式:

元素.style.css 属性名='属性值'

操作图片标签的src属性: 图片对象.src

操作元素的title属性: 元素对象.title

小总结:

对象.属性不写等号就是获取

对象.属性=值写等号就是设置/修改

06 点亮盒子的案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}nav{height: 40px;line-height: 40px;text-align: center;width: 500px;margin:50px auto;}nav>div{float: left;height: 40px;padding: 0 20px;background-color: hotpink;margin-right: 5px;cursor: pointer;color:#fff;}nav>div.current{background-color: orange;}</style>
</head>
<body><nav><div class="current">首页</div><div>商品页</div><div>购物车页</div><div >个人中心</div><div>联系我们</div></nav><script>// 排他思想// 干掉所有人 留下我自己var divArr=document.getElementsByTagName('div')// console.log(divArr);// 循环绑定鼠标移入事件   onmouseover  鼠标进入事件 只会触发一次for(var i=0;i<divArr.length;i++){// console.log(i);divArr[i].onmouseover=function(){// console.log(111);// this.style.backgroundColor='orange'// 排他思想 干掉所有人for(var i=0;i<divArr.length;i++){divArr[i].className=''}// 留下我自己this.className='current'}}</script>
</body>
</html>