DOM复习1. window下的一些方法 2. 定时器 3. history 对象浏览器的访问历史记录 4. navi

1. window下的一些方法

（1）window.prompt('please input a numer')
（2）window.alert('hello') //警示框
（3）window.scrollTo(0,0); // scrollTo(X,Y) 页面滚动到指定的位置
（4）window.scrollBy(100, 100); // scrollBy(X, Y) 页面滚动了多少距离
（5）window.open(url) // 在新窗口打开指定连接页面
（6）confirm('are you sure?') //对于对话框"确认"或"取消"的返回值（布尔类型）

2. 定时器

每隔n秒执行执行的方法有两个参数第一个参数是一个方法第二个参数时间间隔数（以毫秒为单位的）

    var i = 60;
    
    var timer = setInterval(function(){
      console.log(i+'秒之后可以再次发送')
      i--;
      if(i <= 50) {
        clearInterval(timer);   //clearInterval清除定时器
      }
    }, 1000)

定时器是一个异步方法：
代码顺序执行，遇到异步方法会把这个方法放进任务队列里，当主线程的任务都执行完毕后会将任务队列中的方法取出并且看等待时间间隔是否达到，如果时间到了就执行这个方法

3. history 对象浏览器的访问历史记录

history.back() 返回上一页面 history.go(-1)
history.forward() 进入下一页面 history.go(1)
history.go(number) 返回或进入number页面

4. navigator.userAgent

chorme: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36

firefox: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:70.0) Gecko/20100101 Firefox/70.0

safari: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Safari/605.1.15

iphone: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

Android: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Mobile Safari/537.36

判断请求的用户代理头的值

    if (navigator.userAgent.indexOf('iPhone') != -1) { //iphone 手机
      setTimeout(function() {
        // location.href = ""---------------------->判断是iPhone手机进入该页面
      }, 1000)
    } else {
      setTimeout(function() {
        // location.href = ""---------------------->判断是其他类型手机进入该页面
      }, 1000)
    }

5. location

一般顺序：scheme://host.domain:port/path/filename
https：相对安全
http: 相对不安全

      // 重新加载当前页面
      location.reload();
      // 打开新的页面 history中有历史记录
      location.href = ''
      // 替换当前页面，history中没有历史记录
      location.replace('')

6. 获取元素

（1）getElementById 通过ID获取元素
（2）getElementsByTagName 通过标签名获取元素，返回的是一个html集合，如需准确获取，需加上[索引]，该方法不仅是document对象下的方法，在html元素上也可以调用
（3）getElementsByName 通过name来获取元素，返回的是一个 NodeList 类数组，有length属性数组里提供的方法均不可用

7. dom事件：

onclick 鼠标单击事件
oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单
ondblclick 鼠标双击事件
onmouseover 鼠标划入
onmouseout 鼠标划出 onfocus 元素获取焦点
onchange 内容改变
onblur 元素失去焦点
onmousedown 鼠标按钮被按下
onmouseup 鼠标松开
onmousemove 鼠标移动
onkeydown 键盘敲击

8. dom方法

.preventDefault() // 阻止浏览器默认行为
.clientX .clientY // X、Y轴坐标
.style.xxx // 设置元素的样式，有时需要注意带上单位
.className // 设置元素的class
.which // 代表键盘码
.innerHTML // 当前对象的内容

9. 通常会在循环列表+点击事件中为列表添加index属性，属性的值等于数组的索引，通过 this.index 来代表当前被点击的列表。否则页面刷新还未点击时便自动循环完毕，会导致数组的索引出错

10. “>”的写法（将正方形的上边框与右边框旋转225度）

#right::after{
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      border-left: 5px solid #fff;
      border-bottom: 5px solid #fff;
      transform: rotate(225deg);
    }

11. 轮播图

通过控制图片的className有无来设置图片的展示与隐藏

## ## 12. 滑动轮播图

为轮播的图片设置索引，容器只有一张图片的大小，将其他图片className设为空，展示图片的className设为有，设置该容器的.style.left（移动距离）为图片的宽度乘以展示图片的的索引

## 13. 淡入淡出轮播图

通过设置opacity来控制图片的显示与隐藏，并为opacity设置过渡效果transition: opacity 1s ease;

14. 宽高

