2021-01-24网络部(JavaScript 操作BOM对象、Dom对象)

一、BOM对象

1.操作BOM对象

1）浏览器介绍
JavaScript和浏览器的关系：JavaScript的诞生就是为了能够让它在浏览器中运行。
常用浏览器：IE 6~11（8版本后改动非常大）、Chrome、Safari、FireFox（Linux上默认的）
第三方浏览器：QQ浏览器、360浏览器…
2）window代表浏览器窗口
①弹窗 window.alert()
②内部高度 window.innerHeight
③内部宽度 window.innerWidth
④外部高度 window.outerHeight
⑤外部宽度 window.outerWidth
可以调整浏览器窗口大小调试
3）navigator封装了浏览器的信息
①应用名 navigator.appName
②浏览器版本 navigator.appVersion
③用户信息 navigator.userAgent
④系统版本 navigator.platform
大多数时候，不会使用navigator对象，因为会被人为修改。
不建议使用这些属性来判断和编写代码。
4）screen代表屏幕尺寸
①屏幕宽度 screen.width
②屏幕高度 screen.height
5）location代表当前页面信息的URL信息
以百度为例
①主机 host "www.baidu.com"
②当前指向位置 href 用来跳转网页 "https://www.baidu.com/"
③协议 protocol "https"
④重新加载 reload 用于刷新网页 f reload()
⑤设置新地址 location.assign()
6）document代表当前页面 DOM数
①页面标题 document.title
例：

 

<dl id="app">
  <dt>Java</dt>
  <dd>JavaSE</dd>
  <dd>JavaEE</dd>
</dl>
<script>
  var dl = document.getElementById('app');
</script>

②能获取具体的文档树结点，能动态的增加或删除结点，就能动态的修改文章。
③获取cookie document.cookie
劫持cookie原理：网页弹出别人植入的弹窗（引入了js），在js中写了get一个document.cookie，然后再用Ajax请求到他的服务器上。
以登录淘宝，天猫也登录了为例
服务器端可以设置cookie:httpOnly，来保证安全性。
7）history代表浏览器的历史记录
①前进 history.forward()
②后退 history.back()

二、DOM对象

核心：浏览器网页就是一个DOM树形结构。

 

1.获得DOM结点

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

<div id="father">
  <h1>标题一</h1>
  <p id="p1">p1</p>
  <p class="p2">p2</p>
</div>
<script>
  //对应CSS选择器
  var h1 = document.getElementsByTagName('h1');
  var p1 = document.getElementById('p1');
  var p2 = document.getElementsByClassName('p2');
  var father = document.getElementById('father');
  var childrens = father.children;//获取父节点下的所有子节点
</script>

①获得父节点的第一个子节点 father.firstChild
②获得父节点的最后一个子节点 father.lastChild
这是JS的原生代码，以后尽量使用jQuery。

2.更新DOM节点

例：通过id获取节点，其id为id1。
1）操作文本
①修改文本的值 id1.innerText
②可以解析HTML文本标签 id1.innerHTML
2）操作CSS

 

id1.style.属性 = '值';

注：Ⅰ属性使用字符串包裹。
Ⅱ属性中-转驼峰命名。

3.删除DOM节点

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

 

<div id="father">
  <h1>标题一</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是在时刻变化的，删除节点的时候一定要注意。

4.创建和插入DOM节点

当获得了某个DOM节点，假设这个DOM节点是空的，可以通过innerHTML就可以增加一个元素了。但是如果这个DOM节点已经存在元素了，就不会这样操作，会产生覆盖。
1）追加
例：

 

<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');
  list.appendChild(js);//追加到后面
</script>

结果为

 

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

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

 

var js = document.getElementById('js');
var list = document.getElementById('list');
//通过JS创建一个新的节点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'Hello World';
list.appendChild(newP);//创建的p标签追加到list中
//创建一个标签节点
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
body.appendChild(myScript);
//可以创建一个style标签
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:blue}';//设置style的标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);

3）insertBefore
语法：

 

要包含的节点.insertBefore(newNode,targetNode);

例：在ee的前面插入js

 

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
list.insertBefore(js,ee);