DOM

---

 目录：

　　

　　

　　

　　　　

　　　　

　　　　

　　　　

　　

　　

　　

　　

　　

 

---

Document Object Model 文档对象模型

• DOM规则提供了API方法让Javascript去操控HTML
• HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准/规则。

 

---

概念：DOM树 ( 文档树 )结构 ：HTML DOM 将 HTML 文档视作树结构。

HTML DOM Tree 实例:

 

 

---

DOM节点方法： 查、增、删、改

---

( 一 ) 通过 属性 去查找

obj.nodeType 属性

    查找出节点类型。

    nodeType 属性返回节点的类型( number )。只读属性。

比较重要的节点类型有：

---

obj .nodeName 属性

    查找出节点名称。

    nodeName 属性返回节点的名称( string )。只读属性。

---

obj .nodeValue 属性

    查找出节点值。

    nodeValue 属性返回节点的值。只读属性。

 

 

---

( 二 ) 找单个节点

obj .children

1 查找儿子(只能找儿子,找不到孙子)   , 它是一个 集合的形式，类数组

2 找的是标签/元素 节点

3 但如果我想找oBox的子孙后代全部：

---

obj.parentNode

查找 obj 的爸爸(单个对象,只有一个爸爸)

 

 

---

( 三 ) 找所有节点

obj.childNodes

    查找出所有的节点，只兼容主流的浏览器 , 因此推荐使用 obj.children

 

---

( 四 ) 通过关系节点查找 兼容问题 ( IE678 / 主流浏览器 )

obj.firstChild / obj.firstElementChild

     - 查找出第一个儿子;

     - 查找操纵的一般是 元素节点 ,很少操作文本节点，因此可以直接用 obj.children[0]; 来查找儿子;

---

obj.lastChild’ / obj.lastElementChild

     - 查找出最后一个儿子;

     - 查找操纵的一般是 元素节点 ,很少操作文本节点，因此可以直接用 obj.children[ length-1 ]; 来查找儿子;

---

obj.nextSibling / obj.nextElementSibling

     - 查找出obj的下一个兄弟;

---

obj.preSibling / obj.subSibling

     - 查找出obj的上一个兄弟;

---

这里能还要加

---

    

1 新增 / 创建 新的节点 ( 属性 )

obj.innerHTML

     —如果用.innerHTML属性来去新增节点，就相当于生了个大毛后，再生一个二毛，就把大毛给割了。

var oBox= document.getElemgtById('box');oBox.innerHTML = "
这里新增的节点内容
"；

进一步分析 :

我让 当我点击a的时候会在oBox上添加<p>pppppp</p>的事件;

      
    
       HELLO!
      

 

解析 :

—这里的 oA 在 innerHTML 之后发生了变异了 , 已经没有了 .onclick 事件属性了，无论是 oBox.innerHTML += / oBox.innerHTML = ;实质都让原有的内容发生了变化，也就是重新获取，所有 oA 再也不是以前的 oA 了 ！

所以，oA.onclick 事件无效了，不报错，不发生任何。没有了 onclick 事件。

由此生出了以下创建节点的方法

 

---

2 新增 / 创建 新的标签节点 ( 方法 )

       - 注意 : 新增的节点并没有显示在DOM树里 , 它只存放在内存中。

 

---

 

3 新增 / 创建 新的文本节点 ( 方法 )

       - 注意 : 新增的节点并没有显示在DOM树里 , 它只存放在内存中。

---

 

obj.appendChild( new_obj )

1    - 在 obj 上 新增 / 插入 一个新的 标签 子节点 new_obj ;

2    - 在 obj 上 新增 / 插入 一个新的 文本 子节点 new_obj ;

---

 

obj.insertBefore( obj添加什么内容 , 在obj的哪个儿子前添加 )

* 注意 *

如果我要在oBox最前面加儿子，无论oBox里有没有儿子，也通用：

---

关于动态和静态的问题

注意：obj.children 是动态的获取

例子：
      
       
1111
 var oBox = document.getElementById('box');var child = oBox.children;console.log( child ); // [p]var oI = document.createElement('i');oBox.appendChild( oI );console.log( child ); //[p,i] //意思是 oBox重新获取child然后再加上p
      

 

---

 

爸爸.removeChild( 要删除的儿子 )

注意 ： 元素的删除

——元素没法自杀！！只能通过爸爸来杀儿子，它爷爷也杀不了孙子

      
       
      
 var oBox = document.getElementById('goudan');var oM = oBox.children; //这里的oM为oBox的儿子们oBox.removeChild( oM ); //移除了oBox的儿子们

 

---

——–修改 HTML = 改变元素、属性、样式和事件

         最简单滴方法：obj.innerHTML

obj.replaceChild( newnode,oldnode )

      
       
      
var oBox = document.getElementById('goudan');var oM = oBox.children; //这里的oM为oBox的儿子们var new_oM = document.createTextNode('插入的文本节点');//obj.replaceChild( 你要插入的节点对象 , 你要移除的节点对象 );oBox.replaceChild( new_oM,oM );

 

