复旦学霸张立勇做的有关寺庙网站互动营销案例
目录
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>07 节点访问关系
利用节点与节点之间的关系 找到指定的元素
获取父节点对象: parentNode
获取第一个子节点:firstElementChild
获取最后一个子节点:lastElementChild
获取上一个兄弟节点:previousElementSibling
获取下一个兄弟节点:nextElementSibling
获取所有子节点:
childNodes
children(常用)
08 设置和获取节点内容的属性
元素对象.innerHtml
元素对象.innerText
获取时:
innerHTML可以获取内部所有的内容包括标签
innerText只能后去内部素有的标签内的文本内容 获取不到标签
设置时:
他们两个都能把内部的内容全部清空然后替换成我们赋值的内容
如果字符串中带有标签
那么innerHTML会把标签渲染出来呈现在页面中
innerText不会吧标签渲染出来 只会按照普通字符串的形式展示
09 以上内容的小总结
元素获取的五种方式：
1.id 2.className 3.tagName 4.querySelector("选择器") 5.querySelectorAll("选择器")
this指向问题：
构造函数中的this指向新创建的对象
普通函数中的this指向函数的调用者
元素事件驱动函数中的this指向当前触发事件的那个元素
循环绑定事件：
多个元素绑定同一个事件 通过this获取当前触发事件的那个元素对象
DOM节点的常用操作：
操作样式：
元素对象.style.css属性名=属性值
操作class:
元素对象.className=''
操作标签的其他的属性：
元素对象.src title href
点亮盒子：
排他思想
节点访问关系：
父节点 parentNode
第一个子节点：firstElementChild
最后一个子节点：lastElementChild
上一个兄弟：previousElementSibling
下一个兄弟：nextElementSibling
所有子节点：children childNodes(包括文本节点)
元素对象内容：
innerHTML
innerText