丸子学JS（学习2小时 - BOM与DOM）

前言

学到这一块，感觉内容好多，学到一半有点力不从心，硬着头皮看到最后，结果发现前面有些又忘记了，往返看了3遍，大致有了一点轮廓，自己动手简单归纳了下

DOM

获取节点

• document
  a) getElementById 通过元素ID获取节点
  b) getElementsByName 通过元素的name属性获取节点
  c) getElementsByTagName 通过元素标签获取节点
• 节点指针
  a) firstChild 获取元素的首个子节点
  b) lastChild 获取元素的最后一个节点
  c) childNodes 获取元素的子节点列表
  d) previousSibling 获取已知节点的前一个节点
  e) nextSibling 获取已知节点的后一个节点
  f) parentNode 获取已知节点的父节点

节点操作

• 创建节点
  a) createElement 创建元素节点
  b) createAttribute 创建属性节点
  c) createTextNode 创建文本节点
• 插入节点
  a) appendChild 向节点的子节点列表的末尾添加新的子节点
  b) insertBefore 在已知的子节点前插入一个新的子节点
• 替换节点
  a) replaceChild 将某个子节点替换为另一个节点
• 复制节点
  a) cloneNode 创建指定节点的副本
• 删除节点
  a) removeChild 删除指定的节点

尝试一下

let oWrapper = document.querySelector('.wrapper')
let oBtns = document.querySelectorAll('button')
let oDivs = oWrapper.querySelectorAll('div')
oBtns[0].onclick = function() {
    let oDiv = document.createElement('div')
    oDiv.innerHTML = 7;
    oWrapper.appendChild(oDiv)
}
oBtns[1].onclick = function() {
    let oDiv = document.createElement('div')
    oDiv.style.background = '#12ccfa'
    oDiv.innerHTML = '插入';
    oWrapper.insertBefore(oDiv, oDivs[2])
}
oBtns[2].onclick = function() {
    let oDiv = document.createElement('div')
    oDiv.style.background = '#12ccfa'
    oDiv.innerHTML = '替换';
    oWrapper.replaceChild(oDiv, oDivs[4])
}
oBtns[3].onclick = function() {
    oWrapper.appendChild(oDivs[0].cloneNode(true))
}
oBtns[4].onclick = function() {
    oWrapper.removeChild(oDivs[0])
}

属性操作

• 获取属性
  a) getAttribute 获取元素节点中指定属性的属性值
• 设置属性
  a) setAttribute 创建或改变元素节点的属性
• 删除属性
  a) removeAttribute 删除元素中的指定属性

尝试一下

let oBtns = document.querySelectorAll('button')
let oDiv = oWrapper.querySelector('div')
oBtns[0].onclick = function() {
   let res = oDiv.getAttribute('class')
   alert(res)
}
oBtns[1].onclick = function() {
    oDiv.setAttribute('class', 'active')
}
oBtns[2].onclick = function() {
    oDiv.removeAttribute('class')
}
oBtns[3].onclick = function() {
    oWrapper.appendChild(oDivs[0].cloneNode(true))
}

文本操作

● insertData(offset,String) 从offset指定的位置插入string
● appendData(string) 将string插入到文本节点的末尾处
● deleteData(offset,count) 从offset起删除count个字符
● replaceData(offset,count,string) 从offset将count个字符用string替代
● splitData(offset) 从offset起将文本节点分成两个节点
● substring(offset,count) 返回offset起的count个节点
● innerHTML 返回或插入节点文本
● innerText 返回或插入节点文本

节点属性

• nodeName 节点的名称
• nodeValue 节点的值
• nodeType 节点的类型（元素1，属性2，文本3，注释8，文档9）

浏览器窗口可视区域大小

• 现代浏览器
  a) window.innerHeight 浏览器窗口的内部高度
  b) window.innerWidth 浏览器窗口的内部宽度
• 传统ie 678
  a) document.documentElement.clientHeight 表示html文档所在窗口的当前高度
  b) document.documentElement.clientWidth 表示html文档所在窗口的当前宽度
• 兼容写法

var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

BOM

navigator导航器对象

1. appCodeName 返回浏览器的代码名
2. appName 返回浏览器的名称
3. appVersion 返回浏览器的平台和版本信息
4. cookieEnabled 返回指明浏览器中是否启用cookie的布尔值
5. platform 返回运行浏览器的操作系统平台
6. userAgent 返回由客户机发送服务器的 user-agent 头部的值

screen显示器对象

1. availHeight 返回显示屏幕的可用高度
2. availWidth 返回显示屏幕的可用宽度
3. height 返回屏幕的像素高度
4. width 返回屏幕的像素宽度
5. colorDepth 返回屏幕颜色的位数

history历史对象

1. back（） 返回前一个Url
2. forward（） 返回下一个Url
3. go（） 返回某个具体页面

location位置对象

• 属性
  ○ hash 设置或返回从#号开始的URL
  ○ host 设置或返回主机名和当前URL的端口号
  ○ hostname 设置或返回当前URL的主机名
  ○ href 设置或返回完整的URL
  ○ pathname 设置或返回当前URL的路径部分
  ○ port 设置或返回当前URL的端口号
  ○ protocol 设置或返回当前URL的协议
  ○ search 设置或返回从问号？开始的URL
• 方法
  ○ assign(URL) 加载新的文档
  ○ reload() 重新加载当前页面
  ○ replace(newURL) 用新的文档替换当前文档

