接着上文BOM的学习后，接下来学习DOM的相关操作

二、DOM

DOM（Document Object Model）即是文档对象模型。由于是标准的编程接口，因此无论是什么平台和语言，都可以通过提供的API对HTML文档进行增删改查的操作。常用的概念有：

1、文档：一个网页就可以被称为一个文档。

2、节点：文档中所有的内容都可以是一个节点，包括元素、标签、文本、注释等。

3、元素：文档中的任何一个标签都可以是一个元素。

4、属性：专属于某个标签的属性，可以是标签自带的基础属性，也可以是用户自定义的属性。

经常对DOM进行的操作有：

1、获取元素并对元素进行增删改查

2、DOM的事件

3、元素的属性操作

获取元素并对元素进行增删改查

1、通过id、类名、标签名、name属性等选择器获取元素

var box = document.getElementById('box');
var boxs = document.getElementsByClassName('boxClass'); // 注意通过类名查询的结果是一个元素集合数组
var divs = document.getElementsByTagName('div'); // 注意通过标签名查询的结果是一个元素集合数组
// <div name="boxName">我是一个测试内容</div>
var names = document.getElementsByName('boxName'); // 注意通过属性name查询的结果是一个元素集合数组

同时，DOM API也提供了集合前面提到的id、类名和标签名的选择器方法：

querySelector：根据指定的选择器，获取并返回第一个匹配的元素。

querySelectorAll：根据指定的选择器，获取并返回所有匹配的元素。

var box = document.querySelector('.boxClass');
var boxs = document.querySelectorAll('.boxClass'); // 符合的元素集合数组

2、操作元素-增删改

（1）创建节点

document.createElement(tagName);
// tagName：HTML标签名

（2）插入节点

appendChild：将一个节点插入到指定的父元素结尾。

// node：想添加节点的父元素
node.appendChild(child);
// child：创建的子节点

insertAdjacentHTML：将一个字符串文本转化成对应的节点，并插入到指定位置

var testBox = document.querySelector("#testBox");
testBox.insertAdjacentHTML('afterend', '<span>我是新增的span标签</span>');

node.insertAdjacentHTML(position, childTxt);

node：指定插入的位置节点

position：相对于node插入的位置，可选的参数有：beforebegin（node与前一个同级节点之间的位置）、afterbegin（node的第一个子节点之前，即是替代了原第一个子节点位置）、beforeend（node的最后一个子节点之后，即是替代了原最后一个子节点位置）、afterend（node与后一个同级节点之间的位置）

childTxt：标签节点的字符串文本

DOM的事件

事件的三要素：

事件源
事件名称
事件处理函数

<div id="box">测试点击事件的box</div>

var box = document.getElementById('box'); // 事件源
box.onclick = function() { // onclick 事件名称
    alert('我是测试点击事件的！'); // 事件处理函数
};

元素的属性

常用的标签元素以及属性有：

a标签的href、title
img标签的src、alt、title
input、select、textarea、button等表单标签的value、type、disabled、checked、selected等属性

<a id="link" href="www.xxx.com" title="title">a标签</a>
<img id="img" src="xxx.jpg" alt="alt" title="title"/>
<input type="text" id="text" value="我是input-text"/>
<input type="button" id="btn" value="我是按钮"/>
<select>
    <option value="option1">option1</option>
    <option value="option2>option2</option>
    <option value="option3>option3</option>
</select>
// 更多内容可以查看官方文档

// 查询属性值
var link = document.getElementById('link');
console.log(link.href);
var img = document.getElementById('img');
console.log(img.src);
// 设置属性值
link.href='https://juejin.cn/';

学习Web API（2）-DOM