Web前端JavaScript—Dom、Bom对象模型

Dom(文档对象模型):是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式

1. 作用：Dom是用来操作html
   可选中浏览器页面任意元素：
        document.getElementsByName(‘test’);
        document.getElementsByTagName(‘div’)

   绑定事件：dom.onclick = function(){}
   监听：dom.addEventListener(function(){})

2. DOM构造函数树
   < div>hello</ div>
   Node(节点)
         文档节点 Document类型  获取html元素
         元素节点 Element类型  < div></ div>
         文本节点 Text类型  hello
         注释节点 Comment类型 <!-- 注释 – >

3. 实例化(创建一个对象)
   var dom = document.getElementById(‘one’);

4. API
   (1). Document：表示整个html文档，一般情况下一个html可以使用一个Document的实例来表示，即document

    属性：
    	title
    	head
    	body
    方法：
    	getElementById()    //通过id获取元素，不允许取相同的id名
    	getElementsByClassName()	//通过class获取元素，可以取相同的class名
    	getElementsByName()		//通过name获取元素
    	getElementsByTagName()	//通过元素(标签)名获取属性
   

   (2). Element(元素节点)
   标签： div、p、span、img…
   属性：id、name、href、src、alt、target、style（获取元素的样式）、
            innerHTML
            获取或设置一个元素内的html内容，包括换行
            innerText
            获取或设置一个元素内的文本内容
   方法：
            getAttribute(属性名)： 返回指定的属性值
   例：dom.getAttribute(‘style’) 返回style的属性值
            setAttribute(属性名，属性值)： 把指定的属性设置或者修改为指定的值，注意该方法没有返回值
   例：dom.setAttribute(‘class’,‘rou’) 把class的值修改为xpf
            querySelector(选择器): 返回文档中匹配指定css选择器的第一个元素
            querySelectorAll(选择器): 返回文档中匹配指定css选择器的所有元素
   …
   (3). 节点的操作
   a. 节点的创建
   document.createElement(‘标签名’)
   document.createElement(‘div’) //表示创建一个div标签
   b. 节点的追加

   1. parent.appendChild(newDom)
      在parent内部的最后追加一个新节点，newDom可以是新创建的节点，也可以是原本已存在的节点
      注意：任何DOM节点不能同时出现在文档中多个位置。如果追加的节点原本已存在，只会改变该节点的位置
   2. insertBeofre(newDom,item1)：参数一插入到参数二之前
      第一个参数为要插入的节点
      第二个参数为要插入的位置

   c. 节点的删除
   removeChild(‘节点’)
   parent.removeChild(item3); //将父元素parent的孩子item3删除
   d. 节点的复制(克隆)

   1. 浅复制
      cloneNode() / cloneNode(false)
      默认为浅复制，只复制标签，内容不复制

   2. 深复制
      cloneNode(true)
      传递一个参数true，复制的是标签及内容

