JavaScript进阶内容——DOM详解

JavaScript进阶内容——DOM详解

当我们已经熟练掌握JavaScript的语法之后，我们就该进入更深层次的学习了

首先我们思考一下：JavaScript是用来做什么的？

  • JavaScript诞生就是为了能够让它在浏览器中运行

那么DOM就是我们学习中不可或缺的一个环节，下面让我们深入了解DOM

DOM简介

DOM定义：

  • 文档对象模型（DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口

DOM作用：

  • 用来修改网页内容，结构和样式

DOM树：

  • 我们用一个图片来表示（来自B站黑马程序员Pink老师）

获得元素

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

那么如果要操作元素，最基本的就是要先获得元素：

  1. ID获得元素：

代码：

//注意这里返回的是元素对象
document.getElementById('ID');

案例展示：




    
    
    
    Document
  1. 标签名获取元素：

代码：

//注意这里返回的是元素对象集合
document.getElementsByTagName('TagName')；
//可以获得某个父元素中的全部元素对象集合
element.getElementsByTagName('TagName')；

案例展示：




    
    
    
    Document


    
    
        
  • 1
    • 
        
  • 2
    • 
        
  • 3
    • 
        
  • 4
    • 
        
  • 5
    • 
    


    
    
        
  1. 1
    2. 
        
  2. 2
    3. 
        
  3. 3
    4. 
        
  4. 4
    5. 
        
  5. 5
    6.
  1. 类名获取元素(HTML5)：

代码：

document.getElementByClassName('类名');

案例展示：




    
    
    
    Document
    


    
    

    

        
    
            
  • 
            
  •
  1. 获得特殊标签body和html元素

代码：

//body元素
document.body
//html元素
document.documentElement

案例展示：




    
    
    
    Document

事件基础

JavaScript使我们有能力创建动态页面，而事件就是被JavaScript所侦测到的行为。

页面中的每个元素都可以产生某些触发JavaScript的事件，简单来说就是产生：触发——响应机制

事件三要素

我们把事件分为三部分：

  • 事件源
    • 事件被触发的对象
  • 事件类型
    • 如何触发，例如点击onclick
  • 事件处理程序
    • 通过一个函数赋值的方法完成

我们下面给出基本格式：

name.methodName = function() {
    ~~~
    ~~~
}

我们给出一个基础案例：




    
    
    
    Document

事件类型概括

我们下面给出所有可用到的事件类型：

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

操作元素

我们学习事件的目的就是为了对元素进行修改

下面我们依次介绍一些操作元素的方法：

元素内容修改

元素内容修改有两种方法：

//element.innerText不识别HTML标签，会去除空格和换行
element.innerText = '';
//element.innerHTML识别HTML标签，不会去除空格和换行(推荐)
element.innerHTML = '';
//注意：我们可以通过上述方法来获得该元素的内容

除内容修改外，元素属性同样也可以进行修改：

//我们需要把下述图片修改放于某元素的事件中就可以进行修改
img.src = '';

案例展示：




    
    
    
    Document


    
    
时间~~~~


    






    
    
    
    Document

表单元素修改

  1. value内容修改：

    input.value = '';

  2. disabled禁用属性：

    name.disabled = true;
this.disable = true;

下面我们给出一个案例：




    
    
    
    Document

  1. 样式属性操作：

    //单个修改属性，适用于修改内容不多
this.style.属性内容 = ~~~;

  2. 样式整体属性操作：

    //CSS重新创建类属性，在元素中加入对应类，进行属性修改，适用于大幅度修改属性
this.className = '';

下面我们给出一个案例：




    
    
    
    Document

    


    

    

    
123

自定义属性

首先我们了解一下自定义属性：

  • 并非HTML自带的，但是可以在标签中写入的属性，被称为自定义属性
  • 自定义属性没有规范，可以随意任命
  • 但H5给了我们自定义属性规范：以data-开头，后面加上其他内容

然后我们讲一下获得属性值的方法：

//获得属性值（只能获得内置属性，即自身携带属性）
element.属性;
//获得属性值（可以获得所有属性，包括自定义属性）
element.getAttribute('属性');

