JavaScript04（操作BOM对象，操作DOM对象）

1.BOM对象

大二上学期上了企业课，听BOM对象听得云里雾里的，到现在才搞明白原来是跟浏览器一些对象属性挂钩的。

那就来浅说JavaScript和浏览器的联系吧，其实就一句话嘻嘻

JavaScript是为了能够让它（BOM对象）在浏览器运行！

BOM：浏览器对象模型

其实它本质是一个B/S，就是浏览器与服务器的一个互动

1.1 window----全局作用域

window代表的是浏览器窗口

1.2 Navigator--------封装浏览器信息（容易被人修改，不建议使用）

 1.3 screen

1.4 location ----代表当前页面URL的信息

 1.5 document----当前的页面 HTML，DOM文档树

 获得具体的文档树节点

  

1.6 获取cookie

document.cookie

 劫持cookie原理

<script src="tt.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器 -->

服务器端可以设置cookie：httpOnly

1.7 history

history.back();//后退
history.forward();//前进

2.DOM对象

DOM对象就是JS原生选择器获得的一个对象

比如 let div=document.getElementById('div');

那么div就是DOM对象

2.1 获得DOM节点

浏览器网页就是一个DOM的树形结构

• 更新：更新DOM节点
• 遍历DOM节点：得到DOM节点
• 删除：删除一个DOM节点
• 增加：添加一个新的节点

 (原生代码)（那个lc那里注释写错了，应该是获得最后一个子节点）

2.2 更新DOM节点

操作文本：

• di1.innerText='123' 修改文本的值
• di1.innerHTML='<strong>456</strong>' 可以解析HTML文本标签

操作css

之前我一直有个疑问，有时候在控制台可以修改某个节点的属性等等，但是在源代码中打开网页一样是原来的样子，其实这个就是DOM节点的特点所在，能够动态的修改（更新）节点属性

 在控制台直接更新了外边距

PS： 也可以再body里设置一个空盒子，直接在控制台给它添加文本和文本属性

2.3删除DOM节点

要利用父节点来删除自己，不能直接自己删除自己

 注意这里应该先删除前面的子节点，不能跳到后面来删除后面的子节点

p1parent.removeChild(p1parent.children[0]);

 删除多个子节点的时候，children是不断变化的，需要注意

2.4创建和插入DOM节点

当我们获得了某个DOM节点，假如这个DOM节点是个空的，纳闷我们可以利用innerHTML添加元素，反之则不能，因为会被覆盖掉。

追加：

 创建：

 有时候创建了却没显示出来，可能是没有进到这个文档里，这时我们需要丢入到它平常被运用到哪个块内（比如上图的style一般是放在head里面的，所以就丢入到和head里面）