DOM
DOM
目录：
一 概念
Document Object Model 文档对象模型
- DOM规则提供了API方法让Javascript去操控HTML
- HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准/规则。
二 DOM树:
概念：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 = "<p>这里新增的节点内容</p>"；
进一步分析 :
我让 当我点击a的时候会在oBox上添加<p>pppppp</p>的事件;
<div id="box">
<a>HELLO!</a>
</div>
解析 :
—这里的 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 是动态的获取
例子： <div id="box"> <p>1111</p> 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( 要删除的儿子 )
注意 ： 元素的删除
——元素没法自杀！！只能通过爸爸来杀儿子，它爷爷也杀不了孙子
<div id="goudan"> <p id="mm"></p> </div>
var oBox = document.getElementById('goudan'); var oM = oBox.children; //这里的oM为oBox的儿子们 oBox.removeChild( oM ); //移除了oBox的儿子们
改
——–修改 HTML = 改变元素、属性、样式和事件
最简单滴方法：obj.innerHTML
obj.replaceChild( newnode,oldnode )
<div id="goudan"> <p id="mm"></p> </div> var oBox = document.getElementById('goudan'); var oM = oBox.children; //这里的oM为oBox的儿子们 var new_oM = document.createTextNode('插入的文本节点'); //obj.replaceChild( 你要插入的节点对象 , 你要移除的节点对象 ); oBox.replaceChild( new_oM,oM );
四 关于 Attribute 的方法
obj.getAttribute( ); //获取属性的节点 obj.setAttributeNode( ); //设置属性的节点 obj.createAttributeNode( ); //创建不合法标签 obj.removeAttributeNode( ); //移除属性的节点
五 节点的克隆 obj.cloneNode( true / flase )
注意：节点.cloneNode( 布尔值 )
– 1 返回一个克隆对象
– 2 布尔值决定带不带里面的子元素
true 带 ( 但也不带事件 ( 例如：点击事件 Jquery 才有 ) )
false 不带 ( 默认，只有个皮囊 )
<div id="box"> <p> 999999 </p> </div> 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.width window.screen.height //去除任务栏之后的分辨率 window.screen.availWidth window.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 ： 鼠标在文档的垂直坐标
