目录
一、获取元素
getElementByld() 方法获取带有ID的元素对象:返回的是一个元素对象
- 因为我们的文档页面从上往下加载,先得有标签,故script写到标签下面
- 方法名遵循:驼峰命名法
- 参数 id 是大小写敏感的字符串要加 ''
- console.dir() 方法打印我们返回的元素对象 更好的查看里面的属性和方法
let ol = document.getElementById('ol');
getElementsByTagName() 方法可以返回带有指定标签名的对象集合:返回的是获取过来元素对象的集合,以伪数组的形式储存的
- 想要依次打印元素对象可以才有 for 循环遍历
- 若页面中只有一个要获取的标签 返回的还是伪数组,若页面中没有要找的标签则返回长度为0的伪数组
// 若题目有ul,ol,li 我们想要获取ol中的li可以通过以下方式
let ol = document.getElementsByTagName('ol');
console.log(ol[0].getElementsByTagName('li'));
HTML5 新增的方法获取:
document.getElementsByClassName('类名'); // 根据类名返回元素对象集合</li>
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象</li>
document.querySelectorAll('选择器'); // 根据指定选择器返回所有元素对象
// 选择器需要加符号:.box(类选择器) #nav(ID选择器)
获取 body 元素:document.body;
获取 html 元素:document.documentElement;
二、事件基础
事件是由以下三部分组成 事件三要素
- 事件源:事件被触发的对象 谁 按钮
- 事件类型:如何触发 什么事件 比如鼠标点击(onclick) 鼠标经过 键盘按下
- 事件处理程序:通过一个函数赋值的方式完成
let btn = document.getElementById('btn');
btn.onclick = function() {alert('xxx');}
三、操作元素
修改元素内容:
element.innerText : 从起始位置到终止位置的内容,但他不识别 html 标签,同时空格和换行也会去掉
element.innerHTML : 起始位置到终止位置的全部内容,识别 html 标签,同时保留空格和换行
元素可以不添加事件
// 现有一个p标签
let p = document.querySelector('p');
p.innerText = 'xxx';
修改元素属性:
假设要修改 img 中的 src 属性:
var tupian = document.getElementsByTagName('div'); // 获取元素
var img = document.getElementsByTagName('img');
tupian.onclick = function() {img.src = '修改的src路径'} // 注册事件 处理程序
修改表单属性:如 type , value , checked , selected , disabled
- 想要修改表单里的文字内容,是通过修改 value 属性来修改的,并不是 innerHTML
- 若想要某个表单被禁用,不能在点击 则用 disabled
我们想要按钮 button 被禁用可以使用:
btn.onclick = function() {
btn.disabled = true;
// 或者 this.disabled = true; (this指向的是事件函数的调用者 btn)
}
修改样式属性:如元素的大小颜色位置等样式
行内样式操作: element.style
JS里面的样式采取驼峰命名法,修改 style 样式操作,产生的是行内样式,css 权重比较高
function() {
this.style.backgroundColor = 'red';
this.style.width = '250px';
}
类名样式操作:element.className
使用 element.style 获得修改元素样式,样式比较多或者功能复杂地情况下使用,把要修改的样式单独放到一个新的类里面
funtion() {
this.className = '新类名'; //覆盖掉原类名
this.className = '原类名 新类名'; //保留了原类名还加了新类名
}
排他思想(算法):
例题:现有五个按钮,需要实现的是点击哪个按钮哪个背景颜色就改变
- 所有元素全部清除样式
- 给当前元素设置样式
- 注意不能颠倒顺序
自定义属性的操作:
获取属性值:现有div盒子,有内置属性 id="demo" ,有自定义属性 index="1"
element.属性 : 获取内置属性值(元素本身自带的属性),能获取 id 属性而不能获取 index属性
element.getAttribute('属性') : 主要获取自定义属性 ,两个属性都能获取
设置属性值:现有div盒子,有内置属性 id="demo" ,有自定义属性 index="1"
element.属性 = "值" : 重新赋值
element.getAttribute('属性','值') : 主要针对自定义属性
移除属性:element.removeAttribute(属性)
H5自定义属性:
设置H5自定义属性:
规定自定义属性 data- 开头做为属性名并且赋值如 data-index="1"
或者使用JS设置 element.setAttribute('data-index',2)
获取H5自定义属性:
element.getAttribute('data-index'); :兼容性获取
element.dataset.index 或 element.dataset['index'] : H5新增
若属性为 data-list-name 可以用 getAttribute('data-list-name') 或者 dataset.listName
四、节点操作
文本节点如回车、空格
子节点和父节点:子节点 children 获取所有的子元素节点,经常使用的,而下面这种方式比较繁琐,不经常使用。父节点 parentNode 得到最近的父级节点,找不到返回null
现有父盒子div,子盒子span ,先获取span盒子,再 .parentNode 得到父盒子 div
第一个元素和最后一个元素:以下都是取 ol 里的 li
实例:ol.fristChild 、ol.lastChild
firstChild 第一个子节点,不管是文本节点还是元素节点
lastChild 最后一个子节点,不管是文本节点还是元素节点
实例:ol.fristElementChild 、ol.lastElementChild
fristElementChild 第一个子元素节点,lastElementChild 最后一个主元素节点
实例:ol.children[0] 、 ol.children[ol.children.length-1]
实际开发中常用,且没有兼容性问题
兄弟节点:
nextSibling / previousSibling :下 / 上一个兄弟节点,包含元素节点或者文本节点
nextElementSibling / previousElementSibling :下 /上一个兄弟元素节点,没有兄弟返回null
创建节点:
let li = document.('li'); // 创建元素节点
// 添加节点:父级.appendChild(子级); 后面追加元素 类似于数组中的push
let ul = document.querySelector('ul');
ul.appendChild(li);
// 添加节点: 父级.insertBefore(子级,指定元素); 在指定元素前面追加元素
let lili = document.createElement('li');
ul.insertBefore(lili,ul.children[0]);
删除节点:父级.removeChild(子级)
复制节点:
node.cloneNode(); :括号参数为空或为false,为浅拷贝,只复制标签不复制内容
node.clobeNode(true); :括号参数为true,深拷贝,复制标签复制内容
let li = ul.children[0].cloneNode(true);
ul.appendChild(li);
五、注册事件(绑定事件)
addEventListener :事件监听方式,eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。
语法:eventTarget.addEventListener(type, listener[, useCapture])
- type :事件类型字符串,比如 click、mouseover ,注意这里不要带on
- listener :事件处理函数,事件发生时,会调用该监听函数
- useCapture :可选参数,是一个布尔值,默认是 false。
attachEvent(了解):事件监听方式,eventTarget.attachEvent()方法将指定的监听器注册到eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行。
语法:eventTarget.attachEvent(eventNameWithon,callback)
- eventNameWithOn :事件类型字符串,比如onclick、onmouseover,这里要带on
- callback :事件处理函数,当目标触发事件时回调函数被调用
六、删除事件(解绑事件)
七、DOM事件流
- 事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM 事件流
- JS代码中只能执行捕获或者冒泡其中的一个阶段
- onclick 和 attachEvent 只能得到冒泡阶段
- addEventListener(type,listener[,useCapture]) 第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序;如果是 false(不写默认就是alse ),表示在事件冒泡阶段调用事件处理程序。
- 实际开发中我们很少使用事件捕获,我们更关注事件冒泡
- 有些事件是没有冒泡的,比如 onblur、onfocus、onmouseenter、onmouseleave5.
八、事件对象
eventTarget.onclick = function (event) {}
eventTarget .addEventListener('click', function(event) ()) // 这个 event 就是事件对象,我们还喜欢的写成 e 或者 evt</li>
官方解释:event对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。
简单理解:事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法
event 是个形参:系统帮我们设定为事件对象,不需要传递实参,注册事件时,event对象就会被系统自动创建,并依次传递给事件监听器(事件处理函数)
事件对象也有兼容性问题 IE678 通过 window.event 兼容性的写法 e = e || window.event;
- 谁绑定了这个事件
- 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置
- 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键
target 与 this 区别
- e.target :返回的是触发事件的对象(元素),点击了哪个元素,就返回哪个元素
- this :返回的是绑定事件的对象(元素),哪个元素绑定了这个点击事件,就返回谁
九、阻止事件冒泡
要阻止哪个事件冒泡就在哪个事件添加
标准写法:e.stopPropagation()
非标准:e.cancelBubble = true;
十、事件委托(代理、委派)
原理:不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
实例:给ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 ,因为点击事件会冒泡到上ul 有注册事件,就会触发事件监听器。
事件委托的作用:我们只操作了一次DOM,提高了程序的性能
十一、常用的鼠标事件(了解)
禁止鼠标右健菜单:contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document .addEventListener('contextmenu', function(e) {e.preventDefault ();})
禁止鼠标选中:selectstart 开始选中
document.addEventlistener('selectstart', function(e) {e.preventDefault ();})
十二、跟随鼠标的天使案例
原理:
- 鼠标不断的移动,使用鼠标移动事件:mousemove
- 在页面中移动,给 document 注册事件
- 图片要移动距离,而且不占位置,我们使用绝对定位即可
- 核心:每次鼠标移动,我们都会获得最新的鼠标坐标,把这个 x 和 y 坐标做为图片的 top 和 left 值就可以移动图片
- .mousemove 只要我们鼠标移动1px 就会触发这个事件
let pic = document .querySelector( 'img');
document.addEventListener( 'mousemove',
function(e) {
var x = e .pageX;
var y = e.pageY;
pic.style.left = x + 'px';
pic.style.top = y + 'px';
})
十三、常用的键盘事件
- 键盘事件对象中的 keyCode属性可以得到相应键的 ASCII 码值
- keyup 和 keydown 事件不区分字母大小写,a 和 A 都是65
- keypress 事件区分字母大小写,a 为97,A 为65
document.addEventListener( 'keypress', function(e){console.log(e.keyCode);})