获取元素
根据id获取元素对象 document.getElementById('id值');
通过标签名获取指定元素 得到的是多个元素
document.getElementsByTagName('标签名 例:li');
根据类名获取元素 document.getElementsByClassName('类名');
返回指定选择器的第一个元素 #id .class lidocument.querySelector('选择器');
返回指定选择器的所有元素 document.querySelectorAll('选择器');
获取特殊元素body html
document.body 获取body对象document.documentElement 获取html对象
事件三要素
1.事件是由三部分组成: 事件源 事件类型 事件处理程序 我们也称为事件三要素
(1)事件源 事件被触发的对象 谁被触发
(2)事件类型 如何触发 什么事件 比如鼠标点击(onclick),鼠标经过,键盘按下
(3)事件处理程序 通过 一个函数赋值的方式 完成
执行事件步骤
1.获取事件源
2.注册事件(绑定事件)
3.添加事件处理程序(采用函数赋值形式)
操作元素
element.innerText:
从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去掉,不识别html标签
element.innerHTML:从起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行,识别html
标签常用元素的属性操作
1.src href
2.id alt title
操作表单元素type value
操作元素样式 大小 颜色
1.this.style.width 采用驼峰命名
2.先在css写好类属性样式 然后使用this.className='类名'
排他思想
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法思想
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式(留下自己)
3.顺序不能颠倒 先排除其他人(清除所有元素样式) 再留下自己
获取属性值
element.属性 (获取内置属性的值)
element.getAttribute("属性”) (获取自定义属性的值)
设置属性值
element.属性 = 值
element.setAttribute("属性”,‘值’)
移除属性
element.removeAttribute(‘属性’)
设置自定义属性以data-自定义属性 来区别
节点操作
1.node.parentNode 获取父元素节点
1.parentNode 属性可返回某节点的父节点,注意是最近的一个父节点;
2.如果指定节点没有父节点则返回null;
2.获取子元素节点
parentNode.children
parentNode.children 是一个只读属性,返回所有的子元素节点,只返回子元素节点,其余节点不返回;
3.第一个子元素节点
parentNode.firstElementChild;
firstElementChild返回第一个子元素节点,找不到则返回null;
也可以使用parentNode.children[0](没有兼容性问题);
4.第一个子元素节点
parentNode.firstElementChild;
firstElementChild返回第一个子元素节点,找不到则返回null;
也可以使用parentNode.children[0](没有兼容性问题);
5.下一个兄弟元素节点(有兼容性)
node.nextElementSibling;
nextElementSibling 返回当前元素的下一个兄弟节点,找不到返回null;
6.上一个兄弟元素节点(有兼容性)
node.reviousElementSIbling;
previousElementSibling 返回当前元素的上一个兄弟节点,找不到则返回null;
7.创建节点
document.creatElement('tagName');
document.creatElement() 方法有tagName 指定的HTML元素,由于这些元素原来并不存在,根据我们的需求动态生成的,因此也被称为动态创建元素节点;
8.添加节点
1.node.appendChild(child);
node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾;
2.node.insertBefore() ;
node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面;
9.删除节点
node.removeChild(child);
node.removeChild() 方法从node节点中删除一个子节点,返回删除的节点;
10 删除节点
node.removeChild(child);
node.removeChild() 方法从node节点中删除一个子节点,返回删除的节点;
11 复制节点
node.cloneNode();
node.cloneNode() 方法返回调用该方法的节点的一个副本,也称为克隆节点/拷贝节点;
注意:
1.如果括号里边参数为空或者为false,则是浅拷贝,只克隆节点本身,不克隆里面的子节点;
2.如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点;
事件高级
注册事件两种方式
给元素添加事件,称为注册事件或者绑定事件。
注册事件有两种方式:传统方式 和 方法监听 注册方式。
传统注册方式
利用 on 开头的事件 onclick
特点:
1、注册事件的唯一性
2、同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面注册的处理函数
2 方法监听注册方式
1、w3c 标准 推荐方式
2、addEventListener() 是一个方法
3、IE9 之前的 IE 不支持此方法,可使用 attachEvent() 代替
4、特点:
(1)同一个元素同一个事件可以注册多个监听器
(2)按注册顺序依次执行
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。
该方法接收3个参数:
type:事件类型字符串,比如 click 、mouseover ,注意这里不要带 on
listener:事件处理函数,事件发生时,会调用该监听函数
useCapture:可选参数,是一个布尔值,默认是 false。
删除事件(解绑事件)
<script>
var divs = document.querySelectorAll('div');
divs[0].onclick = function() {
alert(11);
// 1. 传统方式删除事件
divs[0].onclick = null;
}
// 2. removeEventListener 删除事件
// 里面的fn 不需要调用加小括号 【经测试,可以把整个fn函数写进来。】
divs[1].addEventListener('click', fn)
function fn() {
alert(22);
divs[1].removeEventListener('click', fn);
}
// 另外一种写法
divs[1].addEventListener('click', function fn() {
alert(22)
this.removeEventListener('click', fn)
})
// 3. detachEvent
divs[2].attachEvent('onclick', fn1);
function fn1() {
alert(33);
divs[2].detachEvent('onclick', fn1);
}
</script>
DOM事件流
html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。
当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。
比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。
DOM 事件流会经历3个阶段:
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
我们向水里面扔一块石头,首先它会有一个下降的过程,这个过程就可以理解为从最顶层向事件发生的最具体元素(目标点)的捕获过程;之后会产生泡泡,会在最低点( 最具体元素)之后漂浮到水面上,这个过程相当于事件冒泡。
事件对象
什么是事件对象
事件对象是系统自动创建的,我们只需接收就好
div.onclick = function(e){
//里面e就是事件对象 我们直接使用就可以了 前提是必须有事件
}
2、事件对象的type属性
type 返回要触发的事件类型,比如:触发的是点击事件就返回onclick
但是注意事件类型不加 on
比如 : click mouseover …
3、e.target 与this 差别
1、target: 是触发事件的对象(元素) 例如:给ul 绑定点击事件 我们点击里面的li 就返回所点击的li
2、this返回的是绑定事件的对象 而this 返回的就是事件绑定本身 ul
4、阻止默认行为e.preventDefault()
一、什么是默认行为
默认行为是指html标签自带的默认行为,比如a标签的默认跳转,button标签的默认提交
阻止默认行为就是让链接不跳转 让button标签不提交等
阻止默认行为两种方式
e.preventDefault()
return false 用于传统事件注册方式
阻止事件冒泡
1、e.stopPropagation();
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(它就执行了超链接的跳转)
2.return false;
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转)
事件委托
原理:不要单独给子元素设置事件,而是给父元素设置事件 利用冒泡点击子元素事件会传给父元素
然后e.target 获取点击的元素 就可以不用for循环给每个子元素都添加事件 提高了性能
鼠标事件
mouseover和mouseout
当鼠标进入元素区域内触发和离开元素区域内触发
这两个事件是冒泡的,就是当前事件会冒泡给父元素,一层一层冒泡
mouseenter和mouseleave
与mouseover和mouseout效果一致,但是这两个事件不冒泡
2.鼠标坐标
e.clientX 可视化窗口x坐标
e.clientY 可视化窗口y坐标
e.pageX 相对整个页面的x坐标
e.pageY 相对整个页面的y坐标
键盘事件
2.键盘事件对象