DOM重点核心

H5新增元素获取方式

var box = document.querySelector('选择器')
var box = document.querySelector('.box')//class选择器
var box = document.querySelector('#box')//id选择器

querySelector根据指定元素返回第一个元素对象

var box = document.querySelectorAll('.box')

querySelectorAll()返回指定选择器的所有元素对象集合

获取特殊元素

  1. 获取body元素
var bodyEle = document.body
  1. 获取HTML元素
var htmlEle = document.documentElement

常见的鼠标事件

鼠标事件 触发条件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发

innerText 和innerHTML区别

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行

区别：

  • innerText不识别html标签，非标准，去除空格和换行
  • innerHTML识别html标签，W3C标准，保留空格和换行

修改样式属性

element.style //行内样式操作
element.className //类名样式操作

注意：

  1. JS里面的样式采取驼峰命名方法，比如fontSize、backgroundColor
  2. JS修改style样式操作，产生的是行内样式，css权重比较高
  3. 如果样式修改较多，可以采取操作类名方式更改元素样式
  4. class因为是个保留字，因此使用className来操作元素类名属性
  5. className会直接更改元素的类名，会覆盖原先的类名
  6. 修改元素的className更改元素的样式时，如果想要保留原先的类名，可以采用多类名选择器
this.className = "first second"

排他思想

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>

<script>
    //1.获取所有按钮
    var btns = document.getElementsByTagName('button')
    //btn得到的是伪数组，里面的每一个元素btns[i]
    for(var i = 0 ; i < btns.length ; i++){
        btns[i].onclick = function(){
            //（1）先把所有的按钮背景颜色去掉，干掉所有人
            for(var i = 0 ; i < btns.length ; i++){
                btns[i].style.backgroundColor = ""
            }
            //（2）然后才设置当前的背景颜色，留下我自己
            this.style.backgroundColor = "yellow"
        }
    }
    //2.首先排除其他人，然后才设置自己的样式，这种排除其他人的思想称为排他思想
</script>

自定义属性的操作

1. 获取属性值

  • element.属性 获取属性值
  • element.getAttribute('属性');

区别：

  • element.属性 获取内置属性值（元素本身自带的属性）
  • element.getAttribute('属性')； 主要获得自定义的属性（标准）我们自己定义的属性

2.设置属性值

  • element.属性 = '值' 设置内置属性值
  • element.setAttribute('属性','值')； 主要针对于自定义属性（标准）

3.移除属性

  • element.removeAttribute('属性')；

H5自定义属性

  1. H5设置自定义属性

    H5规定自定义属性data-开头作为属性名并且赋值

    比如<div data-index = "1"></div>

    或者使用JS设置

    element.setAttribute('data-index',2)

  2. H5获取自定义属性

    • 兼容性获取 element.getAttribute('data-index');

    • H5新增element.dataset.index 或者 element.dataset['index'] 只能获取data-开头的 ie11才开始支持

      注：如果自定义属性里面有多个-连接的单词，获取的时候采用驼峰命名法，如data-list-name,获取 的时候就是element.dataset.listName

节点操作

  1. 父级节点
node.parentNode
  • parentNode 属性可返回某节点的父节点，返回最接近的一个父节点
  • 如果指定的节点没有父节点就返回null
  1. 子节点
parentNode.children(非标准)

parentNode.children是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。

虽然children是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用

  1. 兄弟节点
node.nextSibling

返回当前元素的下一个兄弟节点，找不到则返回null，包含所有节点

node.previousSibling

返回当前元素的上一个兄弟节点，找不到则返回null，包含所有节点

  1. 创建节点
document.createElement('tagName')
  1. 添加节点
1.node.appendChild(child)

node 父级 ， child 子级。将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。

2.node.insertBefore(child,指定元素)

将一个节点添加到指定父节点的指定子节点前面。类似于css里面的before伪元素。

  1. 删除节点
node.removeChild(child)

从DOM中删除一个子节点，返回删除的节点。

  1. 复制节点
node.cloneNode()

返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点。

注：

  1. 如果括号参数为空或者为false，则是浅拷贝，即只克隆节点本身，不可隆里面的子节点。
  2. 如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

三种动态创建元素的区别

  • document.write ()
  • element.innerHTML
  • document.createElement ()

区别

  1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。

  2. innnerHTML是将内容写入某个DOM节点，不会导致页面全部重绘

  3. innerHTML创建多个元素效率更高（不要拼接字符串，采取数组形式拼接，结构稍微复杂。

  4. createElement () 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML效率要比createElement高

注册事件（绑定事件）

