DOM

Posted fengzi759

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM相关的知识，希望对你有一定的参考价值。

  1. DOM简介

    • 1.1什么是DOM:

      • 文档对象模型(简称DOM)，是W3C组织推荐的处理可扩展标记语言(html或XML)的标准编程接口

      • W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式

    • 1.2DOM树

      • 文档：一个页面就是一个文档，DOM中使用document表示

      • 元素: 页面中的所有标签都是元素，DOM中使用element表示

      • 节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示

  2. 获取元素

    • 2.1如何获取页面元素

      • DOM在我们实际开发中主要用来操作元素

      • 获取页面中的元素可以使用以下几种方式

        • 根据ID获取

        • 根据标签名获取

        • 通过HTML5新增的方法获取

        • 特殊元素获取

    • 2.2根据ID获取

      • 使用document.getElementById()方法可以获取带有ID的元素对象

        • + < div id =‘time‘>2019-9-9< /div>
+ < script>
+ 1.//因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
+ 2.//get 获取  element 元素  by通过  驼峰命名法
+ 3.参数id 是大小写敏感的字符串
+ 4.返回的是一个元素对象
+ 5console.dir 打印我们返回的元素对象，更好的查看里面的属性和方法
+ var timer = document.getElementById(‘time‘)
+ console.dir(timer)
+ < /script>

    • 2.3根据标签名获取

      • 使用document.getElementsByTagName()方法可以返回带有指定标签名的对象的集合

        • + 1.//返回的是 获取过来元素对象的集合，以伪元素的形式存储的
+ var lis= document.getElementsByTagName(‘li‘)
+ 2.//打印里面的元素对象我们可以采取遍历的方式    得到元素对象是动态的
+ for (var i = 0;i<lis.length;i++){
+ console.log(lis[i])
+ }
+ 3.element.getElementsByTagName() 可以得到这个元素里面的某些标签
  + < ul id = ‘nav‘>
  + < li>aaa< /li>
  + < li>aaa< /li>
  + < li>aaa< /li>
  + < /ul>
  + 我们可以先获取ul元素 在获取ul里面的li元素
  + var nav = document.getElementById(‘nav‘)  //这个获得nav元素
  + var navLis = nav.getElementByTagName(‘li‘)  //获取ul里面的li标签

    • 2.4通过HTML5新增的方法获取

      • + 1.document.getElementsByClassName(‘类名‘);//根据类名返回元素对象集合
  + 返回的也是一个伪数组
+ 2.document.querySelector(‘选择器‘) ；//根据指定选择器返回第一个元素对象
  + 里面的选择器需要加符号 .box  #nav
  + document.querySelector(‘.box‘); 选择class名为box的选择器 第一个元素
