js之DOM事件基础与节点操作
- 事件
- 事件监听
- 监听其他版本
- 事件类型
- 高阶函数
- 环境对象
- 编程思想
- 排它思想
- 节点操作
- DOM节点
- 查找节点
- 增加节点
- 删除节点
事件
事件监听
事件是在编程的时候系统内发送的动作或发生的事情 (单击)
事件监听(注册事件):让程序检测是否有事件发生,一旦有事件触发,就立即调用一个函数
语法 元素.addEventListener('事件',要执行的函数)
事件类型要加引号' '
事件监听的三要素
事件源:获取的DOM元素
触发事件的方式 click input等
事件调用的函数 要做什么事
<button>点击我</button>
<script>
//1. 获取dom元素
let btn = document.querySelector('button')
//2.事件监听(绑定事件)
//事件源.addEventListener('事件',事件处理函数)
btn.addEventListener('click', function() {
alert('点击了按钮事件')
})
</script>
监听其他版本
DOM L0 事件源.on事件 = function() { }
DOM L2 事件源.addEventListener(事件, 事件处理函数)
事件类型
鼠标事件(鼠标触发)
鼠标点击 click
鼠标经过 mouseenter
鼠标离开 mouseleave
焦点事件(表单光标)
获得焦点 focus
失去焦点 blur
键盘事件(键盘触发)
Keydown 键盘按下触发
Keyup 键盘抬起触发
文本事件(表单输入)
input 用户输入
//1.获取元素
let ipt = document.querySelector('input');
//2. 事件监听 获得光标事件 focus
ipt.addEventListener('focus', function() {
console.log('获得光标');
})
//3. 失去光标 blur
ipt.addEventListener('blur', function() {
console.log('失去焦点');
})
高阶函数
函数的高级应用
js中函数可以被当作 值 来看待 (值就是js中的数值 字符串 布尔 对象)
学习路径
函数表达式
必须先声明再调用
把函数赋值给变量
回调函数
当一个函数当做参数来传递给另外一个函数的时候,这个函数就是回调函数
本质还是函数,只不过把它当作参数使用
let num = 10;
//高级函数 函数的高级应用 把函数当值来看
//函数表达式
let fn = function() {}
btn.onclick = function() {};
//回调函数 function为回调函数
setInterval(function(){
},1000)
function fns() {
console.log('我是回调函数');
}
//fn为回调函数 回调函数==>回头去调用的函数
setInterval(fns, 1000)
环境对象
函数内部特定的变量this
代表函数运行所处的环境
谁调用函数 this就是谁
直接调用函数,其实相当于是 window.函数,所以 this 指代 window
<button>点击</button>
<script>
// 环境对象 this 他就是个对象
function fn() {
console.log(this)
}
// fn()
window.fn()
let btn = document.querySelector('button')
btn.addEventListener('click', function() {
//this 指向的btn btn调用了这个函数
console.log('this', this);
})
</script>
编程思想
排它思想
当前元素状态为A状态 其他为B状态
干掉所有人(运用for循环)
复活自己(通过this或者下标找到元素)
//获取元素
let list = document.querySelectorAll('button')
for (let i = 0; i < list.length; i++) {
list[i].addEventListener('click', function() {
console.log('点击了按钮', i);
//获取含有pink类的并移除
document.querySelector('.pink').classList.remove('pink')
//给点击的加上类名
this.classList.add('pink')
})
}
节点操作
DOM节点
DOM数里边每一个内容都称为节点
节点类型
元素节点(所有的标签) 例如body,div,html是跟节点
属性节点 例如href class属性
文本节点 所有的文本
查找节点
节点关系
父节点
语法:子元素.parentNode
返回最近的父节点,没有则返回null
子节点
children 仅获得所有元素节点,返回伪数组 父元素.children
childNode 获得所有子节点,包括文本节点(空格,换行),注释节点等
兄弟节点
下一个兄弟节点 nextElementSibling 属性
上一个兄弟节点 previousElementSibling 属性
//查找元素
let son = document.querySelector('.son');
//获取父元素
//子元素.parentNode
console.log('父元素', son.parentNode);
----------------------------------------
//查找子节点 获取一个伪数组
let btn = document.querySelector('button')
let uls = document.querySelector('ul')
//事件监听
btn.addEventListener('click', function() {
console.log('点击了按钮', uls.children);
for (let i = 0; i < uls.children.length; i++) {
uls.children[i].style.color = 'red'
}
})
-------------------------------------
//查找兄弟节点
let btn = document.querySelector('button')
let lis = document.querySelector('.two')
btn.addEventListener('click', function() {
console.log('点击了按钮');
// lis.style.color = 'red'
// 下一个兄弟节点
lis.nextElementSibling.style.color = 'green';
//上一个兄弟节点
lis.previousElementSibling.style.color = 'yellow'
})
增加节点
学习路线
创建节点 let 元素名=document.createElement('标签名')
追加节点
克隆节点 元素.cloneNode(布尔值) true则克隆包括子节点,false则不包括 默认为false
<ul>
<li>我是大毛</li>
<li>我是二毛</li>
</ul>
<script>
//1.创建新的标签节点
// let div = document.createElement('div')
// let p = document.createElement('p')
let li=document.createElement('li')
li.innerHTML = '我是追加的li';
//获取元素
let ul = document.querySelector('ul');
//2. 追加节点 插入到父元素当中
//插入到父元素的最后一个子元素
// 父元素.appendChild(子元素)
// ul.appendChild(li);
//插入到父元素中某个子元素的前面
// 父元素.insertBefore(要插入的元素,在那个元素前添加)
ul.insertBefore(li, ul.children[1])
</script>
---------------------------------------------
//克隆节点
//获取元素
let ul = document.querySelector('ul');
//括号内 默认为false false不克隆后代节点
//元素.cloneNode(布尔值)
let new_ul = ul.cloneNode(true)
document.body.appendChild(new_ul)
删除节点
语法:父元素.removeChild(要删除的元素)
不存在父子关系,则无法删除
隐藏节点display:none还存在
删除节点则从html中删除
//父元素.removeChild(要删除的元素)
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
btn.addEventListener('click', function() {
console.log('点击了按钮');
ul.removeChild(ul.children[0])
})