然后我们讲一下设置属性值的方法：

//注意：下面两种方法中针对class的设置不同

//设置属性值（内置属性）
对象.属性名 = '属性值';
name.className = 'class1';
//设置属性值（所有属性）
对象.setAttribute('属性名','属性值');
name.setAttribute('class','class1');

最后我们讲一下删除属性值的方法：

//注意：大部分删除自定义属性
name.removeAttribute('属性名');

下面我们通过一个案例来解释：




    
    
    
    Document

排他思想（算法）

当我们有同一组元素，我们希望某个元素实现某种样式，就需要用到循环的排他思想：

  • 将所有元素全部清除样式
  • 给当前元素设置样式

我们给出一个案例来解释排他思想：




    
    
    
    Document

节点操作

节点操作的具体作用：

  • 用来获得元素，且具有逻辑性地获得元素

节点概述：

  • 节点操作的主要操作时元素节点操作
  • 页面内所有内容都是节点，在DOM中，节点使用node表示
  • HTML DOM中所有节点均可以通过JavaScript进行访问，所有HTML元素节点均可以被修改，也可以创建或删除

节点基本属性：

  • 节点类型nodeType
  • 节点名称nodeName
  • 节点值nodeValue

节点分类：

  • 元素节点nodeType = 1
  • 属性节点nodeType = 2
  • 文本节点nodeType = 3

节点层级

我们在使用节点时，通常利用DOM树把节点划分为不同的层级关系

  1. 父级节点
对象.parentNode
  • 得到的是元素最近的父节点
  • 如果找不到父节点，返回为null

案例展示:




    
    
    
    Document
  1. 子节点
对象.children
  • 常用，因为我们基本上只对元素进行修改
  • 获得的元素是集合，需要采用[]获得单个元素
  • 这里获得的是全部子元素节点

拓展：

对象.childrens
  • 获得的元素是集合，需要采用[]获得单个元素
  • 这里获得的是全部子节点，包括元素节点，文本节点

案例展示：




    
    
    
    Document


    
    
    
        
  • 我是li
    • 
        
  • 
        
  • 
        
  • 
        
  • 我是li
    •
  1. 第一个子元素和最后一个子元素
对象.firstChild
对象.lastChild
  • 可以获得第一个和最后一个子节点
  • 可以获得所有节点：元素节点和文本节点
对象.firstElementChild
对象.lastElementChild
  • 可以获得第一个和最后一个子元素节点
  • 只能获得元素节点
对象.children[0]
对象.children[对象.children.length - 1]
  • 实际案例常用方法
  • 因为第一个包含文本节点，第二个具有兼容性问题，所以当前常用该方法进行选择
  1. 兄弟节点
对象.nextSibling
对象.previousSibling
  • 获得下一个和上一下兄弟节点
  • 包括所有节点：元素节点和文本节点
对象.nextElementSibling
对象.previousElementSibling
  • 获得下一个和上一下兄弟元素节点
  • 只包括元素节点

节点操作

  1. 创建节点
document.createElement('tagName')
  • 创建由tagName指定的HTML元素
  • 因为元素原先不存在，是根据我们的需求动态生成的，所以称为动态创建元素节点
  1. 添加节点
node.appendChild(child)
  • 将一个节点添加到指定父节点的末尾
  1. 添加节点到指定位置
node.insertBefore(child,指定元素)
  • 将一个节点放到指定元素前面

案例展示：




    
    
    
    Document


    
    
        
  • 123
    •
  1. 删除节点
node.removeChild(child)
  • 删除指定节点
  1. 复制节点
node.cloneNode()
  • 复制某一结点
  • 括号里面为true，表示深拷贝，复制内容
  • 括号里面为空或者false，表示浅拷贝，不复制内容
  • 节点并未出现在页面，如果希望出现该节点，需要插入该节点

事件高级内容

我们在前面已经掌握了事件的基本方法，接下来我们来学习进阶内容：

注册事件概述

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

