【DOM】

1 本节目标

• 说出什么是 DOM
• 获取页面元素
• 给元素注册事件
• 操作 DOM 元素的属性
• 创建元素
• 操作 DOM 节点

2 DOM 简介

2.1 什么是DOM

• 文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标记语言(HTML 或者 XML)的标准编程接口。
• W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

2.2 DOM 树

• 文档：一个页面就是一个文档，DOM 中使用 document 表示。
• 元素：页面中的所有标签都是元素，DOM 中使用 element 表示。
• 节点：页面中的所有内容都是节点(标签、属性、文本、注释等)，DOM 中使用 node 表示。
• DOM 把以上内容都看做是对象。

3 获取元素

3.1 如何获取页面元素

• DOM 在实际开发中主要用来操作元素。
• 获取页面中的元素可使用以下几种方式：
  1>根据 ID 获取；
  2>根据标签名获取；
  3>通过HTML5新增的方法获取；
  4>特殊元素获取。

3.2 根据 ID 获取

• 使用getElementById()方法可以获取带有ID的元素对象。
• console.dir()打印我们返回的元素对象，更好查看里面的属性和方法
  

3.3 根据标签名获取

• 使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。
• 还可以获取某个元素(父元素)内部所有指定标签名的子元素。
  注意：父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己。
  element.getElementsByTagName('标签名');
  

3.4 通过HTML5新增的方法获取

• document.getElementsByClassName('类名');根据类名返回元素对象集合。
• document.querySelector('选择器');根据指定选择器返回第一个元素对象。
• document.querySelectorAll('选择器');根据指定选择器返回。
  

3.5 获取特殊元素（body，html）

3.5.1 获取body元素

• document.body：返回body元素对象

3.5.2 获取html元素

• document.documentElement：返回html元素对象
  

4 事件基础

4.1 事件概述

• JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
• 简单理解：触发——响应机制
• 网页中的每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

4.2 事件三要素

• 事件由三部分组成：事件源、事件类型、事件处理程序。
  

4.3 执行事件的步骤

• 获取事件源
• 注册事件(绑定事件)
  
• 添加事件处理程序(采取函数赋值形式)
  

5 操作元素

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

5.1 改变元素内容

• element.innerText：从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。
• 点击按钮前：
  
  点击按钮后：
  
• element.innerHTML：起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。
• innerText和innerHTML区别：
  1>innerText不识别html标签，innerHTML识别html标签；
  
  2>innerText去除空格和换行，innerHTML保留空格和换行。
  

5.2 常用元素的属性操作

• innerText、innerHTML 改变元素内容
• src、href
• id、alt、title
  
  

5.3 表单元素的属性操作

• 利用DOM可以操作如下表单元素的属性：type、value、checked、selected、disabled
• 点击前：
  
  点击后：
  

5.4 样式属性操作

• 可通过JS修改元素的大小、颜色、位置等样式。
• element.style：行内样式操作
• element.className：类名样式操作

5.4.1 element.style

• 点击前：
  
  点击后：
  
• 注意：
  1>JS里面的样式采取驼峰命名法，如：fontSize、backgroundColor；
  2>JS修改style样式操作，产生的是行内样式，CSS权重比较高。

5.4.2 element.className

点击前：

点击后：

• 注意：
  1>如果样式修改较多，可采取操作类名方式更改元素样式；
  2>class因为是个保留字，因此使用className来操作元素类名属性；
  3>className会直接更改元素的类名，会覆盖原先的类名；
  4>如果想要保留原先的类名，我们可以写为：this.className = '原先的类名 修改后的类名';。

5.5 操作元素小结

5.6 排他思想

• 首先先排除其他人，然后才设置自己的样式，这种排除其他人的思想称为排他思想。
• 如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法。
• 步骤：
  1>所有元素全部清除样式(干掉其他人)
  2>给当前元素设置样式(留下自己)
  3>注意顺序不能颠倒，首先干掉其他人，再设置自己
  

5.7 自定义属性的操作

5.7.1 获取属性值

