Javaweb - 6 BOM 编程 和 DOM 编程
目录
什么是 BOM
window 对象的常见属性和方法
三种弹窗
定时任务
history
location
sessionStorage 和 localStorage
什么是 DOM 编程
了解 document
获取页面元素的几种方式
1. 直接获取
2. 间接获取
操作元素属性值
1. 操作元素属性
2. 操作元素的样式
3. 操作元素的文本
4. 增删元素
代码演示：
获取页面元素：
对元素进行操作：
完！
什么是 BOM
BOM Browser Object Model 的简写，即浏览器对象模型。
BOM 由一系列对象组成，是访问，控制，修改浏览器的属性和方法。
BOM 没有统一的标准（每种客户端都可以自定标准）
BOM 编程是将浏览器窗口的各个组成部分，抽象成各个对象，通过各个对象的 API 操作组件行为，的一种编程。
理解 BOM：
当我们在浏览器随便搜索一个页面，例如 www.baidu.com，出现的整个浏览器窗口，我们就可以抽象成一个对象，这个对象，就是 window 对象
整个 window 对象，是由一些小组件组成的：
那这些小组件是如何和 window 对象产生关系的呢？其实，这些小组件，就是 window 对象的属性
即，BOM 编程的对象结构如下：
window 顶级对象，代表整个浏览器窗口
location 属性，代表浏览器的地址栏
history 属性，代表浏览器的访问历史
screen 属性，代表屏幕
navigator 属性，代表浏览器软件本身
document 属性，代表浏览器窗口目前解析的 html 文档
console 属性，代表浏览器开发者工具的控制台
localStorage 属性，代表浏览器的本地数据持久化存储
sessionStorage 属性，代表浏览器的本地数据会话级存储
通过 window 对象及其属性的 API，来控制浏览器的属性和行为。
window 对象的常见属性和方法
window 对象是由浏览器提供给我们使用的，不需要我们自己 new。
并且，前面的 window. 也可以省略不写。
三种弹窗
有三种弹窗方式：
alert 信息提示框
prompt 信息输入框
confirm 信息确认框
window 还有一个方法是 定时任务：
定时任务
window.setTimeout（），有两个参数，第一个参数是一个方法，表示时间截至后要做的事情，第二个参数是时间，ms 为单位~
history
history 实现向前向后翻页
我们可以再创建一个 htlm 页面，由那个页面来跳转到我们这个测试页面~
点击“跳转”
来到我们的测试页面
我们再点击上一页，回到了跳转页面~
实现向前或者向后翻页，还有一个方法是：
history.go()，() 中，如果是向前翻 1 页，就填 -1，向后翻 1 页，就填 1
location
location 方法：
点击“跳转百度”的按钮，即可跳转~
sessionStorage 和 localStorage
sessionStorage 用于存储一些会话级的数据（浏览器关闭重启后，数据会清除）
localStorage 用于存储一些持久级的数据（浏览器关闭重启后，数据还在）
点击按钮后，就可以在开发者模式下找到两个存储 valueA 和 valueB
但是，当我们将浏览器关闭后，重新再打开，发现会话存储中的 valueA 就没有了，但是本地存储中的 valueB 还是一直在哪里静静等着我们~
什么是 DOM 编程
简单来说：DOM（Document Object Model）编程，就是使用 document 对象的 API，完成对网页 HTML 文档，进行动态修改，以实现网页数据和样式动态变化效果的编程。
举个栗子说明：
如上图，客户端的浏览器，输入对应的 url，打开了服务器对应的 index.html 的页面，index.html 页面中，存放的是如图的代码。服务器将代码返回给客户端。
当返回给客户端的浏览器的时候，是先会根据返回的内容，生成一个 document 对象，然后，浏览器再展示 document 对象上的元素。
这样，就实现了，用户在不用修改服务器代码的同时，还可以对打开的页面进行动态修改
==》
即，通过对 document 对象进行修改，就可以实现网页数据和样式动态变化效果的编程~
这样的编程，就是 DOM 编程~
我们打开 html 页面，在 开发者模式情况下，就可以找到 document 对象了。下图红色框中圈主的，整体就是 document 对象~ 可以在红框中的位置直接进行修改~
我们接下来研究的，就是通过 JS 代码，来对 document 中的元素进行操作~
在对 document 中的元素进行操作之前，我们可以先来了解一下这个 document ~
了解 document
document 是一种逻辑结构，是一种树形结构的对象
如我们上面的那段代码：
<html lang="en">
<head><meta charset="UTF-8"><title>我是一个标题</title>
</head>
<body><div class = "outerDiv"><div class = "innerDiv d1">框1</div><div class = "innerDiv d2">框2</div><div class = "innerDiv d3">框3</div></div></body>
</html>可以抽象为如下的树形结构：
但上图其实并不是详细的 document 树
dom 树中的节点类型：
node 节点：
element 元素节点 代表一个完整的标签
attribute 属性节点 代表元素的属性
text 文本节点 代表双标签中间的文本
所以上面的树可以再细化成这样：
了解了 document 我们就更清楚的了解了 DOM 和 BOM 编程之间的关系，如下图：
获取页面元素的几种方式
1. 直接获取
2. 间接获取
操作元素属性值
1. 操作元素属性
2. 操作元素的样式
元素.style.样式名 = "" 注意：如果样式名中带有“-”，则要进行驼峰转换~
3. 操作元素的文本
4. 增删元素
代码演示：
获取页面元素：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>// 1. 获取 document// 2. 通过 document 获取元素function fun1() {var el1 = document.getElementById("username"); // 根据元素的 id 值获取页面上唯一的一个元素console.log(el1);}function fun2() {var el2 = document.getElementsByTagName("input");for (var i = 0; i < el2.length; i++) {console.log(el2[i]);}}function fun3() {var el3 = document.getElementsByName("aaa");for (var i = 0; i < el3.length; i++) {console.log(el3[i]);}}function fun4() {var el4 = document.getElementsByClassName("a");for (var i = 0; i < el4.length; i++) {console.log(el4[i]);}}function fun5() {// 1. 先获取父元素var div01 = document.getElementById("div01");// 2. 通过父元素，获取所有子元素var cs = div01.children;for(var i = 0; i < cs.length; i++) {console.log(cs[i]);}// 通过父元素获取第一个子元素console.log(div01.firstElementChild);// 通过父元素获取最后一个子元素console.log(div01.lastElementChild);}function fun6() {// 1.先获取子元素var pinput = document.getElementById("password");// 2. 通过子元素获取父元素console.log(pinput.parentElement);}function fun7() {// 1. 获取子元素var pinput = document.getElementById("password");// 2.1 获取子元素前面第一个元素console.log(pinput.previousElementSibling);// 2.2 获取子元素后面第一个元素console.log(pinput.nextElementSibling);}</script></head><body><div id="div01"><input type="text" class="a" id="username" name="aaa" /><input type="text" class="a" id="password" name="aaa" /><input type="text" class="b" id="email" /><input type="text" class="a" id="address" /></div><inputtype="button"value="通过父元素获取子元素"onclick="fun5()"id="btn05"/><inputtype="button"value="通过子元素获取父元素"onclick="fun6()"id="btn06"/><inputtype="button"value="通过当前元素获取兄弟元素"onclick="fun7()"id="btn07"/><hr /><input type="text" class="a" /><br /><inputtype="button"value="根据id获取指定元素"onclick="fun1()"id="btn01"/><inputtype="button"value="根据标签名获取多个元素"onclick="fun2()"id="btn02"/><inputtype="button"value="根据name属性值获取多个元素"onclick="fun3()"id="btn03"/><inputtype="button"value="根据class属性值获取指多个元素"onclick="fun4()"id="btn04"/></body>
</html>
对元素进行操作：
元素属性，元素样式，元素文本操作：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><script>function changeAttribute() {var in1 = document.getElementById("in1");// 获得属性值console.log(in1.type);console.log(in1.value);// 修改属性值in1.type = "button";in1.value = "哈喽哇"}function changeStyle() {var in1 = document.getElementById("in1");// 注意：原始样式名中，如果有 - 符号，则要更换为驼峰式~in1.style.color = "yellow";in1.style.borderRadius = "5px";}function changeText() {var div01 = document.getElementById("div01");// innerText 修改后 无法显示对应的 HTML 标签 只以 文本形式输出div01.innerText = "<h1>嗨</h1>";console.log(div01.innerText)// innerHTML 修改后 可以显示对应的 HTML 标签 以h1的标题形式显示了div01.innerHTML = "<h1>嗨</h1>";console.log(div01.innerText);}</script><style>#in1{color:red;border-radius: 3px;}</style>
</head>
<body><input id = "in1" type = "text" value = "hello"><hr><div id = "div01">hello</div><button onclick = "changeAttribute()">操作属性</button><button onclick = "changeStyle()">操作样式</button><button onclick = "changeText()">操作内容</button>
</body>
</html>增删元素：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><script>function addCs() {// 创建一个新的元素// 创建元素var csli = document.createElement("li"); //<li> </li>csli.id = "cs";csli.innerText = "长沙";// 将子元素放入父元素中// 获取父元素var cityul = document.getElementById("city");// 在父元素中追加子元素cityul.appendChild(csli);}function addCsBeforeSz() {// 创建一个新元素// 创建元素var csli = document.createElement("li");csli.id = "sc";csli.innerText = "四川";// 将子元素放入父元素var cityul = document.getElementById("city");// 在父元素中追加子元素var szli = document.getElementById("sz");// 添加新的元素// cityul.insertBefore(新元素，参考元素)cityul.insertBefore(csli,szli);}function replaceSh() {// 创建一个新元素// 创建元素var csli = document.createElement("li");csli.id = "xz";csli.innerText = "西藏";// 将子元素放入父元素中var cityul = document.getElementById("city");// 在父元素中追加子元素var shli = document.getElementById("sh");// 替换元素：// cityul.replacechild(新元素,被替换的元素);cityul.replaceChild(csli,shli);}function removeSx() {// 获取到要删除的元素后，调用 remove 函数即可实现删除~var sxli = document.getElementById("sx");sxli.remove();}function clearCity() {var cityul = document.getElementById("city");// 法1：逐条删除元素// var fc = cityul.firstChild;// while (fc != null) {// fc.remove();// fc = cityul.firstChild;// }// 法2：整个大 ul 删除// cityul.remove();// 法3：将大的 ul 里面内容置为空cityul.innerHTML = "";}</script></head><body><ul id="city"><li id="bj">北京</li><li id="sz">深圳</li><li id="sh">上海</li><li id="sx">山西</li></ul><hr /><!-- 目标1：在城市列表的最后添加一个子标签 <li id = "cs">长沙</li> --><button onclick="addCs()">在城市列表的最后增加长沙</button><!-- 目标2：在城市列表的深圳前增加一个子标签 <li id = "sc">四川</li> --><button onclick="addCsBeforeSz()">在深圳前面增加四川</button><!-- 目标3：将城市列表的上海替换为西藏 <li id = "xz">西藏</li> --><button onclick = "replaceSh()">将上海替换成西藏</button><!-- 目标4：将城市列表中的山西删除 --><button onclick = "removeSx()">将城市列表中的山西删除</button><!-- 目标5：清空城市列表 --> <button onclick = "clearCity()">清空城市列表</button></body>
</html>