本文介绍了JavaScript中的BOM（浏览器对象模型）和DOM（文档对象模型），包括window对象、window子对象（如navigator、screen、history和location）、弹出框、计时功能、HTMLDOM操作、节点查找和操作、事件绑定等内容，展示了如何在实际开发中使用这些技术进行页面交互和动态更新。
14. BOM与DOM
JavaScript分为ECMAScript，BOM，DOM。前面我们学过ECMAScript，现在来学习下BOM与DOM
- BOM（Browser Object Model）是指浏览器对象模型，为了操作浏览器出现的 API，window 是其的一个对象，它使JavaScript 有能力与浏览器进行“对话”，是对浏览器本身进行操作；
- DOM （Document Object Model）是指文档对象模型，为了操作文档出现的 API，document 是其的一个对象，通过它，可以访问HTML文档的所有元素，是对浏览器（可看成容器）内的内容进行操作
- Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()
14.1 window对象
所有浏览器都支持window对象，它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。全局函数是 window 对象的方法
一些常用的Window方法：
1、window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
2、window.open() - 打开新窗口
window.close() - 关闭当前窗口 (只能关闭用JS的window.open()打开的页面）
14.2 window子对象
1、navigator对象（了解即可）
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息
navigator.appName // Web浏览器全称
navigator.appVersion // Web浏览器厂商和版本的详细字符串
navigator.userAgent // 客户端绝大部分信息
navigator.platform // 浏览器运行所在的操作系统
2、screen对象（了解即可）
屏幕对象，不常用
screen.availWidth // 可用的屏幕宽度
screen.availHeight // 可用的屏幕高度
3、history对象（了解即可）
window.history对象包含浏览器的历史。浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用来前进或后退一个页面
4、location对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
location.href // 获取URL
location.href="URL" // 跳转到指定页面
location.reload() // 重新加载页面,就是刷新一下页面
14.3 弹出框
1、警告框
警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作
alert("message");
2、确认框（了解即可）
确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。主要用途就是我们可以根据返回的true和false来判断一下，然后根据这个值来使用location去跳转对应的网站
confirm("message")
3、提示框（了解即可）
提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操作。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，也就是下方自定义的message2，如果没有默认值那么返回null
prompt("message1","message2")
14.4 计时相关
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件
1、setTimeout() ：一段时间后做一些事情，其设置语法如下
var t1 = setTimeout("JS语句", 毫秒)
var t2 = setTimeout(function() {JS语句;}, 毫秒)
clearTimeout()：清除计时事件
clearTimeout()
2、setInterval()：每隔一段时间做一些事情，其设置语法如下setInterval()方法可按照指定的周期来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数
setInterval("JS语句",时间间隔毫秒)
clearInterval()：清除计时事件
clearInterval()
15. DOM
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树
15.1 HTML DOM 树
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
① 文档节点(document对象)：整个文档
② 元素节点(element对象)：元素（标签）
③ 文本节点(text对象)：元素（标签）中的文本
④ 属性节点(attribute对象)：属性，元素（标签）才有属性
⑤ 注释节点(comment对象)：注释
JavaScript可以通过DOM创建动态的 HTML：JavaScript能够改变页面中的所有HTML元素、HTML 属性、CSS 样式，能够对页面中的所有事件做出反应（鼠标点击事件，鼠标移动事件等）
15.2 查找标签
和css一样，你想操作某个标签需要先找到它
15.2.1 直接查找
15.2.1.1 ID属性获取标签元素
document.getElementById()
我们在HTML文件中写入一段代码，包含一个id属性为d1的div标签，在浏览器中利用如上的方法，找到这个div标签，并对其中的内容进行修改
15.2.1.2 类名获取标签元素
document.getElementsByClassName()
同样的，我们也可以用class属性进行查找，由于class属性可以重复，我们可以获取多个元素，所以返回的是一个数组
15.2.1.3 标签名获取标签元素
document.getElementsByTagName
15.2.2 间接查找
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
同样的，我们还是在HTML文件中写入这样几个标签，先找到其中id属性值为d1的div1标签，来间接查找其他的标签
1、找到当前标签的父节点标签元素
parentElement
2、找到当前标签的所有子标签元素
children
3、找到当前标签的第一个/最后一个子标签元素
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
4、找到当前标签的上一个/下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
nextElementSibling 下一个兄弟标签元素
15.3 节点操作
15.3.1 元素（标签）节点操作
15.3.1.1 创建节点
var a = document.createElement('a');
a.innerText = 'message';
15.3.1.2 添加节点
1、添加一个子节点（作为最后的子节点）
var d = document.getElementById('d');
d.appendChild(a);
这样a标签及内容就会被插入d标签的子标签内部，作为最后一个子标签节点。例如我们看下面这个案例，首先写好一个HTML文件，我想创建一个a标签，并把它插入到div2标签的子标签里
2、添加一个子节点（放到某个节点的前边）
var d = document.getElementById('d');
var d2 = document.getElementById('d2');
d.insertBefore(a,d2);
这样a标签及内容就会被插入d标签的子标签内部，并且位于d2子标签的前面。例如我们看下面这个案例，首先写好一个HTML文件，我想创建一个a标签，并把它插入到div1标签的子标签里，且要位于span2标签的前面
15.3.1.3 删除节点
var d = document.getElementById('d');
var d1 = document.getElementById('d1');
d.removeChild(d1);
这样d1标签及内容就会被删除。例如我们看下面这个案例，首先写好一个HTML文件，我想创建这个span2标签，首先我要找到它的父级标签，也就是div1标签，再找span2标签进行删除
15.3.1.4 替换节点
var d = document.getElementById('d');
var d1 = document.getElementById('d1');
d.replaceChild(a,d1);
这样d标签的子标签d1标签及内容就会被a标签所替换。例如我们看下面这个案例，首先写好一个HTML文件，我想创建一个a标签来替换原有的span2标签，首先我要找到它的父级标签，也就是div1标签，再找span2标签进行替换
15.3.2 文本节点操作
15.3.2.1 获取文本节点的值
divEle.innerText 不识别标签，只识别标签和内部标签的文本内容
divEle.innerHTML 同时识别标签和内部标签的标签+文本内容
15.3.2.2 设置文本节点的值
如上可知innerText能对标签的内容进行改变，但innerHTML能对标签的超链接进行识别
15.3.3 属性节点操作
15.3.3.1 查看属性
divEle.getAttribute('属性')；
15.3.3.2 增加属性
divEle.setAttribute('属性','属性值')；
15.3.3.3 删除属性
divEle.removeAttribute('属性');
15.3.3.4 更改属性
divEle.setAttribute('属性','新的属性值')
15.3.3.5 自带属性的操作
如果是标签自带属性，可以通过“.的方式”获取或者设置属性值
a标签的href ，img的src属性等
var a1 = document.getElementById('a1');
获取href属性
console.log(a1.href);
设置href属性
a1.href = 'http://www.baidu.com';
15.3.4 特殊标签属性操作
找到id属性值为d的a标签
var a = document.getElementById('d');
获取a标签的值
a.value
修改a标签的值
a.value = '新的值'
这个语法对于以下的三个标签均适用，用户输入或者选择类型的标签
15.3.4.1 输入框 - input
15.3.4.2 选择框 - select
15.3.4.3 文本框 - textarea
15.3.5 类值的操作
其实class类也算是属性节点操作，关于它的增删改查可见15.3.3属性节点操作。只不过这个属性比较特殊，我们可以通过它做很多效果
先获取标签对象
var a = document.getElementById('d');
获取所有样式类名(字符串)
a.className
添加指定类
a.classList.add(cls)
删除指定类
a.classList.remove(cls)
存在此类属性值返回true，否则返回false
classList.contains(cls)
15.3.5.1 类值的增加
类值的增加，就会出现后面的类属性样式覆盖掉前面的类属性样式，导致标签的整体样式发生改变的情况
15.3.5.2 类属性的动态展示
classList.toggle(cls) ：存在该类属性值就删除并返回false，否则就添加上并返回true。那我们启用一个定时任务，反复执行toggle，反复增加和删除该标签内的class类属性值，通过显示不同的style样式，那就可以做到来回切换标签的展示效果
15.3.6 CSS操作
JS操作CSS属性的规律：
1、对于没有中横线的CSS属性一般直接使用“style.属性名”即可，如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2、对含有中横线的CSS属性，将“中横线后面的第一个字母换成大写”即可。如：
obj.style.backgroundColor
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily
15.4 事件
HTML 4.0的新特性之一是有能力使HTML事件触发浏览器中的动作（action），比如当用户点击某个HTML元素时启动一段JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作
。 。 。 // 练习：输入框 。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. 。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动） 。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. 。 。 。 。 。 。 。 。 。
| 属性 | 事件说明 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄 |
| ondblclick |
当用户双击某个对象时调用的事件句柄 |
| onfocus | 元素获得焦点 |
| onblur | 元素失去焦点 |
| onchange | 域的内容被改变 |
| onkeydown | 某个键盘按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup |
某个键盘按键被松开 |
| onload | 一张页面或一幅图像完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout |
鼠标从某元素移开 |
| onmouseover | 鼠标移到某元素之上 |
| onselect | 在文本框中的文本被选中时发生 |
| onsubmit | 确认按钮被点击，使用的对象是form |
15.4.1 绑定方式
我们现在HTML中写入以下内容：先设置一个200x100的红色div框框，再设置一个鼠标左键点击事件，当鼠标左键点击这个div框框，框框的填充色由红色变为蓝色
1、方式一：将JS代码写到HTML文件标签里（不便于后期维护，不常用）
这种方式是找到当前的标签，进行事件的改变。因此我们也可以对这个函数添加参数this，因为这个onclick事件写在这个div标签内，所以这个this就表示当前的这个div标签，可直接对当前的div标签进行时间的改变，代码展示如下：
2、方式二：独立写到JS代码里（常用）
扫一扫
4596
到【灌水乐园】发言