+ 3.document.querySelectorAll(‘选择器‘) //根据指定选择器返回所有元素对象集合
  + document.querySelectorAll(‘#nav‘)

    • 2.5获取特殊元素(body,html)

      • + 1.获取body元素
  + var bodyEle = document.body
  + console.log(bodyEle)
+ 2.获取html元素
  + var htmlEle = document.documentElement
  + console.log(htmlEle )

  3. 事件基础

    • 3.1事件概述

      • javascript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

      • 简单理解： 触发--响应机制

      • 网页中的每个元素都可以产生某些可以触发JS的事件。例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作

      • 1.事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素

        • 1 + < button id = ‘btn‘> 唐伯虎< /button>
2 + 1.1事件源  事件被触发的对象    谁
3   + var  btn = document.getElementById(‘btn‘);
4 + 2.1事件类型  如何触发  什么事件 比如鼠标点击(onclick) 还是鼠标经过，还是键盘按下
5 + 3.1事件处理程序 通过一个函数赋值的方式 完成
6   + btn.onclick = function(){
7   + alert(‘点秋香‘)
8   + }

    • 3.2执行事件步骤

      • + < div>123< /div>
+ 1.获取事件源
  + var div = document.getElementsByTagName(‘div‘)[0]
+ 2.注册事件(绑定事件)
+ 3.添加事件处理程序(采取函数赋值形式)
  + div.onclick = function(){
  + console.log(‘我被选中了‘)
  + }

    • 3.3常见的鼠标事件

 

 

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

    1. 操作元素

      • 3.4操作元素

        • JS的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

        • 1.改变元素内容

        • element.innerText
          ?
          + 从起始位置到终止位置的内容，但它除去html标签，同时空格和换行也会去掉
+ 示例代码如下
  + < button> 显示当前系统时间< /button>
  + < div>某个时间 < /div>
  + //当我们点击了按钮，div里面的文字会发生变化
  + //1.获取元素
    + var btn = document.querySelector(‘button‘)
    + var div = document.querySelector(‘div‘)
  + //2.注册事件
  + //3.添加事件处理 程序
    + btn.onclick = function (){
    + div.innerText = new Date()
    + }

        • element.innerHTML

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

        • innerText 和 innerHTML的区别：

          • 1.innerText 不识别html标签 非标签 去除空格和换行

          • 2.innerHTML 识别html标签 W3C标签 保留空格和换行的

          • 这两个属性是可读写的，可以获取元素里面的内容

        • 2常用元素的属性操作

        • 修改元素属性 src href alt title

          • + < button id = "ldh"> 刘德华< /button>
+ < button id = "zxy"> 张学友< /button>
+ <img src = "images/ldh.jpg"  >
+ 1.获取元素
  + var ldh = document.getElementById(‘ldh‘)
  + var zxy= document.getElementById(‘zxy‘)
  + var img = document.quertSelector(‘img‘)
+ 2.注册事件  处理程序
  + zxy.onclick = function(){
  + img.src = ‘images/zxy.jpg‘
  + }
  + ldh .onclick = function(){
  + img.src = ‘images/ldh.jpg‘
  + }

        • 3.表单元素的属性操作

        • 利用DOM可以操作如下表单元素的属性：

          • type、value、checked、selected、disabled

          • 示例如下

            • + < button> 按钮< buttom>
+ < input type="text" value = "输入内容">
+ 1.获取元素
  + var btn =  document.querySelector(‘button‘)
  + var input = document.querySelector(‘input‘)
+ 2.注册事件 处理程序
  + btn.onclick = function(){
  + input.value = ‘被点击了‘
  + //如果想要某个表单被禁用，不能再点击  disabled 我们想要button禁用
  + btn.disabled = true;  等价于
  + this.disabled = true;  //this指向的是事件函数的调用者 btn
  + }

        • 4.样式属性操作

        • 我们可以通过JS修改元素的大小、颜色、位置等

          • 1.element.style 行内样式操作 如果样式比较少 或者功能简单的情况下使用

          • 2.element.className 类名样式操作

          • 示例如下

            • + < div> </ div>
+ //1.获取元素
  + var div = document.querySelector(‘div‘)
+ //2.注册事件  处理程序
+ div.onclick = function(){
+ //div.style   里面的属性采取驼峰命名法
+ this.style.backgroundColor = ‘purple‘
+ this.style.width = ‘250px‘
+ }

          • 注意：

            • JS里面的样式采取驼峰命名法 比如fontSize, backgroundColor

            • JS修改 style样式操作 产生的是行内样式，css权重比较高

          • 2.element.className 的用法

            • + .change{
+ color : #ccc;
+ }
+ < div> 123< / div>
+ #想要div拥有颜色为#ccc这个属性，我们可以通过className修改div的类名从而获得#ccc这个属性
+ var div = document.querySelector(‘div‘)
+ div.onclick = function(){
+ this.className = ‘change‘
+ }

          • 注意：

            • 1.如果样式修改较多，可以采取操作类型方法更改元素样式

            • 2.class因为是个保留字，因此使用className来操作元素类名属性

            • 3.className 会直接更改元素的类名，会覆盖原先的类名

            • 4.如果想要保留 原先的类名，我们可以这么做 多类名选择器

              • this.className = ‘first change‘

      • 排他思想

        • 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：

        • 1.所有元素全部清除样式(干掉其他人)

        • 2.给当前元素设置样式(留下我们自己)

        • 3.注意顺序不能颠倒，首先干掉其他人，再设置自己

        • 示例代码如下

          • + < button>按钮1 </ button>
+ < button>按钮2 </ button>
+ < button>按钮3 </ button>
+ < button>按钮4 </ button>
+ < button>按钮5 </ button>
+ //1.获取所有元素
  + var  btns = document.getElementsByTagName = (‘button‘)
  + //btns得到是伪数组， 里面的每一个元素 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) 然后才让当前的元素背景颜色为pink  留下我自己
  + •      this.style.backgroundColor  = ‘pink‘
  + }
  + }
  + //2. 首先先排除其他人，然后才设置自己的样式，这种排除其他人的思想我们称为排他思想
             

      • 自定义属性的操作

        • 1.获取属性值

        • + element.属性  获取属性值
