JavaScript进阶内容——DOM详解

前言

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

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

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

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

DOM简介

DOM定义：

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

DOM作用：

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

DOM树：

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

获得元素

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

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

1. ID获得元素：

代码：

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

案例展示：

1. 标签名获取元素：

代码：

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

案例展示：

    
    
    
    


    

        
1
        
2
        
3
        
4
        
5
    

    

        
1
        
2
        
3
        
4
        
5
    

    

1. 类名获取元素(HTML5)：

代码：

document.getElementByClassName('类名');

案例展示：

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

代码：

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

案例展示：

事件基础

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

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

事件三要素

我们把事件分为三部分：

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

我们下面给出基本格式：

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

我们给出一个基础案例：

    
    
    
    


    按钮

    

事件类型概括

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

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

操作元素

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

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

元素内容修改

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

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

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

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

案例展示：