• element.属性：获取属性值
• element.getAttribute('属性');：获取属性值
• 区别：
  element.属性：获取内置属性值(元素本身自带的属性)
  element.getAttribute('属性');：主要获取自定义的属性(标准) 程序员自定义的属性

5.7.2 设置属性值

• element.属性 = '值'：设置内置属性值
• element.setAttibute('属性','值');：主要针对于自定义属性

5.7.3 移除属性

• element.removeAttribute('属性');
  

5.8 H5自定义属性

• 自定义属性目的：是为了保存使用数据，有些数据可以保存到页面中而不用保存到数据库中。
• 但有些自定义属性容易引起歧义，不易判断是元素的内置属性还是自定义属性。
• H5新增了自定义属性。

5.8.1 设置H5自定义属性

• H5规定自定义属性data-开头作为属性名并且赋值。
• 比如：<div data-index = "1"></div>或者使用JS设置element.setAttribute('data-index' , 2)

5.8.2 获取H5自定义属性

• 兼容性获取：element.getAttribute('data-index');
• H5新增element.dataset.index或element.dataset['index']
  

6 节点操作

6.1 为什么学节点操作

• 获取元素通常使用两种方式：
  1>利用DOM提供的方法获取元素
  document.getElementById()
document.getElementByTagName()
document.querySelector()等
  以上方法逻辑性不强且繁琐
  2>利用节点层级关系获取元素
  利用父子兄节点关系获取元素
  此方法逻辑性强，但兼容性稍差

6.2 节点概述

• 网页中所有内容都是节点(标签、属性、文本、注释等)，在DOM中，节点使用node来表示。
• HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素(节点)均可被修改，也可以创建或删除。
• 一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
• 元素节点 nodeType 为1
• 属性节点 nodeType 为2
• 文本节点 nodeType 为3(文本节点包含文字、空格、换行等)
• 在实际开发中，节点操作主要操作的是元素节点。
  

6.3 节点层级

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

6.3.1 父级节点

• node.parentNode
• parentNode属性可返回某节点的父节点，注意是最近的一个父节点
• 如果指定的节点没有父节点则返回null
  

6.3.2 子节点

• parentNode.childNodes(标准)
• 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
• 注意：返回值里包含了所有的子节点，包括元素节点、文本节点等。
• 如果只想要获得里面的元素节点，则需专门处理，所以我们一般不提倡使用childNodes
  
• parentNode.children(非标准)
• 是一个只读属性，返回所有的子元素节点，它只返回子元素节点，其余节点不返回
• 虽是非标准，但可放心使用
  
• parentNode.firstChild返回第一个子节点，找不到则返回null，同样也是包含所有的节点。
• parentNode.lastChild返回最后一个子节点，找不到则返回null，同样也是包含所有的节点。
• parentNode.firstElementChild返回第一个子元素节点
• parentNode.lastElementChild返回最后一个子元素节点
  
  

6.3.3 兄弟节点

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

6.4 创建和添加节点

• 想要页面添加一个新的元素：1.创建元素2.添加元素
• 创建节点：document.createElement('tagName')方法创建由tagName指定的HTML元素，因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。
• 添加节点：
  node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素或类似于数组中的push。
  node.insertBefore(child,指定元素)方法将一个节点添加到指定父节点的子节点前面，类似于css里面的before伪元素。
  

6.5 删除节点

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

6.6 复制节点(克隆节点)

• node.cloneNode()方法返回调用该方法的节点的一个副本，也称为克隆节点/拷贝节点。
• 注意：
  1>如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点，只复制标签不复制里面的内容。
  2>如果括号参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点，既复制标签还复制里面的内容。
  

6.7 三种动态创建元素区别

• document.write()
• element.innerHTML
• document.createElement()
• 区别：
  1>document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面全部重绘。
  2>innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。
  3>innerHTML创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂。
  4>createElement()创建多个元素效率稍低一点点，但是结构更清晰。
  5>总结：不同浏览器下，innerHTML效率要比createElement()高
  

7 DOM重点核心