js-dom

js-dom

      DOM 

      D：document  ， O ：object ， M ：model  文档对象模型

      获取元素节点的方法

      1.根据ID获取dom元素

      document.getElementById(');

      

      2.根据class获取元素(易出bug)

      document.getElementsByClassName();

 

      3.根据name获取元素

      document.getElementsByName();

 

      4.根据标签名获取元素

      document.getElementsByTagName();

      修改元素内容

      修改元素中的文本内容：innerText

      修改元素中的HTML内容：innerHTML

      修改元素的样式：style

      DOM-节点操作

     createElement() 方法创建元素

     appendChild() 向页面中追加内容

     insertBefore(newElement, targetElement) 向目标元素之前插入内容

     replaceChild(newElement, targetElement) 替换目标元素

     removeChild(targetElement) 删除目标元素

     cloneNode([true/false])，默认值为 false浅拷贝，只拷贝元素本身，不拷贝元素的子元素

                                                             true深拷贝，不仅拷贝元素，而且也会拷贝元素的子元素

     

     DOM-元素之间的关系

      获取父节点
      console.log(box.parentNode)

     上一个兄弟节点
      console.log(box.previousSibling)

     下一个兄弟节点
     console.log(box.nextSibling)

      所有孩子
      console.log(box.childNodes)
     console.log(box.children)

      第一孩子
      console.log(box.firstChild); // 文本节点
      console.log(box.firstElementChild); // 元素节点

     最后一个孩子
      console.log(box.lastChild); // 文本节点
      console.log(box.lastElementChild); // 元素节点

      DOM-进阶

      document.title 获取网页标题

      document.URL 获取URL 链接地址

      document.domain 获取网址的

      document.links 获取的是页面中带有href属性的元素集合

      document.anchors 获取有name属性的a链接

      document.forms 获取form表单

      

      DOM-获取元素尺寸，大小等

       获取的大小都没有单位

      clientWidth     获取可视区域的宽度
      clientHeight    获取可视区域的高度
      1、增加边框,或者margin属性，大小没有变化
      2、增加滚动条，宽度会减去滚动条的宽度和高度 17px
      3、增加padding，大小会变化

      scrollWidth     获取滚动区域的宽度
      scrollHeight    获取滚动区域的高度

      clientLeft        左边框的长度
      clientTop        上边框的长度

      offsetLeft        获取当前元素距离有定位父级元素的一个偏移位置，如果父级没有定位，相对于body
      offsetTop        获取当前元素距离有定位父级元素的一个偏移位置，如果父级没有定位，相对于body

      scrollTop        获取滚动条距离上方的位置
      scrollLeft        获取滚动条距离左方的位置

 

      事件冒泡，捕获，监听

      DOM事件流

      DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。

      冒泡事件流

      默认情况下，事件使用冒泡事件流。当事件（例如单击事件）在某一DOM元素上被触发时，事件将沿着该节点的各个父结点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

（冒泡往上走）

      捕获事件流

      于冒泡模型相反，在捕获事件流模型中，事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有所有祖先元素依次往下传递。在这个过程中，事件会被从文档的根到事件目标元素之间各个继承派生的元素所捕获。

（捕获往下走）

      DOM标准的事件模型

      DOM标准同时支持捕获事件模型和冒泡事件模型，但是，捕获事件模型先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束。

 

 

      事件监听

      标准浏览器
      addEventListener(事件名,fn,true/false)
      true 捕获/绑定
      false 事件冒泡

      真正的事件名是不加 on 的 如：click mouseover 等等
      oBox.addEventListener('click',fn,false)
      oBox.addEventListener('click',fnWidth,false)

      非标准浏览器 IE6 7 8
      attachEvent(事件名，函数)
      1 ：事件名需要+on
      2 ：没有事件捕获