document文档对象

• 集合
  ○ anchors[] 锚点对象数组
  ○ images[] 图片对象数组
  ○ links[] 连接对象数组
  ○ forms[] 表单对象数组
• 属性
  ○ cookie 设置或返回与当前文档有关的所有cookie
  ○ domain 返回当前文档的域名
  ○ referrer 返回载入当前文档的文档的URL
  ○ title 返回当前文档的标题
  ○ URL 返回当前文档的URL
• 方法
  ○ open() 打开一个新的文档，并擦除旧文档的内容
  ○ close() 关闭文档输出流
  ○ write() 向当前文档追加写入文本
  ○ writeIn() 同write ， 只是会追加换行

窗口控制

a) moveBy 按照给定像素参数移动指定窗口
b) moveTo 将窗口移动到指定的指定坐标(x,y)处
c) resizeBy 将当前窗口改变指定的大小(x,y)
d) resizeTo 将当前窗口改变成(x,y)大小， x,y分别是宽度和高度
e) scrollBy 将窗口中的内容按给定的位移量滚动，参数为正数，正向滚动，反之
f) scrollTo 将窗口中的内容滚动到指定位置

焦点控制

a) focus() 得到焦点
b) blur() 失去焦点

打开/关闭窗口

a) open 打开一个新的窗口，并在窗口中装载指定URL地址的网页
b) close 自动关闭浏览器窗口

定时器

a) setTimeout 当到了指定的毫秒数后，自动执行功能代码
b) clearTimeout 取消由setTimeout() 设置的定时器
c) setInterval 按指定周期重复执行功能代码
d) clearInterval 取消由setInterval()设置的时间间隔器

尝试一下

<div id="wrapper" class="wrapper">
  <img src="img/1.jpg"/>
  <img src="img/2.jpg"/>
  <img src="img/3.jpg"/>
  <img src="img/4.jpg"/>
  <img src="img/5.jpg"/>
  <img src="img/6.jpg"/>
  <div class="circle">
    <span class="current">1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
    <span>5</span>
    <span>6</span>
  </div>
</div>
var wrap = document.getElementById("wrapper");
  var oImages = document.getElementsByTagName("img");
  var oSpans = document.getElementsByTagName("span");
  var num = 0;
  var timer = play = null;
  var index = 0;
  //小圆点切换
  for(var i = 0; i < oSpans.length; i++){
    oSpans[i].index = i;
    oSpans[i].onmouseenter = function (){
      //将当前远点的索引传递给函数
      showImg(this.index);
    }
  }
  //自动播放图片
  function autoPlay (){
    play = setInterval(function (){
      index++;
      index >= oImages.length && (index = 0);
      showImg(index);
    },2000)
  }
  autoPlay();
  // 图片切换，淡入淡出
  function showImg(p){
    //关联圆点的索引
    index = p;
    var alpha = 0;
    //小圆点追加样式
    for(var i = 0; i<oSpans.length; i++){
      //清除所圆点的样式
      oSpans[i].className = "";
    }
    //留下当前的添加类名
    oSpans[index].className = "current";
    
    clearInterval(timer);
    timer = setInterval(function(){
      alpha +=2;
      if(alpha>100){
        alpha = 100;
      }
    for(var i = 0; i < oImages.length; i++){
      //所有的图片透明
      oImages[i].style.opacity = 0;
      oImages[i].style.filter = "alpha(opacity = 0)";
    }
      //当前图片显示
      oImages[index].style.opacity = alpha / 100;
      oImages[index].style.filter = "alpha(opacity =" + alpha + ")";
      //图片不透明，则停止定时器
      alpha == 100 && clearInterval(timer);
    },20);
  }
  //移入清除定时器
  wrap.onmouseover = function(){
    clearInterval(play);
  }
  //移出重新开启定时器
  wrap.onmouseout = function (){
    autoPlay ();
  }

对话框

a) alert 弹出一个警告框，在警告框内显示提示字符串文本
b) confirm 显示一个确认框，在确认框内显示提示字符串
c) prompt 显示一个输入框，在输入框内显示提示字符串

属性

• 状态栏
  ○ defaultStatus 浏览器不支持
  ○ status 临时改变浏览器状态栏的显示
• 窗口位置
  ○ IE
  ■ screenLeft 声明窗口的左上角的X坐标
  ■ screenTop 声明窗口的左上角的Y坐标
  ■ document.body.scrollLeft || document.documentELEment.scrollLeft 声明当前文档向右滚动过的像素数
  ■ document.body.scrollTop || document.documentELEment.scrollTop 声明当前文档向下滚动过的像素数
  ○ !IE
  ■ screenX 声明窗口的左上角的X坐标
  ■ screenY 声明窗口的左上角的Y坐标
  ■ pageXOffset 声明当前文档向右滚动过的像素数
  ■ pageYOffset 声明当前文档向下滚动过的像素数
  ○ FF
  ■ innerHeight 返回窗口的文档显示区的高度
  ■ innerWidth 返回窗口的文档显示区的宽度
  ■ outerHeight 返回窗口的外部高度
  ■ outerWidth 返回窗口的外部宽度
• 其他属性
  ○ opener 可以实现同域名下跨窗体之间的通信，一个窗体要包含另一个窗体的opener
  ○ closed 当前窗口关闭时返回true
  ○ name 设置或返回窗口的名称
  ○ self 返回当前窗口的引用