本文共 5347 字，大约阅读时间需要 17 分钟。

1. 目标

1. 能够说出什么是DOM
2. 能够获取页面元素
3. 能够给元素注册事件
4. 能够操作DOM元素的属性
5. 能够创建元素
6. 能够操作DOM节点

2. DOM简介

2.1 什么是DOM呢？

文档对象模型（ Document Object Model ，简称DOM），是W3C推荐的处理可扩展标记语言（ HTML或者XML ）的标准编程接口。

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

2. DOM树

html 上面的标签时 document。document代表整个文档

• 文档：一个页面就是一个文档，DOM中使用 document 表示
• 元素：页面中的所有标签都是元素，DOM中使用 element 表示
• 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

DOM 把以上的内容都看作是对象

3. 获取元素

在实际开发中主要用来操作元素。

3.1 获取页面元素

3.1.1 根据 ID 获取

- 返回一个匹配特点 ID 的元素- id是大小写敏感的字符串

栗子：

    
   
    2020-4-8
   
    

3.1.2 根据标签名获取

使用 getElementByTagName() 方法可以返回带有指定标签名的对象集合。

栗子：

    
   
        
    
帅哥是我 我是帅哥1
        
    
帅哥是我 我是帅哥2
        
    
帅哥是我 我是帅哥3
        
    
帅哥是我 我是帅哥4
        
    
帅哥是我 我是帅哥5
    
   
    
   
        
    
嘘！~ 禁止想象 1
        
    
嘘！~ 禁止想象 2
        
    
嘘！~ 禁止想象 3
        
    
嘘！~ 禁止想象 4
        
    
嘘！~ 禁止想象 5
    
   
    

3. 通过 HTML5 新增的方法获取

1. getElementsByClassName(‘类名’)
2. querySelctor( )
3. querySelctorAll( )
   栗子：

    
   
    盒子1
   
    
   
    盒子2
   
    
   
        
    
            
     
首页
            
     
产品
        
    
    
   
    

4. 特殊元素获取

4. 事件基础

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

简单理解：触发—响应机制。

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

栗子：唐伯虎点秋香

    唐伯虎    

执行事件的步骤

1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值的形式）

常见鼠标事件

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

栗子：

    
   
    123
   
    

5. 操作元素

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

5.1 改变元素内容

element.innerText

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

element.innerHtml

2. 栗子二：

   二者区别：

    
   
    
        我是文字        123    
    

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

innerHTML标准，尽量用

5.2 改变元素属性

再来个栗子：

通过不同时间得到不同的问候语

        
   
    上午好
   
    

5.3 表单元素的属性操作

type, value, checked, selected, disabled(禁用按钮)

表单里面的值是通过value来变化的

5.4 样式属性操作

我们可以通过 js 修改元素的大小，颜色，位置等样式

方法	作用
element.style	行内样式操作如果说样式比较少 或者 功能简单的情况下使用
element.className	类名样式操作 如果说样式比较多或者功能比较复杂那么就用这个（更好的分离样式与行为）

注：

• js里面的样式采用驼峰命名法 比如 fontSize， backgroundColor
• js 修改 style 样式操作，产生的是行内样式， 权重高。

1. 当鼠标点击文本框的时候，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。

2. 栗子2（ element.className ）：改变class名

   • 如果样式修改较多，可以采取操作类名方式更改元素样式
   • class是个保留字，因此使用className来操作元素类名属性
   • className会直接更改元素的类名，会覆盖原先的类名 所以要加新的类名要把原先的写上

    
       
               
   
    我是帅哥
   
    

5.5 排他思想

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

• 所有元素清空样式（干掉其他人）
• 给当前元素设置样式（留下我自己）
• 注意顺序不能颠倒，首先干掉其他人，在设置自己

2. • 给一组元素注册事件
   • 点击后页面背景变化

5.5 自定义属性的操作

获取方法	不同点
element.属性	只能获得内置的属性（元素本身自带的）
element.getAttribute(‘属性’)	主要获得自定义的属性（标准）

5.5 设置属性值

设置方法	不同点
element.属性 = ‘属性值’	内置的属性
element.setAttribute(‘属性’, ‘属性值’)	自定义属性

注：class比较特殊element.setAttribute('class', '啥啥啥')记住不是className。

5.6 移除属性

