JavaScript中BOM对象的扩展

BOM对象

• window代表浏览器的窗口

• window.alert(1)
  undefined
  window.innerHeight
  254
  window.outerHeight
  123
  window.innerWidth
  255
  window.outerwidth
  211

• Navigator.appName
  navigator.appVersion//使用者的版本使用
  navigator.userAgent//用户的信息
  navigator.platform

• 代表屏幕的信息

• screen.width
  1920
  screen.height
  3400

• location(重要)代表当前页面的URL信息

• honst:"www.baidu.com"//主机
  href: "https://www.baidu.com/"//地址
  protocol: "https:"//协议
  location.reload()//刷新页面
  ​

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

• document.title
  "百度一下,你就知道"
  document.title = 'BOY说'
  "BOY说"

• 获取具体的文档树节点

• <dl id="app">
      <dt>123</dt>
      <dd>244</dd>
          <dd>244</dd>
              <dd>244</dd>
  </dl>
  <script>
  let name  = document.getElementByld('app');
  </script>

• 获取cookie

• document.cookie
  //获取的是个人的隐私例如账号

• 劫持cookie原理

• www.taoboa.com

• <script src="aa.js"></script>
  //恶意人员会设置js病毒将cookie上传到他的服务器

• history(不建议使用)

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

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

• 更新：跟新Dom节点

• 遍历dom节点；得到Dom节点

• 删除：删除一个Dom节点

• 添加: 添加一下新的节点

• 要操作一个Dom节点，就必须要获得这个Dom节点

• <div id = "father">
      <h1> 标题一 </h1>
      <p id = "p1" > p1 </p>
      <p class = "p2" >p2 <p>
  </div>
  <script>
  var h1 = document.getElementByTagName('h1');
  var p1 = document.getElementById('p1');
  var p1 = document.getElementByClassName('p2');
  var father = document.getElementById('father');
  ​
  let childrens = father.children;//获取父节点下的所有字节点
  //father.firstChild
  //father.lastChild
  </script>

• 删除节点remove

• <div id='father'>
      <h1>标题一</h1>
      <p id='p1'>p1</p>
      <p class='p2'>p2</p>
  </div>
  <script>
      let son = document.getElementById('p1');
      let father = p1.getElementById;//将父类声明出来
      father.removeChild(son)
      删除是一个动态的过程：
      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');
      list.appendChild(js);//追加到div的列表中
      
      var newp = document.getElementById('js');//已经存在的节点
      var list = document.getElementById('list');
      //通过js创建一个新的节点
      var newp = document.createElement('p');//创建一个p标签
      newP.id = 'nenw';
      newP.innerText = 'Hello,kuangshen';
      //创建一个标签节点
      let myScript = document.creaElement('script');
      myScript.setAttribute('type','text/javascript');
      myScript.innerHTML = 'body{background-color: chartreuse;}';
      
  </script>

• 定位插入要包含的元素

• <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>
         let ee = document.getElementById('ee');//声明出ee
         let js = document.getElementById('js');
         let list = document.getElementById('list');//声明出list
         list.inserBefore(js, ee);//把js插入到ee的前面
     </script>