DOM : Document Object Model 文档对象模型
文档：html页面
文档对象：页面中元素
文档对象模型：定义 为了能够让程序(js)去操作页面中的元素
DOM会把文档看作是一棵树，同时定义了很多方法来操作这棵数中的每一个元素（节点）
DOM节点
getElementById
getElementByTagName
document
document.body
1.childNodes和children
元素.childNodes :只读 属性 子节点列表集合
标准下:包含文本和元素类型的节点,也会包含非法嵌套的子节点
非标准下(ie9以下):包含元素类型的节点,ie7以下不包含非法嵌套子节点
childNodes只包含一级子节点,不包含后辈孙级以下的节点
不推荐使用
DOM节点类型有很多种 12种
元素.nodeType :只读 属性 当前元素的节点类型
元素节点 nodeType 1
文本节点 nodeType 3
属性节点 nodeType 2
元素.attributes : 只读 属性 属性列表集合
oUl.attributes.length
name value nodeType
元素.children : 只读 属性 子节点列表集合
标准下:只包含元素类型节点
非标准下:只包含元素类型的节点
2.firstChild,lastChild,nextSibling,previousSibling
元素.firstChild : 只读 属性 第一个子节点
标准下:firstChild包含文本类型的节点
非标准下:只包含元素节点
元素.firstElementChild :只读 属性 标准下获取第一个元素类型的子节点
if ( oUl.firstElementChild ) {
oUl.firstElementChild.style.background = 'red';
} else {
oUl.firstChild.style.background = 'red';
}
var oFirst = oUl.firstElementChild || oUl.firstChild;
oFirst.style.background = 'red';
问题?ul没有子节点,返回文本节点oUl.firstChild,报错
最好的做法
if ( oUl.children[0] ) {
oUl.children[0].style.background = 'red';
} else {
alert('没有子节点可以设置')
}
元素.lastChild || 元素.lastElementChild 最后一个子节点
var oLast = oUl.lastElementChild || oUl.lastChild;
oLast.style.background = 'yellow';
元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点
var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
oNext.style.background = 'blue';
元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点
var oPrev = oLast.previousElementSibling || oLast.previousSibling;
oPrev.style.background = 'orange';
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
3.父节点parentNode和offsetParent
元素.parentNode
实例
<script>
window.onload = function() {
var aA = document.getElementsByTagName('a');
for (var i=0; i<aA.length; i++) {
aA[i].onclick = function() {
/*
元素.parentNode : 只读 属性 当前节点的父级节点
*/
this.parentNode.style.display = 'none';
}
}
}
</script>
<body>
<ul id="ul1">
<li>11111 <a href="javascript:;">隐藏</a></li>
<li>22222 <a href="javascript:;">隐藏</a></li>
<li>33333 <a href="javascript:;">隐藏</a></li>
<li>44444 <a href="javascript:;">隐藏</a></li>
</ul>
</body>
元素.offsetParent :只读 属性 当前元素最近的有定位的父节点
如果没有定位父级,默认是body
ie7一下,如果当前元素没有定位,默认是body,如果自身加了定位属性,父级是html,或者触发haslayout的上级元素
<script>
window.onload = function() {
var oDiv3 = document.getElementById('div3');
//parentNode : 父节点
//alert( oDiv3.parentNode.id );
/*
元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点
如果没有定位父级，默认是body
ie7以下，如果当前元素没有定位默认是body，如果有定位则是html
ie7以下，如果当前元素的某个父级触发了layout，那么offsetParent就会被指向到这个触发了layout特性的父节点上
*/
//layout
/*alert( document.getElementById('div2').currentStyle.hasLayout );*/
alert( oDiv3.offsetParent.id );
}
</script>
<body id="body1">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
4.元素偏移位置
元素.offsetLeft[Top] : 只读 属性 当前元素到定位父级的距离（偏移值）
到当前元素的offsetParent的距离
如果没有定位父级
offsetParent -> body
offsetLeft -> html
如果有定位父级
ie7以下：
如果自己没有定位，那么offsetLeft[Top]是到body的距离
如果自己有定位，那么就是到定位父级的距离
其他：到定位父级的距离
5.元素宽高
style.width 行间值
clientWidth 可视宽度 width+padding
offsetWidth 占位宽 可视宽+border
6.获取元素相对页面位置
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {padding: 40px 50px;}
#div1 {background: red;position: relative;}
#div2 {background: green; position: relative;}
#div3 {background: orange; position: relative;}
</style>
<script>
window.onload = function() {
var oDiv3 = document.getElementById('div3');
//alert( oDiv3.offsetLeft );
/*var iTop = 0;
var obj = oDiv3;
while (obj) {
alert( obj.id + ' : ' + obj.offsetTop );
iTop += obj.offsetTop;
obj = obj.offsetParent;
alert(obj + ' : ' + obj.id);
}
alert( iTop );*/
alert( document.body.offsetParent );//null
var p = getPos( oDiv3 );
//alert( p.top );
function getPos(obj) {
var pos = {left:0, top:0};
while (obj) {
pos.left += obj.offsetLeft;
pos.top += obj.offsetTop;
obj = obj.offsetParent;
}
return pos;
}
}
</script>
</head>
<body id="body1">
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
7.操作元素属性的方式
otext.value 访问 赋值 value不可以是变量
otext['value'] 可使用变量
元素.getAttribute() ;方法获取指定元素制定属性值
otext.getAttribute('value') ;
元素.setAttribute() ;方法 给指定元素指定的属性设置值
otext.setAttribute('value','hello') ;
元素.removeAttribute(属性名称) 移除元素属性
区别
1.用.和[]无法操作元素自定义属性,非标准下
getAttribute()可以操作自定义属性
.[]src完整路径
getAttribute(src)标准下是src设置值,ie7是绝对路径值
oImg.style.getAttribute('width')标准下报错
8.元素的动态创建
innerHTML开销大,效率
document.createElement('li')
document.createElement(标签名称); 创建元素
父级.removeChild(要删除的元素); 删除元素
父级.appendChild(要添加的元素) 方法 追加子元素
父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
在ie下如果第二个参数的节点不存在，会报错
在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}
父级.replaceChild(新节点，被替换节点) 替换子节点
appendChild,insertBefore,replaceChild都可以操作动态创建出来的节点，也可以操作已有节点