+ element.getAttribute(‘属性‘)
  + 示例代码
  + <  div id = ‘demo‘> <  /demo>
  + 获取id属性里面的值
    + var div = document.querySelector(‘div‘)
    + div.getAttribute(‘id‘)  //返回demo

        • 区别：

        • element.属性 获取内置属性值(元素本身自带的属性)

        • element.getAttribute(‘属性‘); //注意获得自定义的属性(标准) 我们程序员自定义的属性

        • 2.设置属性值

        • element.属性 = ‘值’ 设置内置属性值

        • element.setAttribute(‘属性‘,‘值‘); 主要针对于自定义属性

          • 示例代码

          • + <  div id = ‘demo‘ index = ‘2‘> <  /demo>
+ 改变div里面index属性的值
  + var div = document.querySelector(‘div‘)
  + div.setAttribute(‘index‘,2)

        • 区别：

          • element.属性 设置内置属性值

          • element.setAttribute(‘属性‘,‘值‘); 主要设置自定义的属性(标准)

        • 3.移除属性

        • element.removeAttribute(‘属性‘)

          • 示例代码

          • + <  div id = ‘demo‘ index = ‘2‘> <  /div>
+ 移除div里面index属性的值
  + var div = document.querySelector(‘div‘)
  + div.removeAttribute(‘index‘)

      • H5自定义属性

        • 自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中

        • 自定义属性获取是通过getAttribute(‘属性‘) 获取。

        • 但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

        • H5给我们新增了自定义属性：

        • 1.设置H5自定义属性：

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

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

            • 或者通过JS设置

              • element.setAttribute(‘data-index‘,2)

        • 2.获取H5自定义属性：

          • 1.兼容性获取 element.getAttribute(‘data-index‘)

          • 2.H5新增 element.dataset.index或者 element.dataset[‘index‘] ie11才支持

            • 只能获取 data-开头的

            • dataset是一个集合里面存放了所有以data开头的自定义属性

            • 示例代码

              • + 比如< div data-index-name = "1"> < /div>
+ var div = document.querySelector(‘div‘)
+ //如果自定义属性里面有多个-链接的单词，我们获取的时候采取驼峰命名法
+ div.dataset.indexName  //返回1
+ 或者 div.dataset[‘indexName‘]  //返回1

    1. 节点操作

      • 1.为什么学节点操作

        • 获取元素通常使用两种方式

        • 1.利用DOM提供的方法获取元素

          • document.getElementById()等

          • 逻辑性不强 、繁琐

        • 2.利用节点层级关系获取元素

          • 利用父子兄节点关系获取元素

          • 逻辑性强，但是兼容性稍差

        • 节点概述

        • 网页中的所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node来表示，HTML DOM树中的所有节点均可通过JS进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除

        • 一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性

          • 元素节点 nodeType 为1

          • 属性节点 nodeType 为2

          • 文本节点 nodeType 为3 (文本节点包含文字、空格、换行等)

          • 我们在实际开发中，节点操作主要操作的是元素节点

      • 节点操作

        • 1.节点层级

        • 利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

    • 1父节点 parentNode

      • 示例代码如下

      • < div class=‘box‘> 
   + < span class = ‘erweima‘>x < /span>
  + < /div>
  + var erweima = document.querySelect(‘.erweima‘)
  + 获取box   var box = document.querySelector(‘.box‘) 等价于
  + erweima.parentNode  得到的是离元素最近的父节点  如果找不到父节点就返回Null

         

      • 2子节点 parentNode.childNodes(标准)

        • parentNode.childNodes返回包含指定节点的子节点的集合，该集合为即时更新的集合

          • 示例代码如下

          •    < ul> 
    + < li>132< /li>
    + < /ul>
    + var ul = document.querySelector(‘ul‘)
    +  ul.childNodes//  得到ul里面的li    
    + 但是childNodes 包含所有的节点，包含元素节点  文本节点等等
    + 如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes

        parentNode.children(非标准)

        • parentNode.children 是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回(这个是我们重点掌握的)

        • 虽然children 人是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用 示例代码如下

          • + < ul> 