5. 事件

   1. 事件的三要素
      a.事件目标: 获取事件源
      b.事件处理函数: 为事件源绑定事件处理函数，当绑定的事件类型被触发的时候执行该函数
      c.事件对象: 当事件处理函数执行的时候，dom会将事件对象作为参数传递给事件处理函数,一般用event表示

      <script>
      window.onload = function(){
      	// 1. 获取事件源
      	var dom = document.getElementsByTagName('div')[0];
      	// 2. 事件处理函数
      	dom.onclick = function(event){
      		// 3. 事件对象event
      		console.log(event);
      	}
      }
      

   2. 事件流
      描述的是从页面中接收事件的顺序
      a. 事件冒泡
      含义：事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点
      特点：从当前点击的元素往外
      前提：
      1）、 元素需要嵌套
      2）、 每层元素上都要绑定事件
      阻止事件冒泡： event.stopPropagation()
      当前点击的事件对象： event.target

       例：
       <div class="outer">
       	<div class="center">
       		<div class="inner"></div>
       	</div>
       </div>
       	
       <script>
       	// 获取最外层的div
       	var outer = document.getElementsByClassName('outer')[0];
       	// 获取中间的div
       	var center = document.getElementsByClassName('center')[0];
       	// 获取最内层的div
       	var inner = document.getElementsByClassName('inner')[0];
      
       	// 给outer绑定事件
       	outer.onclick = function(){
       		console.log(this)
       	}
       	// 给center绑定事件
       	center.onclick = function(){
       		console.log(this)
       	}
       	// 给inner绑定事件
       	inner.onclick = function(){
       		// console.log(event.target)
       		console.log(this)
       		// 阻止事件冒泡
       		// event.stopPropagation();
       	}
       </script>
      

      b. 事件捕获
      含义：不具体的DOM节点更早的接收事件，而具体的节点最后才接收到事件
      特点：由外到当前点击的元素
      前提：
      1）、 元素需要嵌套
      2）、 每层元素上都要绑定事件
      参数：
      第一个参数是 事件类型(click、mouseover…)
      第二个参数是 事件处理函数
      第三个参数是 布尔值，用域描述事件是冒泡还是捕获，该参数可选
      true --> 事件捕获
      false --> 事件冒泡，默认值
      语法：
      outer.addEventListener(‘click’,function(){
      console.log(this)
      },true)

   3. 事件绑定方式
      a. onxxx
      onclick、onmouseover…
      属性，简单，兼容性好
      b. addEventListener 添加监听事件
      outer.addEventListener(‘click’,function(){
      console.log(this)
      },true)
      对浏览器版本有要求
      c. attachEvent 绑定事件
      IE低版本下才能兼容

   4. 事件类型
      click 鼠标点击
      scroll 页面滚动
      keyup 键盘抬起
      keydown 键盘落下
      focus 聚焦
      blur 失焦
      mouseover 光标移动到元素上，支持子元素
      mouseout 光标移出元素，支持子元素
      mouseenter 光标移动到元素上，不支持子元素
      mouseleave 光标移出元素，不支持子元素
      onload ： window.onload 当前页面内容加载完毕

   5. 事件代理
      用法：
      将事件绑定在当前元素的父元素上而非当前元素，这时候，当点击当前元素的时候，执行父元素上绑定的事件处理函数
      好处：
      父元素代理子元素所有的事件，子元素可以动态的添加和删除而不用频繁的绑定事件
      
      
      

Bom(浏览器对象模型)：使用JavaScript来访问和控制浏览器对象

1. 超时调用
   含义：在指定的毫秒数后调用函数
   语法：setTimeout(function(){},time)
   参数：
        第一个参数是 : 要执行的代码
        第二个参数是 : 以毫秒表示的时间，1000毫秒 = 1秒
   返回值：返回一个ID(数字)，可以将这个ID传递给clearTimeout()来取消执行
                var id = setTimeout(function(){},time)
   清除：clearTimeout(id)

2. 间歇调用
   含义：按照指定的周期(以毫秒计数)来调用函数，该方法会不停的被调用，直到该窗口被关闭或clearInterval被调用
   语法：setInterval(function(){},time)
   参数：
        第一个参数是 要执行的代码
        第二个参数是 以毫秒表示的时间，1000毫秒 = 1秒
   返回值：返回一个ID(数字)，可以将这个ID传递给clearInterval()来取消执行
        var id = setInterval(function(){},time)
   清除：clearInterval(id)

3. 系统对话框
   alert() ：警告框，会阻塞代码的运行，该方法接受一个字符串，显示给用户
   confirm()：确认对话框

4. Location对象
   包含有关当前URL的信息
   1. 属性
        host：返回一个URL的主机名和端口
        href：返回完整的URL
        port：返回一个端口号
   2. 方法
       assign(url)：会载入一个新的url，并在浏览记录中生成一个新的记录(可以回退)
        replace(url)：会载入一个新的url，不会在浏览记录中生成一个新的记录(不可以回退)
        reload()：重新加载当前页面(刷新)

5. 存储对象
        浏览器提供了sessionStorage(会话存储)和localStorage(本地存储)来对网页的数据进行添加、删除、查询操作
         localStorage：用于长久的保存整个网站的数据，保存的数据没有过期时间，除非手动去除
         sessionStorage：临时保存同一窗口的数据，在窗口关闭或浏览器关闭的时候会删除这些数据

   方法：(键值对)
        getItem(key)：返回指定键的值
        setItem(key,value)：添加键和值
        removeItem(key)：删除指定键
        clear()：清除所有的键