第七周 JS 学习笔记

这周主要学习了BOM，DOM方面的知识，同样要记忆的东西挺多的呢

一、BOM

1) window对象

• 获取窗口的位置

 function getWindowPos(){
      return {
          leftPos: (typeof window.screenLeft == 'number') ?
              window.screenLeft : window.screenX,
          topPos: (typeof window.screenTop == 'number') ?
              window.screenTop : window.screenY
      }
  }

• 获取页面视口大小

 function getViewPortSize(){
      var pageWidth = window.innerWidth;
      var pageHeight = window.innerHeight;

      if(typeof pageWidth != 'number'){
          if(document.compatMode == 'CSS1Compat'){
              // 标准模式下
              pageWidth = document.documentElement.clientWidth;
              pageHeight = document.documentElement.clientHeight;
          }else {
              // 混杂模式下
              pageWidth = document.body.clientWidth;
              pageHeight = document.body.clientHeight;
          }
      }
      return {
          pageWidth: pageWidth,
          pageHeight: pageHeight
      }
  }

• 间歇调用和超时调用

  var num =0;
  var max = 10;
  var intervalId = null;
  function incrementNumber (){
      num++;
      if(num === max){ // 当达到最大值时，取消间歇调用
          clearInterval(intervalId);
          console.log('Done')
      }
  }
  intervalId = setInterval(incrementNumber,500)

• 使用超时调用模拟间歇调用

 var num =0;
  var max =10;
  function incrementNumber(){
      if(num < max){
          setTimeout(incrementNumber,500)
      }else {
          console.log('Done')
      }
  }
  setTimeout(incrementNumber,500)

2）location对象

• location.search()
  这里封装一个查询字符串参数的方法

function getQueryStringArgs(){
      // 去掉查询字符串开头的问号
      var qs = (location.search.length > 0 ? location.search.substring(1) : ''),
          args = {},  // 保存数据的对象
          items = qs.length ? qs.split('&'): [],
          item = null,
          name = null,
          value = null,
          len =  items.length;

      for(var i=0; i< len; i++){
          // 分隔name 和 value
          item = items[i].split('=');
          name = decodeURIComponent(item[0]);
          value = decodeURIComponent(item[1]);
          if(name.length){
              args[name] = value;
          }
      }
      return args;
  }

• 其它方法

1. location.assign() , location.href() 打开新的文档，可返回
2. location.replace() 用新的文档代替旧的文档，不可返回
3. location.reload() 刷新页面

3) navigator对象

通过使用console.dir(navigator) 可查看所有的方法以及属性

二、DOM

1）动态插入脚本和样式表

 function loadScript(url){
      var script = document.createElement('script');
      script.type = 'text/javscript';
      script.src = url;
      document.body.appendChild(script)
  }

function loadStyles(url){
      var link = document.createElement('link');
      link.rel =  'stylesheet';
      link.type = 'text/css';
      link.href = url;
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(link)
  }

2）节点操作

• 节点操作

1. parentNode 获取父节点
   2.dhildren 获取子节点
   3.hasChildNodes() 检测节点是否包含子节点
   4.appendChild() 在节点末尾插入
   5.insertBefore() 在节点之前插入

oDiv.insertBefore(oInner, oDiv.firstChild)

6. replaceChild() 替换节点

oDiv.replaceChild(oInner,oDiv.firstChild)

7. removeChild() 删除子节点
8. cloneNode() 复制节点

• 获取元素

  document.getElementById(id)  //通过id 查找元素
  document.getElementsByTagName(tagName)   //通过标签名查找元素, 返回的是一个nodeList集合
  document.getElementsByName(name)  //通过name 属性名来获取
  document.getElementsByClassName('box') // 通过类名来获取
  document.querySelector('body')
  document.querySelector('.box')

• 特殊集合

  console.log(document.anchors)   // 获取所有带name属性的a元素
  console.log(document.forms)   // 获取所有form表单元素
  console.log(document.images)  // 获取所有的img
  console.log(document.links)   //获取所有带href 的a 元素

• 元素具有的属性

  console.log(oDiv.id)
  console.log(oDiv.className)
  console.log(oDiv.title)
  console.log(oDiv.lang)
  console.log(oDiv.dir)

• 获取，设置，删除元素属性

1. getAttribute 获取
2. setAttribute 设置
3. removeAttribute 删除

• 创建元素节点,文本节点

 document.createElement('div');
 document.createTextNode('hello world');

3）增强

• classList 属性
  该属性包含以下几个实用的方法
  add() , contains() , remove() , toggle()
• 焦点管理

1. focus() 元素获取焦点
2. document.activeElement 获取当前取得焦点的元素
3. document.hasFocus() 检测文档是否获取了焦点

• 判断文档加载情况

  if(document.readyState == 'loading'){
      console.log('loading')
  }
  window.onload = function(){
      if(document.readyState == 'complete'){
          console.log('complete')
      }
  }

• 获取元素的自定义属性

element.dataset.single

• 插入

1. innerHTML
2. innerText
3. outerHTML

• 样式

1. element.style 获取样式
2. element.style.cssText 设置多个样式属性
3. 获取伪元素样式

document.defaultView.getComputedStyle(Element,':after')

• 滚动条距离

1. 滚动条长度

  console.log(document.documentElement.scrollHeight)
  console.log(document.documentElement.scrollLeft)

2. 滚动距离

  var scrollT=document.documentElement.scrollTop;
  var scrollL=document.documentElement.scrollLeft;