+ < li>132< /li>
+ < /ul>
+ var ul = document.querySelector(‘ul‘)
+ ul.children  获取所有的子元素节点li，也是我们实际开发常用的
             

        parentNode.firstChild

        • firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点

        • 不管是文本节点还是元素节点

        parentNode.lastChild

        • lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

        parentNode.firstElementChild

        • firstElementChild返回第一个子元素节点，找不到返回null

        parentNode.lastElementChild

        • lastElementChild返回第一个子元素节点，找不到返回null

        • 这两个方法有兼容性问题，IE9以上才支持

        实际开发的写法 既没有兼容性问题又返回第一个子元素 示例代码如下

      • + < ul> 
+ < li>132< /li>
+ < li>132< /li>
+ < li>132< /li>
+ < /ul>
+ var ul = document.querySelector(‘ul‘)
+ #获取第一个li
  + ul.children[0]
+ 获取最后一个li
  + ul.children[ul.children.length -1]

         

         

    • .兄弟节点

      • 1.node.nextSibling

      • nextSibling 返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点

      • 示例如下

        • < div>我是div< /div>
    + < span> 我是span < /span>
    + var div = document.querySelector(‘div‘)
    + console.log(div.nextSibling) #返回的是文本节点

           

           

      • 2.node.previousSibling

      • previousSibling返回当前元素的上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点 元素节点或者文本节点等

      • 3.node.nextElementSibling

      • nextElementSibling 返回当前元素的下一个兄弟节点，找不到则返回null

      • 示例代码如下

        • + < div>我是div< /div>
+ < span> 我是span < /span>
+ var div = document.querySelector(‘div‘)
+ console.log(div.nextSibling) #返回的是span标签

           

      • 4.node.previousElementSibling

      • previousElementSibling返回当前元素的上一个兄弟节点，找不到则返回null。

      • 4.创建节点

      • + document.createElement(‘tagName‘)
 + document.createElement()方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点 
+ //创建一个li
+ var li = document.createElement(‘li‘)

         

      • 5.添加节点

      • 1.node.appendChild(child)

      • node.appendChild()方法将一个节点添加到指定父节点的子节点列表的末尾，后面追加元素，类似于css里面after伪元素

        • 示例代码如下

        • < ul>< /ul>
      + 1.#创建节点
      + var li = document.createElement(‘li‘)
      + 2.添加节点 node.appendChild(child)  node父级  child 是子级
      + var  ul = document.querySelector(‘ul‘)
      + ul.appendChild(li)

           

           

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

        • node.insertBefore()方法将一个节点添加到指定父节点的子节点列表的前面。类似于css里面的before元素 示例代码如下

          1. + < ul>
  + < li>123< /li>
+ < /ul>
+ 1.#创建节点
  + var li = document.createElement(‘li‘)
+ 2.添加节点 node.insertBefore(child,指定元素)
  + ul.insertBefore(li,ul.children[0])   在li的前面添加元素

             

             

        • 3.我们想要页面添加一个新的元素：

          • 1.创建元素 2.添加元素

      • 6删除节点

      • node.removeChild(child)

      • node.removeChild()方法从DOM中删除一个子节点，返回删除的节点

      •    < ul>
  + < li>123< /li>
  + < li>234< /li>
  + < /ul>
  + //1.获取元素 
    + var ul = document.querySelector(‘ul‘)
  + //2.删除元素
    + ul.removeChild(ul.children[0]) #将第一个li删除了

         

         

      • 7.复制节点(克隆节点)

      • node.cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点

        • + 示例代码如下
