目录
1、DOM是什么
DOM （ Document Object Model ，文档对象模型），是用来呈现以及与任意 HTML 或 XML 文档交互的API （ Application Program Interface ，应用程序接口）。 DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如：页面元素、字符串或注释等等）。
DOM 是万维网上使用最为广泛的 API 之一，它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。事件监听器可以被添加到节点上并在给定事件发生时触发。
DOM 并不是天生就被规范好了的，它是浏览器开始实现 JavaScript 时才出现的。这个传统DOM 有时会被称为 DOM 0 。现在， WHATWG 维护 DOM 现存标准。
2、DOM树
DOM 树又叫文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
文档：一个 HTML 页面就是一个文档，使用 document 表示
3、节点
节点是构成网页最基本的组成部分，网页中的所有内容在文档树中都是节点（标签、属性、文本、注释等），使用node 表示
（1） 标签节点：也叫元素节点，指网页中的所有标签，使用 element 表示；
（2）属性节点：指元素节点的属性；
（3）文本节点：指元素节点的内容。
4、获取元素
想要对 DOM 进行操作，首先需要获取页面中的元素，在 JavaScript 中，提供了以下几种获取页面元素的方法。
4.1、根据id获取
语法格式： var 元素对象 = document . getElementById ( "id 属性名称 " );
作用：通过页面中某个元素的 id 属性来获取这个元素对象。
返回 值：这个方法执行后会有一个返回值，如果获取到则返回当前对象，否则返回 null 。
示例：
<div id="box">这是一个块</div>
<script>
var box = document.getElementById('box');
console.log(box);
console.log(typeof box);
</script>4.2、根据标签名获取
语法格式： var 返回对象集 = document . getElementsByTagName ( ' 标签名称 ' );
作用：根据指定的标称名称返回这些对象。
示例：
<ul>
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>重庆</li>
</ul>
<script>
var lis = document.getElementsByTagName('li');
console.log(lis);
</script>除了可以使用 document 来引用这个方法外，还可以使用它父组对象来引用这个方法。
<ul id="first">
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>重庆</li>
</ul>
<script>
// 获取父级元素
var ul = document.getElementById('first');
console.log(ul);
// 通过父级元素来获取子元素
lis = ul.getElementsByTagName('li');
console.log(lis);
</script>4.3、根据name属性来获取
语法格式： var 元素对象集 = document . getElementsByName ( 'name 属性名 ' )
作用：根据 name 属性来获取元素对象的集合。
示例：
<p> <input type="checkbox" name="hobby" value="音乐">音乐
<input type="checkbox" name="hobby" value="游戏">游戏
</p>
<script>
var hobbies = document.getElementsByName('hobby');
console.log(hobbies);
</script>4.4、根据类名来获取
语法格式： var 元素对象集 = document . getElementsByClassName ( ' 类名称 ' );
作用：根据元素的样式名称来获取元素集（也就是元素的 class 属性来获取）。
示例：
<div class="box">div1</div>
<div class="box">div2</div>
<script>
var divs = document.getElementsByClassName('box');
console.log(divs);
</script>4.5、根据选择器获取
根据指定选择器获取元素对象有两种方式：一是获取单个，一是获取多个。
获取单个对象： var 元素对象 = document . querySelector ( ' 选择器名称 ' );
获取多个对象： var 元素对象 = document . querySelectorAll ( ' 选择器名称 ' );
示例：
<div id="box1">有id的div</div>
<div class="box2">有类样式的div</div>
<div class="box2">有类样式的div</div>
<p> <input type="text" name="account" value="xian">
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女 </p>
<script>
// 根据标签获取
var div = document.querySelector('div');
console.log(div);
var divs = document.querySelectorAll('div');
console.log(divs);
// 根据id获取
div = document.querySelector('#box1');
console.log(div);
// 根据类样式
divs = document.querySelectorAll('.box2');
console.log(divs);
// 根据属性选择器来获取
var gender = document.querySelectorAll('input[type="radio"]');
console.log(gender);
</script>4.6、获取body元素
语法格式： document . body ;
作用：获取 body 中的所有元素
示例：
<div class="box"></div>
<input type="text" name="" id="">
<h1>h1</h1>
<script>
var body = document.body;
console.log(body);
</script>4.7、获取html元素
语法格式： document . documentElement ;
作用：获取整个 html 元素。
示例：
<div class="box"></div>
<input type="text" name="" id="">
<h1>h1</h1>
<script>
var html = document.documentElement;
console.log(html);
</script>5、操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式，因此可以利用 DOM 操作元素来改变元素里面的内容、属性等。
5.1、改变内容
在 DOM 中改变元素内容通常使用元素的 innerText 和 innerHTML 属性来实现。
示例：
<div class="box"> 今年是<strong>2022</strong>年第一天 </div>
<script>
// 1. 获取元素
var box = document.querySelector('.box');
console.log(box);
// 2. 获取元素的内容
// 2.1 innerHTML
var content = box.innerHTML;
console.log(content);
// 2.2 innerText
var content = box.innerText;
console.log(content);
// 3. 设置元素内容
// 3.1 innerHTML 识别htm标签，同时保留空格和换行
box.innerHTML = '<font color="red">这是红色的字</font>';
// 3.2 innerText 不识别html标签，不保留空格和换行
// box.innerText = '<font color="red">这是红色的字</font>';
</script>innerHTML和 innerText相同点：
（1）的 innerHTML 或 innerText 属性可以获取对象的内容；
（2）通过给对象的 innerHTML 或 innerText 属性赋值可以改变对象的内容。
innerHTML和 innerText区别：
（1）innerHTML属性会把内容中的html元素解析后再执行，而innerText不会解析内容中的html元素。
（2） 如果 innerText 用于获取对象的内容，当内容中包含有 html 元素时， 获取中它会把 这个元素给删除了，而innerHTML不会。
（3） 如果innerHTML用于设置对象的内容，当内容中包含有 html 元素时，它会把这些元素 原封不动的设置给对象（不删除空格和换行），而innerText会删除空格和换行。
5.2、元素属性
在 DOM 中，改变元素属性是通过 元素对象 . 属性名 的方式来实现的，它同样具有读写功能。元素可操作的常用属性有：src 、 href 、 id 、 alt 、 title 以及自定义属性等。
演示案例：
<img src="1.jpeg">
<script>
var img = document.querySelector('img')
// 获取src属性
console.log(img.src);
// 修改src属性
img.src = '2.jpeg';
// 添加属性
img.alt = '图片';
img.title = '提示';
console.log(img);
</script>5.3、表单元素
在Web开发中，表单是一种常用的元素，利用DOM可以操作如下表单元素的属性。
这些属性都具有读写操作，通过 元素对象.属性名来获取元素属性值，通过元素对象.属性名= 值 来设置元素属性值。而checked、selected和disabled元素属性的值是布尔类型。
演示案例：
<input type="text" name="name" value="123456"><br>
<input type="checkbox" name=""><br>
<select name="">
<option value="">--请选择--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="重庆">重庆</option>
</select>
<script>
var input = document.querySelector('input')
// 获取type
console.log(input.type);
// 设置type
//input.type = 'password';
// 获取value
console.log(input.value);
// 设置value
input.value = 'jock'
// 获取disabled
console.log(input.disabled);
// false
// 设置 disabled
input.disabled = true;
// 获取元素
var ck = document.querySelector('[type="checkbox"]');
console.log(ck);
// 获取选中状态
console.log(ck.checked); // false
// 设置选中状态
ck.checked = true;
// 获取下拉列表
var sl = document.querySelector('select');
console.log(sl);
//console.log(sl[2]);
var op = sl[2];
console.log(op.selected);
// 设置被选中
op.selected = true;
</script>5.4、样式元素
在 DOM 中可以通过 JavaScript 来修改元素的大小、颜色和位置等样式。常用方式有：
5.4.1、style
示例：
<style>
.box {
width: 150px;
height: 100px;
background-color: blueviolet;
}
</style>
<div class="box"></div>
<script>
// 通过 JS 来改变 div 的宽和背景颜色
var box = document.querySelector('.box')
//console.log(box);
// 通过 style 方式
box.style.width = '300px';
box.style.backgroundColor = 'red';
</script>注意：如果样式名称中包含有连接符（-），那么连接符要去掉，同时后面的字母要大写。
5.4.2、className属性
示例：
<style>
.box {
width: 150px;
height: 100px;
background-color: blueviolet;
}
.bg {
width: 200px;
height: 200px;
background-color: cornflowerblue;
}
.ft {
color: white;
}
</style>
<div class="box">这是文字</div>
<script>
// 通过 JS 来改变 div 的宽和背景颜色
var box = document.querySelector('.box');
console.log(box.className);
box.className = 'bg ft'
</script>
说明：
（1）通过对象.className的方式可以获取当前对象的样式名称；
（2）通过对象.className='值'的方式可以给当前对象设置样式。
5.5、操作属性、
对属性的操作也可以设置属性值，也可获取属性值。
5.5.1、setAtrribute()
这个方法可以给元素设置属性。它的语法如下：
对象名称.setAttribute('属性名','属性值');
示例：
<style>
div {
width: 100px;
height: 30px;
border: 1px solid #000000;
}
.bg {
background-color: cornflowerblue;
color: white;
}
</style>
<div title="这是标题">这是内容</div>
<script>
var div = document.querySelector('div')
// 设置属性
div.setAttribute('class', 'bg');
div.setAttribute('title', '我改了标题');
</script>5.5.2、getAttribute()
这个方法是用于获取对象中的指定属性名称的值。它的语法如下：
属性值 = 对象 . getAttribute ( ' 属性名 ' ) ;
示例：
<div title="这是标题">这是内容</div>
<script>
var div = document.querySelector('div')
// 获取title属性
//console.log(div.title);
var attrValue = div.getAttribute('title');
console.log(attrValue);
</script>5.5.3 removeAttribute()
这个方法是用于删除对象中指定的属性。它的语法为：
对象 . removeAttribute ( ' 属性名 ' );
示例：
<div title="这是标题">这是内容</div>
<script>
var div = document.querySelector('div');
// 删除title属性
div.removeAttribute('title');
</script>5.5.4、自定义属性
自定义属性目的是为了保存并使用临时数据，这些数据不需要从数据库中获取。自定义属性是通过 setAttribute(' 属性 ', ' 值 ') 来设置，通过 getAttribute(' 属性 ') 来获取。
由于有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性，为了解决这种问题，H5 中规定了自定义属性都以 data - 开头来作为属性名。
H5 中规定的属性定义方式可以使用 getAttribute(' 属性 ') 方式来获取，也可以使用 H5 中新增的属性获取方式来获取。
示例：
<div data-index="1" data-list-name="jock"></div>
<script>
var div = document.querySelector('div');
console.log(div.getAttribute('data-index'));
div.setAttribute('data-title', '标题');
</script>6、DOM事件
6.1、什么是事件
所谓事件是指文档或浏览器窗口中发生的一些特定的交互瞬间。 JavaScript 与 HTML 之间的交互 就是通过事件来实现的。对于 Web 应用来说，鼠标点击，鼠标移动，按下键盘某个键都是属于事件。而这些相应操作就会触发相应的响应机制来进行事件处理。
6.2、事件的要素
对于事件来说，它包含三个要素：事件源、事件类型和事件处理程序。
（1）事件源：触发事件的元素.
（2）事件类型：触发了哪种类型的事件，如 click 、 mouseover 、 focus 、 keyup 等。
（3）事件处理程序：事件触发后要执行的程序代码，通常是一个函数。
示例：
<button id="btn">点我会触发事件</button>
<script>
// 1. 获取元素
var btn = document.querySelector('#btn')
// 1.事件源：这个按钮就是事件源
// 2. 事件类型：这个按钮要点击后才会触发，那么它的事件类型就是点击事件
// 3. 事件处理程序
btn.onclick = function() {
console.log('你点了我');
};
</script>6.3、常见鼠标事件类型
DOM 事件非常多，而这些事件中使用最多最频繁的就是鼠标事件，常用的鼠标事件如下表所示。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见鼠标事件类型</title>
<style>
.box {
width: 150px;
height: 100px;
border: 1px solid #000000;
}
.bg {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="text" id="account" value="123456">
<script>
var box = document.querySelector('.box')
// 单击事件：onclick
/*box.onclick = function () {
console.log('点我干嘛？');
};
// 双击事件：ondblclick
box.ondblclick = function () {
console.log('别烦我。');
};
*/
// 鼠标经过时触发：onmouseover
box.onmouseover = function () {
this.className = 'box bg';
};
// 鼠标离开时触发:onmouseout
box.onmouseout = function () {
this.className = 'box';
};
// 鼠标移动时触发:onmousemove
box.onmousemove = function () {
console.log('你摸我干嘛');
};
var input = document.querySelector('#account')
// 获取鼠标焦点时触发:onfocus
input.onfocus = function () {
//console.log(this.value)
this.style.backgroundColor = 'cornflowerblue';
};
// 失去鼠标焦点时触发:onblur
input.onblur = function () {
this.style.backgroundColor = '';
console.log(this.value);
};
// 文本框内容改变时触发:onchange
input.onchange = function () {
console.log('内容已经被修改');
};
// 文本框内容被选中时触发:onselect
input.onselect = function () {
console.log('我不想当干部');
};
</script>
</body>
</html>版权声明：本文为mengfanshaoxia原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。