JAVA前端———JavaScript—BOM对象—DOM对象

BOM对象

DOM是BOM的一部分

• 定义：Browser Object Model——浏览器对象模型
• 作用：访问和操作浏览器窗口

1. BOM提供了独立于内容，而与浏览器窗口进行交互对象
2. BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
3. 用途：通过使用BOM ，可移动窗口，更改状态栏文本，执行其他不与页面内容发生直接联系的操作 ，了解与浏览器窗口交互的对象

Window对象

• BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
• 其他的所有对象都是通过它延伸出来的，也可以称为window的子对象。
• 定义：表示浏览器的一个实例————浏览器窗口
• 作用：移动、调整浏览器大小
• 全局作用域：若在全局环境中用var定义了对象、变量或函数都会被添加到window对象中

window.alert('你好啊')
undefined
window.open('https://www.baidu.com/index.php?tn=SE_desk'); —————— 打开百度网页
Window {parent: Window, opener: Window, top: Window, length: 0, frames: Window, …}
window.close() —————— 关闭当前窗口
window.innerHeight
226
window.innerWidth
1538
window.outerHeight
612
window.outerWidth
1552

navigator

• 作用：获取客户端浏览器和操作系统信息

navigator.appName —————— 当前应用名
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36"
navigator.platform
"Win32"

scream

• 作用：获取有关客户端显示屏幕的信息

screen.width
1536
screen.height
864

location

• 作用：获取和改变当前浏览的网址
• 当前在百度网页上

location.host —————— 主机名
"www.baidu.com"
location.href —————— 当前地址
"https://www.baidu.com/"
location.protocol —————— 协议
"https:"
location.reload() —————— 刷新页面
location.assign('https://www.taobao.com/') —————— 跳转到设定的界面

history

• 作用：获取浏览器的历史记录

history.back() —————— 退回上一个界面
history.forward() —————— 前进下一个界面

document

• 定义：代表浏览器当前界面

document.title  —————— 查看当前浏览器题目
"DOM"
document.title = '你好啊'  —————— 修改当前浏览器题目
"你好啊"

• 获取cookie——客户端信息

document.cookie
"BAIDUID=9BFCFA46A402338EC79CA57051AB22B9:FG=1; BIDUPSID=9BFCFA46A402338EC79CA57051AB22B9; PSTM=1576826687; BD_UPN=12314753; BDRCVFR[xT0U_WB6ih0]=FZ_Jfs2436CUAqWmykCULPYrWm1n1fz; delPer=0; BD_HOME=0; H_PS_PSSID=1465_21088_26350_22160"

• 获取具体的文档树节点

<dl id="Subject">
    <dt>信息工程</dt>
    <dd>软件工程</dd>
    <dd>计算机科学与技术</dd>
</dl>

在网页上获取节点

document.getElementById('Subject');
<dl id=​"Subject">​…​</dl>​<dt>​信息工程​</dt>​<dd>​软件工程​</dd>​<dd>​计算机科学与技术​</dd>​</dl>​

DOM对象

• 定义：Document Object Model ———— 文档对象模型（操作页面的元素）

若要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型（DOM）来获得的

• 作用
• 1. 找对象（元素节点）
• 2. 设置元素的属性值
• 3. 设置元素的样式
• 4. 动态创建和删除元素

DOM树

• 1. html 根元素 ——页面中都有一个根标签html，里面有很多元素
• 2. element 元素 ——页面中的所有的标签都是元素,元素可以看成是对象
• 3. node 节点 ——页面中所有的内容都是节点
• 元素节点——html标签,属性节点——标签的属性,文本节点——标签中的文字

• 一个页面就是一个文档

1. 获取节点：要操作一个节点 就要先获得节点

div id="fu">
    <h1>这是一级标题</h1>
    <p id="p1">这是第一个段落</p>
    <p class="p2">这是第二个段落</p>
    <h2 id="h2">你好啊</h2>
</div>

在网页中调试

document.getElementById('fu'); —————— 获得id名=xx的节点
<div id=​"fu">​…​</div>​
document.getElementsByTagName('h1') —————— 获得标签名=xx的节点
HTMLCollection [h1]
document.getElementById('p1');
<p id=​"p1">​这是第一个段落​</p>​
document.getElementsByClassName('p2'); —————— 获得class名=xx的节点
HTMLCollection [p.p2]length: 10: p.p2__proto__: HTMLCollection

获取父节点下的所有子节点

fu.children
HTMLCollection(4) [h1, p#p1, p.p2, h2#h2, p1: p#p1, h2: h2#h2]
fu.children[2]
<p class=​"p2">​这是第二个段落​</p>​
fu.firstChild
fu.lastChild

2. 更新节点

var h = document.getElementById('h2');
h.innerText = '你好啊2020'; —————— 修改文本的内容
"你好啊2020"
h.innerHTML = '  <a href="">我是一个链接 点我点我</a>'; —————— 修改文本内容（可以解析html标签）

注意：属性全部用字符串包住！

h.style.color = 'red';
h.style.fontSize = '15px';
h.style.padding = '5px';

3. 删除节点

先获取父节点 通过父节点删除子节点

• 方法一

var f = document.getElementById('fu')
var z = document.getElementById('p1')
f.removeChild(z)

• 方法二————不建议

f.remove(f.children[0])
f.remove(f.children[1])
f.remove(f.children[2])

• 注意：删除节点是动态的过程 当删除了第一个节点时 原本的第二个节点就会变成第一个

4. 插入节点

• 交换位置
  获取到一个父节点时 若父节点内为空 可通过innerHTML添加新的节点
  若父节点不为空则不可 会覆盖原来的节点

<div id="fu">
    <p id="cql">陈情令</p>
    <div id="list">
        <p id="qyn">庆余年</p>
        <p id="jyzx">锦衣之下</p>
        <p id="aqgy">爱情公寓</p>
        <p id="zss">三生三世枕上书</p>
    </div>

在网页中操作

var list = document.getElementById('list')
var cql = document.getElementById('cql')
list.appendChild(cql)  —————— 把陈情令添加到list中（最后一个）

• 创建一个新节点 插入

var newpp = document.createElement('p'); —————— 创建一个新节点
newpp.id = 'newpp' —————— 设置节点的id
newpp.innerText = '想见你' —————— 设置节点的内容
list.appendChild(newpp) —————— 添加进去

var myscript = document.createElement('script');
myscript.getAttribute('type','text/javaScript'); 
          ——————等价于：myscript.type = 'text/javaScript'

添加节点style 设置背景

var myStyle= document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color: pink;}';
var head = document.getElementsByTagName('head')[0]
head.appendChild(myStyle)

insertbefore ———— 把xx放在xx之前

var list = document.getElementById('list')
var aqgy = document.getElementById('aqgy')
var jyzx = document.getElementById('jyzx')
list.insertBefore(aqgy,jyzx) —————— 把aqgy放在jyzx前面