咕啾啾

【JavaScript - Web API】DOM（获取元素 / 事件基础 / 操作元素 / 节点操作）

学习视频及笔记参考来源：

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

一、DOM 简介

1、什么是 DOM ？

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

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

2、DOM 树

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

二、获取元素

获取元素的几种方式：（1）根据 ID 获取。（2）根据标签名获取。（3）通过 HTML5 新增的方法获取。（4）特殊元素获取。

1、根据 ID 获取 — getElementById()

使用 getElementById() 方法可以获取带有 ID 的元素对象。
括号里面必须是字符串的形式！
使用 console.dir() 可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。

document.getElementById('id');


    2019-9-9

2、根据标签名获取 — getElementsByTagName()

使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
因为得到的是一个对象的集合，返回的是伪数组，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的。

 document.getElementsByTagName('标签名');

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

3.1 根据类名获取 — getElementsByClassName()

document.getElementsByClassName('类名')；// 根据类名返回元素对象集合


    2020-9-9

3.2 根据指定选择器获取 — querySelector()

querySelector() 和 querySelectorAll() 里面的选择器需要加符号。
如果是 id ：document.querySelector('#time')；
如果是 class：document.querySelector('.time')；
如果是标签名：document.querySelector('.time')；

4、获取特殊元素（body / html）

4.1 获取 body 元素

document.body // 返回body元素对象

4.2 获取 html 元素

document.documentElement // 返回html元素对象

三、事件基础

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

事件三要素：

1、事件源（要点击谁，触发谁）。

2、事件类型（什么样的事件，怎么触发）。

3、事件处理程序（具体实现啥，要做啥）。

执行事件的步骤：

1、获取事件源。

2、注册事件（绑定事件）。

3、添加事件的处理程序（采取函数赋值的形式）。
// 1. 获取事件源
var btn = document.getElementById('btn');

// 2. 注册事件 btn.onclick
// 3. 添加事件处理程序 function() {}
btn.onclick = function() {
     alert('你好吗'); 
};

四、操作元素

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

1、改变元素内容

// 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
element.innerText = '';

// (更常用！)起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
element.innerHTML = '';

2、常用元素的属性操作

1、innerText、innerHTML 改变元素内容

2、src、href

3、id、alt、title

// 比如要改变图片，可以更改 img 的 src 属性
img.src = 'images/1.jpg';

3、表单元素的属性操作

利用 DOM 可以操作如下表单元素的属性： type 、 value 、 checked 、 selected 、 disabled。

4、样式属性操作

我们可以通过 JS 修改元素的大小、颜色、位置等样式。
JS 里面的样式采取驼峰命名法比如 fontSize 、 backgroundColor。
JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高。

1、element.style 行内样式操作

2、element.className 类名样式操作（直接修改所调用的类，适用于样式较多的情况）

// 仿关闭淘宝二维码




    
    
    
    Document
    



    
        
        关闭

5、排他思想

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

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

5.1 案例：百度换肤效果

// 百度换肤效果

6、案例：表单全选取消全选案例





    
    
    
    Document

7、自定义属性

7.1 获取属性值

element.属性； — 获取内置属性值（元素本身自带的属性）
element.getAttribute('属性')； — 主要获得自定义的属性（程序员自定义的属性）

7.2 设置属性值

element.属性 = ‘值’；
element.setAttribute('属性', '值')；— 主要设置自定义的属性

7.3 移除属性

element.removeAttribute(' 属性 ')；

8、H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
新增自定义属性的定义是为了判断元素是内置属性还是自定义属性。
个人感觉还是直接用第7点的比较好。

8.1 设置 H5 自定义属性

H5规定自定义属性data-开头做为属性名并且赋值。

比如

，或者使用 JS 设置 element.setAttribute(‘data-index’, 2)。

8.2 获取 H5 自定义属性

兼容性获取 element.getAttribute(‘data-index’);

H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持。

如果是

，获取时候需要用驼峰命名法的标准：element.dataset.indexNum；

9、案例：tab 栏切换





    
    
    
    Document
    



    
        
            商品介绍
            规格与包装
            售后保障
            商品评价

10、三种动态创建元素区别

三种动态创建元素方法：

（1）document.write()

（2）element.innerHTML

（3）document.createElement()

区别：

（1）document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘。

（2）innerHTML 创建多个元素效率更高（不要拼接字符串【3s】，采取数组形式拼接【8ms】），结构稍微复杂。createElement() 创建多个元素效率稍低一点点【20ms】，但是结构更清晰。

五、节点操作

1、节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。

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

元素节点 nodeType 为 1。在实际开发中，节点操作主要操作的是元素节点。

属性节点 nodeType 为 2。

文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）。

2、节点层级

2.1 父级节点

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

node.parentNode

2.2 子节点

parentNode.childNodes

（不推荐）

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

2、返回值里面包含了所有的子节点，包括元素节点，文本节点等。

3、如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes。

parentNode.children

( 重点掌握 )

parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回（重点掌握）。

parentNode.firstChild parentNode.lastChild