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 仅获得所有元素节点,返回伪数组 父元素.childrenchildNode 获得所有子节点,包括文本节点(空格,换行),注释节点等
兄弟节点
下一个兄弟节点 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])
})
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