设置宽高时：
（1）oDiv.style.width // 内联样式
获取相应宽高时：
（2）offsetWidth = width + border + padding // 返回值是一个number
（3）clientWidth = width + padding // 返回值是一个number
元素隐藏的情况下 offsetWidth = 0 offsetHeight = 0
（4）offsetTop // 距离已定位的祖先元素的距离
参考文档 www.cnblogs.com/fullhouse/a…

15. 当想复制出一份相同属性的内容时

    oWrapper.innerHTML += oWrapper.innerHTML;
    oWrapper.style.width = oWrapper.offsetWidth * 2 + 'px';

16. 节点

一、节点属性

nodeName 标签名称普通标签的名称就是tagname 文本节点的标签名是#text
nodeType 节点类型返回节点所对应的数字

    Node.ELEMENT_NODE (1) 元素节点
    Node.ATTRIBUTE_NODE (2) 属性节点
    Node.TEXT_NODE (3) 文本节点
    Node.COMMENT_NODE (8) 注释节点

lastChild 最后一个子节点
firstChild 第一个子节点

      <ul>
        <li id="list">1</li>
        <li id="last">2</li>
//在  </ul>                  中，获取的firstChild是回车换行，无法直接获取到Li标签，需封装方法来获取：
    
    function next(elem) {
      do {
        elem = elem.nextSibling
      } while (elem.nodeType != 1)
      return elem
    }
    
    function first(elem){
      elem = elem.firstChild;
      if (elem.nodeType != 1) {-------------------判断第一个节点是否是元素节点
        elem = next(elem) -------------------若不是元素节点，需找到该非元素节点的下一个兄弟节点进行判断
      }
      return elem
    }

nextSibling 在标准浏览器（谷歌 Safari 火狐...）会找到：回车、空格，在IE浏览器里会直接找到下一个元素节点
nextElementSibling 标准浏览器里会找到下一个元素节点，IE浏览器不支持

// 封装找到下一个兄弟元素节点的方法

   1. 使用nextSibling 找到下一个节点 并判断节点类型 如果节点类型不是元素节点 就继续循环找下一个节点
    function next(elem) {
      do {
        elem = elem.nextSibling
      } while (elem.nodeType != 1)
      return elem
    }
    
   2. 或者使用navigator.userAgent判断用户是否是ie浏览器 如果是则使用nextSibling 不是则使用nextElementSibling
    function next_new(elem) {
      var ua  = navigator.userAgent
      if(ua.indexOf('MSIE') != -1) { // ie
        elem = elem.nextSibling
      } else { // 标准浏览器
        elem  = elem.nextElementSibling
      }
      return elem
    }

previousSibling 前一个兄弟节点标准浏览器里会找到回车换行 ie浏览器找到元素节点
previousElementSibling 找到前一个兄弟元素节点标准浏览器 ie浏览器不支持
（封装方法同上）

二、对节点的操作

通过document.createElement('标签')创建节点，创建后的节点可通过innerHTML向节点内插入数据
insertBefore(oA, oP) 插入节点在oP节点前插入oA节点
removeChild(oA) 删除节点删除oA节点
replaceChild(oA, oP) 替换节点将oP节替换成oA节点
setAttribute('属性名', 属性值) 给元素设置属性可以直接在HTML里看到属性，若该元素已有此属性，则可作为修改此属性的方法
odiv.属性名 = 属性值这种形式也可给元素设置属性但是在HTML结构中无法直接看到
getAttribute('属性名') 获取元素属性
removeAttribute('属性名', '属性值') 移除属性
cloneNode(true) 克隆节点使用参数true表示克隆节点时同时克隆子节点

      <ul id="wrapper">
        <li>1</li>
        <li>2</li>
        <li>3</li>
//在  </ul>           中，克隆出所有Li标签，并插入到ul标签最后一个子标签后

owrapper = document.getElementById("wrapper")
oul = oWrapper.cloneNode(true)

ali = oul.getElementsByTagName('li')
for(var i=0; i<aLi.length; i++) {
------appendChild()方法会将已存在的节点从一个列表移动到另一个列表，导致aLi类数组的长度改变，克隆发生错误
------所以需通过cloneNode()方法，克隆出一个新的节点，appendChild()方法会将新节点复制并移动到新列表
	oWrapper.appendChild(ali[i].cloneNode())
}

DOM复习