文章目录
前言
本文是博主的一些笔记跟想法，如果觉得本文有点东西请个博主点个关注，你的支持是我更新的动力，先赞后看养成习惯。
以下是本篇文章正文内容
一、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 权重比较高
