操作BOM对象；操作DOM对象（更新；删除；插入节点）

操作BOM对象

浏览器介绍

BOM：浏览器对象模型

• IE
• Safari
• Chrome
• FireFox

三方

• QQ浏览器
• 360浏览器

window

window代表浏览器窗口

window.alert(1)
undefined

window.innerHeight
258

window.innerWidth
900

window.outerHeight
993

location

location代表当前页面的URL信息

host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload() //刷新页面
//设置新的地址
location.assign（https：//。。。。/）

document

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

document.title
"百度一下，你就知道"
document。title=‘呵呵’
“呵呵”

获取具体的文档树节点

<dl id="app">
     <dt>JAVA</dt>
     <dd>a</dd>
     <dd>b</dd>
</dl>

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

获取cookie

document.cookie
"__guid=.........."

劫持cookie原理
wwwtaobao.com

有时当点击恶意弹窗时
<script src="aa.js"></scrpt>
//恶意人员：获取你的cookie上传到他的服务器

服务器端可以设置：cookie：httpOnly 这样可以保证安全性

history

history代表浏览器的历史记录

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

操作DOM对象

核心

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

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

要操作一个dom节点，就必须要现先获得这个dom节点

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

            获得dom节点：
<script>
   //对应css选择器
   var h1 = document.getElementsByTagName('h1');
   var p1 = document.getElementsById('p1');
   var p2 = document.getElementsByClassName('p2');
   var father = document.getElementsById('father');

   var childrens = father.children;  //获取父节点下的所有子节点
           // father.firstChild
           // father.LastChild
</script>

以上是原声代码，之后尽量使用jQuery();

更新dom节点

<div  id="id1">
</div>

<script>
  var id1 = document.getElementById(‘id1’);
  
</script>




页面的控制台console上测试：

首先 document.getElementById('id1')  回车之后发现可以获取到这个节点
 然后可以进行   var id1 = document.getElementById('id1'); 将获取到的赋给id1，然后对这个id1进行操作 如下
id1.innerText='123'                     可以修改文本的值
"123"
id1.innerText='456'
"456"
id1.innerHTML='<string>123</string>'    可以解析HTML文本标签(这是在id1里面新建了一个)
"<string>123</string>"

通过js来修改css：

id1.style.color = 'yellow';
id1.style.fontSize = '20px';    //注意这里是驼峰命名法，属性使用 字符串 包裹
id1.style.padding = '2em';

删除DOM节点

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

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

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


  //删除是一个动态的过程,所以下面这个操作不对，删除完第一个，总数也就减少了
  father.removeChild(father.children[0])
  father.removeChild(father.children[1])
  father.removeChild(father.children[2])
</script>

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

插入节点

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

追加（已存在的节点）appendChild

<p id = "js">1</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);        将js这个元素添加到list元素的里面，追加到后面   
     
</script>

效果：

创建一个新的标签，然后再插入 先createElement 再appendChild

<script>
   var  js  =  document.getElementById('js');
   var  list = document.getElementById('list');
   
   通过JS创建一个新的节点：
   var newp = document.createElement('p');   创建一个p标签
   newp.id = 'newp';
   newp.innerText = 'hehe';

   然后再添加进去
   list.appendChild(newp);
    
</script>