+ < ul>
  + < li>123< /li>
  + < li>234< /li>
+ < /ul>
+ //1.获取元素 
  + var ul = document.querySelector(‘ul‘)
+ //2.克隆节点
  + var li = ul.children[0].cloneNode()
+ //3.添加节点
  + ul.appendChild(li)

           

           

        • 注意：

          • 如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点(内容)

          • 如果node.cloneNode(true) 则是深拷贝，会复制节点本身以及里面所有的子节点(内容)

      • 8.三种动态创建元素区别

      • + document.write()
          + 用法：document.write(‘< div>123< /div>‘) 如果页面文档流加载完毕，再调用这句话会导致页面重绘
        + document.innerHTML
        + document.createElement()

      • 区别：

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

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

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

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

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

    1. DOM重点核心

      • 关于dom操作,我们注意针对于元素的操作,主要有创建,增、删、改、查、属性操作、事件操作

      • 1.创建

        • document.write()

        • document.innerHTML

        • document.createElement()

      • 2.增

        • appendChild

        • insertBefore

      • 3.删

        • removeChild

      • 4.改

        • 主要修改dom的元素属性，dom元素的内容、属性，表单的值等

        • 1.修改元素的属性: src、href、title等

        • 2.修改普通元素内容：innerHTML、innerText

        • 3.修改表单元素：value、type、disabled等

        • 4.修改元素样式：style、className

      • 查

        • 主要获取查询dom的元素

        • 1.DOM提供的API方法：getElementById,getElementsByTagName 古老不太推荐

        • 2.H5新增的新方法：querySelector、querySelectorAll提倡

        • 3.利用节点操作获取元素:父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)提倡

      • 属性操作

        • 主要针对于自定义属性

        • 1.setAttribute:设置dom的属性值

        • 2.getAttribute：得到dom的属性值

        • 3.removeAttribute移除属性

      • 事件操作

        • 给元素注册事件、采取 事件源.事件类型 = 事件处理程序

    1. 事件高级

      • 1.注册事件(绑定事件)

        • 注册事件概述

        • 给元素添加事件，称为注册事件或者绑定事件

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

        • 传统注册方式

        • 利用on开头的事件 onclick

        • < button onclick = ‘alert(hi~)‘>< /button>

        • btn.onclick = function(){}

        • 特定：注册事件的唯一性

        • 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

        • 方法监听注册方式

        • w3c标准 推荐方式

        • addEventListener()它是一个方法

        • IE9之前的IE不支持此方法，可使用attachEvent()代替

        • 特点：同一个元素同一个事件可以注册多个监听器

        • addEventListener事件监听方式

          • eventTarget.addEventListener(type,listener[,userCapture])

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

          • 该方法接受三个参数：

            • type: 事件类型字符串，比如click、mouseover，注意这里不要带on

            • listener：事件处理函数，事件发生时，会调用该监听函数

            • userCapture: 可选参数，是一个布尔值，默认是false。学完DOM事件流后，我们再进一步学习

          • 示例代码如下

            • + < button>方法监听注册< /button>
+ var  btns = document.querySelector(‘button‘)
+ btns.addEventListener(‘click‘,function(){  里面的事件类型是字符串要加引号
+ alert(22)
+ })
+ btns.addEventListener(‘click‘,function(){
+ alert(33)
+ })
+ 会弹出22和33
+ 第二种写法
+ fucntion fn(){
+ alert(22)
+ }
+ btns.addEventListener(‘click‘,fn)

               

               

        • attachEvent事件监听方式(了解) IE9以前的版本支持 其他浏览器不支持

        • eventTarget.attachEvent(eventNameWithOn,callback)

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

          • 该方法接受两个参数：

            • eventNameWithOn:事件类型字符串,比如onclick,onmouseover,这里要带on

            • callback:事件处理函数，当目标触发事件时回调函数被调用

          • 示例代码如下

            • + < button>方法监听注册< /button>