element.removeAttribute('属性');

5.7 H5自定义属性

一：

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

2. 自定义属性是通过getAttribute（‘属性’）获取。

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

注： 为了解决上述问题我们在设置自定义属性的时候以 data- 开头作为属性名并赋值

例：<div data-index = "1"><div>

二：

1. js 添加自定义属性及属性值：

   • element.setAttribute('属性', '啥啥啥') = ‘啥啥啥’

2. js 获取自定义属性值：

   • element.getAttribute('属性')（兼容性获取方法）
   • element.dataset.自定义属性名（H5新增方法）
   • element.dataset['自定义属性名']（H5新增方法）
   • 注：如果自定义属性中有多个 "- " 链接的单词， 我们获取的时候采取的是 驼峰命名法

栗子（important）：

6. 节点操作

6.1 为啥学习节点操作

利用DOM提供的方法获取元素	利用节点的层级关系获取元素
document.getElementById()	1. 利用利用 父 子 兄 节点关系获取元素
document.getElementByTagName()
document.querySelector等
逻辑性不强，繁琐	逻辑性强，操作简单，但是兼容性差，

6.2 节点概述

一般的，节点至少拥有nodeType（节点类型），nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

• 元素节点 nodeType 为1
• 属性节点 nodeType 为2
• 文本节点 nodeType 为3（文本节点包含文字，空格，换行等）
• 注：我们在实际开发中，节点操作的是元素节点

6.3 节点层级

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

6.3.1 父节点获取（element.parentNode）

栗子（important）：

6.3.2 子节点获取（element.childNodes）

1. parentNode.childNodes (标准)

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

注意：

1. 返回值里面包含了所有的子节点，包括元素节点，文本节点等
2. 如果只想要获得里面的元素节点，则需要专门处理，所以我们一般不提倡使用childNodes
3. 如果非要用那么要加一个条件判断（利用 元素节点 nodeType 为1这一性质）

    
   
        
    
我很帅
        
    
我很帅
        
    
我很帅
        
    
我很帅
    
   
    

2. parentNode.children (非标准) （庶出）但是却被广泛的应用（各个浏览器都支持）

    
   
        
    
我很帅
        
    
我很帅
        
    
我很帅
        
    
我很帅
    
   
    

6.3.3 第一个和最后一个子节点的获取

1. element.firstChild ：第一个子节点 不管是文本节点还是元素节点

2. element.lastChild：同理

3. element.firstElementChild ：返回第一个子元素节点，找不到返回null

4. element.lastElementChild ： 同理

注：3 4 种方法有兼容性问题，IE9 以上才支持

实际开发的写法 既没有兼容性问题又返回第一个子元素 : console.log(ul.children[0]);

实际开发的写法 既没有兼容性问题又返回最后一个子元素 : console.log(ul.children[ul.children.length -1]);

栗子：

    
   
        
    
我很帅1
        
    
我很帅2
        
    
我很帅3
        
    
我很帅4
    
   
    

6.3.4兄弟节点

1. node.nextSibling : 返回下一个兄弟节点，找不到返回null，包含所有的节点

2. node.previousSibling : 返回上一个兄弟节点，找不到返回null，包含所有的节点

3. node.nextElementSibling : 返回当前元素下一个兄弟节点(元素节点)，找不到则返回null

4. node.previousElementSibling : 返回当前元素上一个兄弟节点(元素节点)，找不到则返回null

注：3 4 种方法有兼容性问题，IE9 以上才支持

栗子：

    
   
    我是div
   
    我是span    

6.4 创建节点，添加节点

1. document.createElement(‘element’) ： 创建一个元素

2. 父级.appendChild(变量); ： 添加在后面

3. 父级.insertBefore(变量, 父级.children[0]) ： 传入变量，和要插入的位置

    
   
        
    
123
    
   
    

栗子

6.5 删除节点

node.removeChild(child)：DOM 中删除一个子节点，删除一个子节点，返回删除的节点

    delate    
   
        
    
熊大
        
    
熊二
        
    
光头强
    
   
    

阻止链接跳转添加javascript:void(0);或者javascript:;

栗子

6.6 复制节点（克隆节点）

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

注意：

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

    
   
        
    
1
        
    
2
        
    
3
    
   
    

6.7 三种动态创建元素的区别

总结