注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式

  • 利用on开头的事件，onclick等
  • <button onclick = "alert('hello')"></button>
  • btn.onclick = function ()
  • 特点：注册事件的唯一性
  • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册方式

  • w3c标准 推荐方式
  • addEventListener () 它是一个方法
  • IE9之前的IE不支持此方法，可使用attachEvent ()代替
  • t特点：同一个元素同一个事件可以注册多个监听器
  • 按注册顺序依次执行

addEventListener 事件监听方式

eventTarget.addEventListener(type , listener[,useCapture])

该方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

  • type：事件类型字符串，比如click、mouseover，注意这里不要带on
  • listener：事件处理函数，事件发生时，会调用该监听函数
  • useCapture：可选参数，是一个布尔值，默认是false。

例：

btn.addEventListener('click',function(){
	alert('hello');
})
//同一个元素，同一个事件可以添加多个侦听器（事件处理程序）
btn.addEventListener('click',function(){
	alert('world');
})

attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithOn , callback)

eventTarget.attachEvent () 方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收两个参数：

  • eventNameWithOn：事件类型字符串，比如onclick、onmouseover，这里要带on
  • callback：事件处理函数，当目标触发事件时回调函数被调用

注：IE8及早期版本支持

注册事件兼容性解决方案

function addEventListener (element , eventName , fn) {
           //判断当前浏览器是否支持addEventListener方法
           if(element.addEventListener) {
               element.addEventListener(eventName , fn);//第三个参数默认是false
           } else if (element.attachEvent) {
               element.attachEvent('on' + eventName , fn);
           } else {
               //相当于element.onclick = fn
               element('on' + eventName) = fn;
           }
       }

兼容性处理的原则：首先照顾大多数浏览器，再处理特殊浏览器

删除事件

  1. 传统注册方式

    eventTarget.onclick = null;

  2. 方法监听注册方式

  • eventTarget.removeEventListener(type , listener[ , useCapture]);
element.removeEventListener('click',fn)
  • eventTarget.detachEvent(eventNameWithOn , callback);
element.detachEvent('onclick',fn)

DOM事件流

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流

DOM事件流分为3个阶段：

  1. 捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段

注意

  1. JS代码中只能执行捕获或者冒泡其中的一个阶段

  2. onclick和attachEvent只能得到冒泡阶段

  3. addEventListener(type,listener[ , useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

  4. 实际开发中很少使用事件捕获，更关注事件冒泡

  5. 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

  6. 事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事情

事件对象

eventTarget.onclick = function(event){}
eventTarget.addEventListener('click',function(event)){}
//event就是事件对象

​ 官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

​ 简单解释：事件发生后，跟事件相关想一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

比如：

  1. 谁绑定了这个事件。
  2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置。

注：这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去

当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）

事件对象兼容性问题

  1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到
  2. 在IE6~8中，浏览器不会给方法传递参数，如果需要的话，需要到window.event中获取查找

解决

e = e || window.event

事件对象的常见属性和方法

事件对象属性方法 说明
e.target 返回触发事件的对象 标准
e.srcElement 返回触发事件的对象 非标准ie6-8使用
e.type 返回事件的类型 比如click mouseover 不带on
e.cancelBubble 该属性阻止冒泡 非标准ie6-8使用
e.returnValue 该属性阻止默认事件（默认行为） 非标准 ie6-8使用 比如不让链接跳转
e.preventDefault() 该方法阻止默认事件（默认行为） 标准 比如不让链接跳转
e.stopPropagation() 阻止冒泡 标准

e.target与this 的区别

  1. e.target 返回的是触发事件的对象（元素）

  2. this返回的是绑定事件的对象

    例：例如点击一个li标签，事件绑定的是ul标签，那么this指向ul，e.target指向点击的那个对象，谁触发了这个事件，点击的是li，e.target指向的就是li

事件委托（代理、委派）

事件委托的原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。（利用事件冒泡的优点）

例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，时间会冒泡到ul上，ul有注册事件，就会触发事件监听器。

事件委托的作用

只操作了一次DOM，提高了程序的性能

常用的鼠标事件

 //1.contextmenu禁用右键菜单
 document.addEventListener('contextmenu',function(e){
 e.preventDefault();
 })
 //2.禁止选中文字 selectstart
 document.addEventListener('selectstart',function(e){
 e.preventDefault();
 })

鼠标事件对象

鼠标事件对象 说明
e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标

常用的键盘事件

键盘事件 触发条件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时触发 但是它不识别功能键，比如ctrl shift 箭头等

注：三个事件的执行顺序是：keydown -- keypress -- keyup

键盘事件对象

键盘事件对象 属性 说明
keyCode 返回该键的ASCII值

注：onkeydown 和 onkeyup不区分字母大小写，onkeypress区分字母大小写

posted @ 2020-09-01 15:35  actorhuang  阅读(211)  评论(0)  编辑  收藏  举报