+ var  btns = document.querySelector(‘button‘)
+ btns.attachEvent(‘onclick‘,function(){
+ alert(11)
+ })

               

      • 2.删除事件(解绑事件)

        • 删除事件的方式

        • 1.传统删除方式

          • eventTarget.onclick = null;

        • 2.方法监听删除方式

          • 2.1eventTarget.removeEventListener(type,listener[,userCapture])

          • 示例代码如下

            • + fucntion fn(){
+ alert(22)
+ btns.removeEventListener(‘click‘,fn)
+ }
+ btns.addEventListener(‘click‘,fn)

               

               

          • 2.2 eventTarget.detachEvent(eventNameWithOn,callback)

          • 示例代码如下

            • + fucntion fn(){
+ alert(22)
+ btns.detachEvent(‘onclick‘,fn)
+ }
+ btns.attachEvent(‘onclick‘,fn)

               

      • 3.DOM事件流

        • 事件流描述的是从页面中接受事件的顺序

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

        • DOM事件流分为3个阶段

        • 1.捕获阶段

        • 2.当前目标阶段

        • 3.冒泡阶段

        • 事件冒泡：IE最早提倡，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程

        • 事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐渐向下传播到最具体的元素接收的过程

        • 注意：

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

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

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

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

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

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

      • 4.事件对象（重点）

        • 事件对象概述

        • div.onclick = function(event){

        • //1.event 就是一个事件对象，写到我们监听函数里面的，小括号里面，当形参来看

        • //2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数

        • //3.事件对象 是我们事件的一系列相关数据的集合，跟事件相关的，它有很多属性和方法，比如鼠标点击里面就包含了鼠标的信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息，比如判断用户按下了那个键

        • //4. 这个事件对象我们可以自己命名 比如event、evt、e

        • //5.事件对象也有兼容性问题 ie678 通过window.event 兼容性写法 e = e||window.event

        • }

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

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

        • e.target返回的是触发事件的对象(元素)，this返回的是绑定事件的对象(元素)

          • 区别：e.target点击了哪个元素，就返回那个元素， this哪个元素绑定了这个点击事件，那么就返回谁

          • 了解， 跟this有个非常相似的属性 e.currentTarget ie678不认识

        • 我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了，而且只限于传统的注册方式

    • 5.阻止事件冒泡

      • 1.阻止事件冒泡的两种方式

        • 事件冒泡: 开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点

        • 事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握

        • 1.标准写法：利用事件对象里面的stopPropagation()方法

        • 2.非标准写法 ie6-8使用 e.cancelBubble

    • 6.事件委托(代理、委派)重点

      • 事件委托也称为事件代理，在jQuery里面称为事件委派

      • 事件委托的原理(重点)

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

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

      • 事件委托的作用

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

    • 7.常用的鼠标事件

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

      • 1.禁止鼠标右键菜单

        • contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
          ?
+ document.addEventListener(‘contextmenu‘,function(e){
+ e.preventDefault()
+ })

           

           

      • 2.禁止鼠标选中(selectstart 开始选中)

        • + document.addEventListener(‘selectstart‘,function(e){
+ e.preventDefault()
+ })

           

           

      • 鼠标事件对象

        • event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent

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

    • 8常用键盘事件

      • 事件除了使用鼠标触发，还可以使用键盘触发

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

      • 三个事件的执行顺序 keydown ---keypress --- keyup

      • 键盘事件对象

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

        • 注意：

          • onkeydown和onkeyup 不区分字母大小写，a和A得到的都是65

          • onkeypress区分字母大小写

          • 我们可以利用keycode返回的ASCII码值来判断用户按下了哪个键

          • 在我们实际开发中，我们更多的使用keydown,和keyup,它能识别所有的键(包括功能键)

以上是关于DOM的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript单行代码，也就是代码片段

实用代码片段将json数据绑定到html元素 （转）

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

JavaScript 将片段附加到DOM而不是每个节点。

前端开发常用js代码片段

将片段附加到DOM而不是每个节点。