DOM高级

1.1 自定义属性操作

1.1.1 获取属性值

1. element.属性

2. element.getAttribute('属性')

   区别：

   1. element.属性：获取元素内置属性

   2. element.getAttribute('属性')：获取自定义的属性

1.1.2 设置属性值

1. element.属性 = '值'

2. element.setAttribute('属性'，'值')

   区别：

   1. element.属性 = '值'：设置内置属性值

   2. element.setAttribute('属性')：设置自定义属性值

1.1.3 移除属性值

1. element.removeAttribute('属性')

1.1.4 案例一

tab栏切换：鼠标点击上面对应的选项卡，下面内容跟着变化

1.2 节点操作

1.2.1 节点概述

1. 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

2. DOM 树中的所有节点均可被创建、修改、删除。

   

1.2.2 节点层级

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

1.2.3 父级节点

1. node.parentNode

   1. node.parentNode可以返回某节点的父节点，注意是最近的一个父节点

   2. 如果指定的节点没有父节点则返回null

  

    

      
×
    
  
  

1.2.4 子节点

1. 获取所有子节点

   1. parentNode.childNodes

   2. 会返回所有子节点，包括元素节点，和文本节点，不使用

2. 子元素节点

   1. parentNode.children

   2. 是 一个只读属性，值返回子元素节点，其余像文本节点不返回。我们要使用的就是这个

  
我是div
  我是span
  

    
我是li1
    
我是li2
    
我是li3
    
我是li4
  
  

获取第一个、最后一个子元素节点

1. 获取第一个子元素节点：parentNode.children[0]

2. 获取最后一个子元素节点：parentNode.children[ul.children.length - 1]

console.log(parentNode.children[0].innerHTML);
console.log(parentNode.children[ul.children.length - 1].innerHTML);

1.2.5 兄弟节点

1. 下一个兄弟元素节点

   1. node.nextElementSibling

   2. 返回当前元素的下一个兄弟元素节点，没有则返回null

2. 上一个兄弟元素节点

   1. node.previousElementSibling

   2. 返回当前元素的上一个兄弟元素节点，没有则返回null

  
我是div1
  我是span2
  
我是div3

  

1.2.6 创建节点

1. 动态创建元素节点

   1. document.createElement('标签名' );

1.2.7 添加节点

1. node.appendChild(child)

   1. 将一个child节点添加到父节点的子节点列表末尾，类似于css的after伪元素

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

   1. 将一个child节点添加到父节点的指定子节点前面，类似于css的before伪元素

  

    
我是一个li节点2
  

  

1.2.8 删除节点

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

  删除
  

    
熊大
    
熊二
    
光头强
  

  

1.2.9 案例二

发布留言，删除留言，并做非null判断

  
  发布
  

  

1.2.10 创建元素的三种方式(了解)

1.3.2 监听注册方式

   最终，w3c 采用折中的方式，平息了战火，制定了统一的标准 —--— 先捕获再冒泡。

   现代浏览器都遵循了此标准，所以当事件发生时，会经历3个阶段。

事件冒泡

• document.write()

• element.innerHTML()

• document.createElement()

  区别

  document.write()，被淘汰了，几乎不用。

  element.innerHTML()，创建多个元素效率会好一些，但是结构复杂。

  document.createElement()，创建多个元素效率稍低一些，但是结构清晰。

• document.write('
  ');
  
  document.body.innerHTML += '
  ';
  
   var div = document.createElement('div');
   div.style.width = '200px';
   div.style.height = '200px';
   div.style.border = '1px solid red';
   div.style.backgroundColor = 'blue';
   document.body.appendChild(div);

  1.3 事件高级

  1.3.1 注册事件

• 给元素添加事件，称为注册事件，也叫绑定事件

• 注册事件有两种

  1. 传统方式

     1. 利用on开头的事件，如onclick

     2. 特点：注册事件的唯一性

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

  2. 监听注册方式

     1. w3c推荐方式，addEventListener()

     2. 特点：按注册顺序依次执行

     3. 同一个元素同一个事件可以注册多个监听器

• eventTarget.addEventListener(type，listener，useCapture)

• 有三个参数

  1. type：事件类型字符串，如click、mouseover等，不要加on

  2. listener：事件处理函数

  3. useCapture：可选参数，默认false，等我们学了DOM事件流在讲解这个参数含义

• 
    传统注册事件
    方法监听注册事件
    
  

  1.3.3 删除事件

• 传统注册方式

  1. eventTarget.onclick = null

• 方法方法监听方式

  1. eventTarget.removeEventListener(type，listener，useCapture)

• 
    
  1
    
  2
    
  

  1.3.4 DOM事件流

• html中的标签都是相互嵌套的，我们可以将元素想象成一个盒子装一个盒子，document是最外面的大盒子。 当你单击一个div时，同时你也单击了div的父元素，甚至整个页面。 那么是先执行父元素的单击事件，还是先执行div的单击事件 ？？？

• 事件流

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

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

• 比如：

  1. 我们给页面中的一个div注册了单击事件，当你单击了div时，也就单击了body，单击了html，单击了document。

     

• 事件冒泡

  1. IE最早提出，事件开始是由最具体的元素接受，然后逐级向上传播到DOM最顶层节点的过程

• 事件捕获

  1. 网景最早提出，事件开始是由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接受的过程

• DOM 事件流会经历3个阶段：

• 捕获阶段

• 当前目标阶段

• 冒泡阶段

  开发我们不会去关注捕获，而是去关注事件冒泡。

  

事件冒泡

  

    
son盒子
  
  

 事件捕获

  

    
son盒子
  
  

1.3.5 事件对象

1. 什么是事件对象

   1. 事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象。

   2. 比如：

      1. 谁绑定了这个事件

      2. 鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置

      3. 键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

2. 事件对象的使用

   1. 事件触发发生时就会产生 所以，在事件处理函数中声明1个形参用来接收事件对象

  
123
  

1. e.target 和 this 的区别

• this 是事件绑定的元素，给谁绑定了事件，是就是this

• e.target 是事件触发的元素

• 
      
  
          
  a
          
  b
      
  
      
  

  1.3.6 阻止默认行为

html中一些标签有默认行为，例如a标签被单击后，默认会进行页面跳转。

    百度
    

1.3.7 阻止事件冒泡

1. 事件冒泡本身的特性，会带来的坏处，也会带来的好处。

   1. e.stopPropagation();

    

        
son儿子
    
    

1.3.8 事件委托

1. 什么是事件委托

   1. 把事情委托给别人，代为处理。

   2. 事件委托也称为事件代理，在 jQuery 里面称为事件委派。

   3. 说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

2. js事件中的代理：

   

3. 事件委托的原理

   1. 给父元素注册事件，利用事件冒泡，当子元素的事件触发，会冒泡到父元素，然后去控制相应的子元素。

4. 事件委托的作用

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

   2. 动态新创建的子元素，也拥有事件。

    
    

        
西施
        
杨玉环
        
貂蝉
        
王昭君
    
    

1.4 常用鼠标事件

1.4.1 鼠标事件对象

1.4.2 获取鼠标在页面的坐标