js-bom和dom笔记

js-bom

• window.onload()

  window.onload()=function(){}
  

  文档页面内容完全加载完成会触发该事件

  document.addEventlistener('DOMContentLoaded',function(){})//dom加载完成后执行，ie9以上支持
  

• 调整窗口大小事件

  窗口大小发生变化则触发，常用window.innerWidth作响应式布局

  window.addEventListener('resize',function(){
  })
  

• 定时器(回调函数，事件)

  只调用一次的定时器

  setTimeout(function(){},2000);//2000ms
  setTimeout('fn()',2000);
  

  window.clearTimeout(timer);
  

  重复调用的定时器

  setInterval(function(),3000);
  clearInterval(timer);
  

  定义全局变量var timer = null；

• 同步和异步

  同步任务在主线程上执行，形成执行栈

  异步任务通过回调函数实现（包括普通事件：click，resize；资源加载：load，error；定时器），他们的相关回调函数会放在任务队列中

  先同步，再异步，同步任务重复获取异步任务并执行，这种机制为事件循环

• location

  • 统一资源定位符

    

  location常见属性

  

  location对象方法

  

• 字符串操作

  .substr(起始的位置,几个字符);//第二个参数省略默认取得所有剩余字符
  var arr=p.split('=');//将p的=俩边分割为俩部分存入数组
  

• navigator

  判断用户pc和手机终端实现跳转

  

• history

  

• offset属性元素位置

  

• client属性元素大小

  

• 立即执行函数

  （function(){})();
  （function(a,b){})(2,3);//传递参数
  (function(){}())
  
  

• scroll属性滚动距离

  

  div.addEventListener('srcoll',function(){
  })//滚动事件
  window.pageYoffset
  

• mouseover和mouseenter

  mouseover事件经过自身和子盒子都会触发，mouseenter只会经过自身盒子触发

  mouseenter和mouseleave都不会冒泡

• 本地存储

  1.sessionStorage

  sessionStorage.setItem(key,value);
  sessionStorage.getItem(key)
  sessionStorage.removeTtem(key)
  sessionStorage.clear()
  

  2.localStorage

  生命周期永久有效，除非手动删除，关闭页面也会存在；可以多窗口共享；以键值对形式存储

  localStorage.setItem(key,value);
  localStorage.getItem(key)
  localStorage.removeTtem(key)
  localStorage.clear()
  

js-dom

文档页面从上往下加载，得先有标签，因此把script写在标签下面

console.dir()打印元素对象

• 获取元素的方式

  一般来说获取的元素大小写敏感

  getElementById('')//通过id
  
  var li=document getElementsByTagName('li')//通过标签名
  li[0]//标签li的第一个对象
  
  getElementsByClassName('box')//通过类名
  box[0]//类名box的第一个对象
  
  document.querySelector('.box')//指定选择器的第一个元素对象
  document.querySelector('#box')
  document.querySelector('li')
  document.querySelectorAll('li')//指定选择器的所有元素对象
  

• 获取body和html

  document.body
  document.documentElement
  

• 注册事件

  事件三要素：事件源，事件类型，事件处理程序

  

  以上方法具有唯一性，后注册的处理函数会覆盖前面的。

  推荐可叠加的新方法（不用带on）:

  bt.addEventListener('click',function(){})
  

  iE9以下使用attchEvent

• 删除事件

  传统方法删除事件

  div.οnclick=null;//在点击事件内添加则该按钮点击一次即失效
  

  addEventListener删除事件

  注册事件不能使用匿名函数

  div.addEventLitsener('click',fn)
  div.removeEventListener('click',fn)
  function fn(e){
  	e.type;
  }
  

  ie9以下使用detachEvent()

• 改变元素内容

  demo.innerHTML=//包括html标签，空格，换行
  demo.innerTetx=//去除html标签，空格，换行
  input.value='被点击了';
  

• 格式化日期年月日

  

• 禁用按钮button

  btn.disabled=true;//按钮无法再被点击
  

• className

  this.className='change';//不保留原来的类
  this.className='first change';//保留原来的类名first，即多类名选择器
  

• 排他思想

  

• 自定义属性获取

  div.属性//获取元素自身属性
  div.getAttribute('index')
  div.setAttribute('index',2)//修改属性值
  div.setAttribute('class','container')
  div.removeAttribute()//移除属性值
  

  H5规定：自定义属性以data-开头

  <div data-index="1"></div>
  div.dataset.index或div.getAttribute('data-index')
  

• 节点操作

  父节点，子节点

  close.parentNode//close最近的父节点
  close.childNodes//lose所有的子节点包含元素节点和文本节点等
  close.children//close所有元素节点
  close.children.length-1//close最后一个节点的索引号
  close.firstElementChild//close第一个元素节点
  

  兄弟节点

  div.nextSibling//下一个兄弟节点，包含元素节点，文本节点等
  div.previousSibling//前一个
  以下兼容性问题：ie9以上支持
  div.nextElementSibling//下一个兄弟元素节点
  div.previousElementSibling//前一个
  

  创建节点

  li=createElement('li');//创建节点
  ul.appendChild(li);//在ul已有节点后插入li
  ul.prepend(li);//在ul已有节点前插入li
  ul.insertbefore(li,ul.children[0]);//在ul的第一个孩子前插入li
  

  删除节点

  ul.removeChlid(ul.children[0]);
  

  克隆节点

  ul.cloneNode(true);//深度拷贝，复制节点及里面所有子节点
  ul.cloneNode(false);//括号内为空或false，浅拷贝不克隆子节点
  

• document.write()和innerHTML

  页面文档流加载完后调用document.write()会导致页面重绘

  creatElement（）创建多个元素效率稍低一点，但是结构更清晰

  innerHTML创建多个元素时，不要拼接字符串，采用数组形式拼接效率更高，但结构稍复杂

  

• 动态创建数组

  

• dom事件流

  冒泡阶段 从子到父

  目标阶段

  捕获阶段 从父到子

  onclick和attachEbentListener只能得到冒泡阶段

  addEventListener第三个参数是true则处于捕获阶段

  有些事件没有冒泡

• 事件对象

  event包含一系列属性

  e=e||window.event;//为兼容ie678，一般不考虑
  

  e.target//返回点击的元素
  this//返回绑定的元素
  

  

  retuen false也能阻止默认行为（如a链接跳转）

• 鼠标事件对象

  

• 键盘事件对象

  

  onkeypress不识别功能键（左右箭头，shift），但区别大小写（keyCode），其他俩个相反

  执行顺序：keydown，keypress，keyup

• 事件委托

  也称事件代理

  原理：不是每个子节点单独设置事件监听器，而是设置在父结点上，如何利用冒泡原理影响设置每个子节点，提高了程序的性能

• 阻止默认事件的一些示例（禁止右键菜单，阻止表单提交等）

  

.forEach((item,index)=>{})