以下是对Javascript操作BOM对象与DOM的学习

---

操作BOM对象(重点)

浏览器介绍
JavaScript 和浏览器关系？
JavaScript诞生就是伪类能够让他在浏览器中运行！
BOM：浏览器对象模型

内核

• IE 6-11
• Chrome
• Safari
• FireFox
• Opera

window(重要)

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
271
window.innerWidth
1088
window.outerHeight
805
window.outerWidth
1104

Navigator(不建议使用)

navigator,封装了浏览器的信息

navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被人为修改！
不建议使用这些属性来判断和编写代码

screen
代表屏幕尺寸

screen.width
1536
screen.height
864

location (重要)

location代表当前页面的URL信息

host:"www.baidu.com"
href: " https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()  //刷新网页
location.assign('https://pengzhenglong.github.io/')//设置新的地址

document(内容)

document代表当前的页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title='DragonPeng'
"DragonPeng"

获取具体的文档树节点

<dl id="app">
  <dt>java</dt>
  <dd>javase</dd>
  <dd>javaEE</dd>
</dl>

<script>
  var dl = document.getElementById('app');
</script>

获取cookie

document.cookie

劫持cookie原理

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

服务端可以设置cookie:httpOnly

history(不建议使用)

history代表浏览器的历史记录

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

操作DOM对象(重点)

核心

浏览器网页就是一个Dom树形结构！

• 更新：更新Dom节点
• 遍历Dom节点：得到Dom节点
• 删除：删除一个Dom节点
• 添加：添加一个新的节点
  要操作一个Dom节点，就必须要先获得这个Dom节点

获取dom节点

// 对应css选择器
var h1 = document.getElementsByTagName('h1');
var h1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementById('father');
var childrens = father.children[index]; //获取父节点下的所有子节点
//   father.firstChild;
//   father.lastChild;

这是原生代码，之后我们尽量都使用JQuery();

更新节点

操作文本

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

操作css

id1.style.color='red';  //属性使用  字符串
id1.style.fontSize='20px'; //_转驼峰命名问题
id1.style.padding  ='2em'  

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father"></div>
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

 <script>
var self = document.getElementById('p1');
var  father = p1.parentElement;
father.removeChild(self);

//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>

注意：删除多个节点的时候，children是再时刻变化的，删除节点的时候一定要注意！

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
  <p id="se">JavaSE</p>
  <p id="ee">JavaEE</p>
  <p id="me">JavaMe</p>
</div>

<script>
  var js = document.getElementById('js');
  var list = document.getElementById('list');
</script>

效果:

创建一个新的标签，实现插入

<script>
  var js = document.getElementById('js'); //已经存在的节点
  var list = document.getElementById('list');
  //通过JS创建一个新的节点
  var newP = document.createElement('p'); //创建一个P标签
  newP.id = 'newP';

  newP.innerText = 'hello.DragonPeng';
  //创建一个标签节点
  var myScript = document.createElement('script');
  myScript.setAttribute('type', 'text/javascript');

  //可以创建一个Style标签
  var myStyle = document.createElement('style'); //创建了一个空style标签
  myStyle.setAttribute('type', 'text/css');
  myStyle.innerHTML = 'body{background-color: blue;}'; //设置标签内容
  document.getElementsByTagName('head')[0].appendChild(myStyle);
  //   list.appendChild(js);
  //   list.append(newP);
</script>

insert

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点，insertBefore(newNode, targetNode);
list.insertBefore(js, ee);

基于B站视频学习 特别感谢up主 遇见狂神说