BOM对象的扩展

对象的扩展"/>

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"//主机
  href: "/"//地址
  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

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