注册事件有两种方法：

  • 传统注册方法：
    • 注册事件具有唯一性
    • 同一元素同一事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数
  • 事件监听方法：
    • 注册事件可以有多个处理函数，依次执行
    • eventTarget.addEventListener(type,listener[,useCapture])
    • 该方法将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数
    • type：事件类型字符串，比如click，mouseover，注意：这里不需要带on
    • listener：事件处理函数，事件发生时，会调用该监听函数
    • useCapture：可选参数，一个布尔值，默认false；这里暂时不做讲解

代码展示：




    
    
    
    Document

删除事件概述

给元素删除事件，被称为删除事件或者解绑事件

删除事件有两种方法：

  • 传统解绑方法：
    • eventTarget.onclick = null;
  • 监听解绑方法：
    • eventTarget.removeEventListener('click',fn);
    • eventTarget是监听对象
    • 'click'是监听对象的操作
    • fn是监听对象所使用的方法

代码展示：




    
    
    
    Document
    
    


    
1

    
2

DOM事件流

事件流描述的是从页面接收事件的顺序

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

DOM事件流分为3个阶段：

  • 捕获阶段
  • 当前目标阶段
  • 冒泡阶段

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

我们通过一些代码来解释：




    
    
    
    Document
    


    

        
son

事件对象

首先我们先来介绍一下事件对象：

  • 事件对象是指 事件函数的参数
  • 它通常用e，evt，event来命名
  • 事件对象不需要传递，是系统自动生成的
  • 事件对象包含了跟事件有关的一系列信息数据，它是一个集合，包含许多属性和方法

案例展示：




    
    
    
    Document

下面我们介绍一下常见事件对象的属性和方法：

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

下面我们用代码形式分开介绍一些属性和方法：

  • e.target和this的区别：

    


    
    
    
    Document
    


    
    111
    
    
      
        
    • 1
      • 
        
    • 2
      • 
        
    • 3
      •

  • 阻止默认行为：




    
    
    
    Document


    
123

    百度
  • 阻止事件冒泡：



    
    
    
    Document
    


    

        
son

事件委托

事件委托解释：

  • 事件委托被称为时间代理，在jQuery中被称为事件委派

事件委托原理：

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

事件委托的作用：

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

案例解释：




    
    
    
    Document


    
    
        
  • 点击我弹出弹框
    • 
        
  • 点击我弹出弹框
    • 
        
  • 点击我弹出弹框
    • 
        
  • 点击我弹出弹框
    • 
        
  • 点击我弹出弹框
    •

鼠标事件拓展

我们在前面给出了一些鼠标操作：

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

下面我们再介绍一些另类的鼠标事件：

  • 禁止右键选中：

    document.addEventListener('contextmenu',function(e){
    //禁止contextmenu右键鼠标操作
	e.preventDefault();
})

  • 禁止选中文字：

    document.addEventListener('selectstart',function(e){
    //禁止selectstart选中文字
	e.preventDefault();
})

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合

我们首先来学习鼠标事件对象：

鼠标属性 说明
e.clientX 当前可视页面的x
e.clientY 当前可视页面的y
e.pageX 当前页面的x（不具有兼容性）
e.pageY 当前页面的y（不具有兼容性）

代码示例：




    
    
    
    Document

键盘事件和键盘事件对象

我们先来学习键盘事件：

键盘事件 说明
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时触发（不能识别功能键，如ctrl，shift，左右箭头）

注意：

  • 三个时间的执行顺序：keydown -> keypress -> keyup

然后我们来了解一下键盘事件对象：

键盘事件对象属性 说明
e.key 返回相应键（不具备兼容性，不推荐）
e.keyCode 返回相应键的ASCII值（具有兼容性，推荐）

注意：

  • keyup和keydown事件中不区分大小写，均为大写输出
  • keypress事件区分大小写，A：65，a：97

案例展示：




    
    
    
    Document

结束语

好的，那么关于DOM的全部知识点总结完毕！

下一节我会对BOM做出详解，并且在JavaScript的内容结束后，会对DOM的各种实际网页应用做出各种案例模板，请多多关照！

前端三件套（HTML3CSS5JavaScript）

相关

数组乱序输出且不重复（JavaScript）

字符串与数组方法总结（JavaScript）

标签