---

obj.getAttribute( ); //获取属性的节点obj.setAttributeNode( ); //设置属性的节点obj.createAttributeNode( ); //创建不合法标签obj.removeAttributeNode( ); //移除属性的节点

---

obj.cloneNode( true / flase )

   注意：节点.cloneNode( 布尔值 )

– 1 返回一个克隆对象

– 2 布尔值决定带不带里面的子元素

    true  带 ( 但也不带事件 ( 例如：点击事件 Jquery 才有 ) )

   false 不带 ( 默认，只有个皮囊 )

      
       
 999999 
      
  var oBox = document.getElementById('box');var oP = oBox.children[0]; //获取的是oBox的儿子var new_oBox = oBox.cloneNode( true ); //把oBox中的子元素也克隆document.body.appendChild( new_oBox ); //把克隆的oBox放进body

 

---

1 关于一些 宽 高 的获取

此处的 width 可以换成 height !!!

-1 getComputedStyle( obj )[width] 和 obj.currentStyle[width]

——获取的是 width 的属性值 ( string )

-2 obj.clientWidth

——获取的是 width + padding左右 的值( number )

-3 obj.offsetWidth

——-获取的是 width + padding左右 + border左右 的值( number )

-4 obj.scrollWidth

——-获取的是 内容的实际的宽度 / 高度，即使超出隐藏，也不影响，这里要注意的是：

- 可以设置 overflow : auto; 出现滚动条

- 浮动 、 定位都支持

---

封装模式，拿去用。。

function getHW( obj ){     return {         'styleWw' : parseFloat( getStyle( obj,'width' ) ),         'styleHh' : parseFloat( getStyle( obj,'height' ) ),         'clientWw' : obj.clientWidth,         'clientHh' : obj.clientHeight,         'offsetWw' : obj.offsetWidth,         'offsetHh' : obj.offsetHeight,         'scrollWw': obj.scrollWidth,         'scrollHh': obj.scrollHeight     } } //兼容 function getStyle( obj,arr ){     return window.getComputedStyle?getComputedStyle( obj )[arr]:obj.currentStyle[arr]; }

 

---

2 obj.offsetParent 定位父级

——获取查看元素的 最近定位父级是哪个元素 如果没有定位父级 则参考 body ( 元素必须是定位元素 )

 

---

 

3 obj.offsetTop / obj.offsetLeft

obj.offsetTop : 获取对象相对于`offsetParent` ( left ) 位置obj.offsetLeft : 获取相对于 `offsetParent` ( top )位置//案例：获取元素oP距离文档顶部的距离var top = 0;var obj = oP;while ( obj ){    top += obj.offsetTop;    obj = obj.offsetParent;}

 

---

1 可视窗口的宽高

document.documentElement.clientWidth //即使加了min-width 也不影响document.documentElement.clientHeigh //即使加了min-width 也不影响

 

---

2 浏览器的宽高 ( 有兼容的问题 : 不兼容 IE8 )

window.innerWidth //如果没有滚动条，则和上面的值一样,否则，算上滚动条window.outerWidth //包括浏览器外面的一丢丢的宽度

 

---

 

3 分辨率

console.log( window.screen );//实际的分辨率window.screen.widthwindow.screen.height//去除任务栏之后的分辨率window.screen.availWidthwindow.screen.availHeight

 

---

 

****4 .scrollTop / .scrollLeft 滚动宽 , 滚动高

注意：

• • 可读可写，有内容溢出才有效果，就是 要有滚动条！
  • ele.scrollTop 元素 Y轴 滚动的距离
  • ele.scrollLeft 元素 X轴 滚动的距离
  • 适用于 document 文档 和 Element 元素
  • 不能带 px 单位！！！！！不然会翻车！！

//兼容： 谷歌 || IE 和 moz火狐var hh = document.documentElement.scrollTop || document.body.scrollTop;var ww = document.documentElement.scrollLeft || document.body.scrollLeft;

---

//案例：document.getElementsByTagName('body')[0].scrollTop = 100;var box = document.getElementById('box');var num = 0;function fn(){     //num++;     box.scrollTop= ++num;     document.title = box.scrollTop;     requestAnimationFrame( fn );}fn()；

 

 

---

1 ele.getBindingClientReat()

    得到矩形元素的界线，返回的是一个对象 , ( 包含Top,left,right,bottom ) 四个属性值，大小都是相对于浏览器窗口 top , left 的距离。

返回的内容类似于：

{ top: 143,right: 1196,bottom: 164,left: 889 }

---

2 ele.scrollIntoview( )

让 元素ele 滚动到可视区域 ( HTML5标准 ) ,参数 true 与浏览器对齐， false 元素在窗口居中显示。( 可以用作浏览器返回顶部 )

 

---

3 event.clientX / event.clientY

     相对于window，为鼠标相对于 浏览器窗口 的偏移

    – event.clientX ： 鼠标在文档的水平坐标

    – event.clientY ： 鼠标在文档的垂直坐标