以下是本篇文章正文内容
一、DOM 简介
1.1 什么是 DOM
一个完整的 JavaScript 实现由以下 3 个不同部分组成：
核心（ECMAScript）：语言核心部分，描述了该语言的语法和基本对象。
文档对象模型（Document Object Model，DOM）：网页文档操作标准，描述处理网页内容的方法和接口。
浏览器对象模型（BOM）：客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
官方语言： 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。另外一种简单的API是基于事件的SAX，它可以用于处理很大的XML文档，由于大，所以不适合全部放在存储器中处理。
文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示
DOM 把以上内容都看做是对象
二、获取元素
2.1 如何获取页面元素
DOM在我们实际开发中主要用来操作元素。
我们如何来获取页面中的元素呢?获取页面中的元素可以使用以下几种方式:
根据 ID 获取
根据标签名获取
通过 HTML5 新增的方法获取
特殊元素获取
2.2 根据 ID 获取
使用 getElementById() 方法可以获取带有 ID 的元素对象。
<form action=""> <input type="text" id="num" /><br> <input type="button" value="查看结果"/> </form> <script type="text/javascript"> //获取到id为num的input标签 document.getElementById('num') </script>
·通过id获取是比较简单快捷的方法·
2.3 根据标签名获取
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
<form action=""> <input type="text" id="num" /><br> <input type="button" value="查看结果"/> </form> <script type="text/javascript"> //获取到id为num的input标签 document.getElementsByTagName('input')//会获取到所有的input标签 </script>
注意：
因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
得到元素对象是动态的
2.4 通过 HTML5 新增的方法获取
document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合 document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象 document.querySelectorAll('选择器'); // 根据指定选择器返回
这里就说一下querySelector 与querySelectorAll
querySelector返回满足条件的第一个元素（node），而querySelectorAll返回满足条件的所有元素
在都没有满足条件的元素情况下：querySelector返回null，而querySelectorAll返回空的数组[ ]。
<div id="box"> <h2 class="box-text">h2</h2> <p class="box-text">p</p> </div> <button type="button" onclick="show()">点我</button> <script> function show(){ var x= document.getElementById('box') var arr = x.querySelectorAll('.box-text') for(var i=0; i<arr.length; i++){ arr[i].innerHTML='改变了！' } } </script>
2.5 获取特殊元素（body，html）
1.获取body元素
doucumnet.body // 返回body元素对象
2.获取html元素
document.documentElement // 返回html元素对象
三、事件基础
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解： 触发— 响应机制。
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。
3.1事件三要素
事件源 （谁）
事件类型 （什么事件）
事件处理程序 （要做什么）
var btn = document.getElementById('btn'); btn.onclick = function() { alert('你好吗'); };
3.2 执行事件的步骤
获取事件源
注册事件（绑定事件）
添加事件处理程序（采取函数赋值形式）
3.3常见的鼠标事件
注：以下图片的事件只是常见的并不代表所有
案例
以下案例用到了 经过触发 离开触发 点击触发 三个事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ display: block; margin: 0 auto; cursor: pointer; } </style> <script> function change(r){//形参 var imgobj = document.getElementById("img") //判断事件里面的实参 if(r=='horse'){ imgobj.src = "img/horse.jpg" }else if(r=='dog'){ imgobj.src= "img/dog.jpg" }else{ imgobj.src= "img/mokey.jpg" } } </script> </head> <body> <img src="img/dog.jpg" id="img" onmouseover="change('horse')" onmouseout="change('dog')" onclick="change('mokey')"> </body> </html>
四、操作元素
avaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性
4.1 常用元素的属性操作
innerText、innerHTML 改变元素内容
src、href
id、alt、title
案例
<body> <a href="https://www.sohu.com/" id="link" title="sohu">搜狐</a> </body> <script> window.onload=function(){ var liobj=document.getElementById("link") liobj.href="https://www.baidu.com" liobj.title='百度' liobj.innerHTML='百度' liobj.className='link' } </script>
<div id="box"> 我是div原来的文字 </div> <script> var box =document.getElementById("box") box.onmouseover=function(){ this.innerHTML='<font color="red">我是处理过的</font>' } box.onmouseout=function(){ this.innerText="<font color='red'>我是div原来的文字</font>" } </script>
4.2 样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
element.style 行内样式操作
element.className 类名样式操作
注意：
1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
