今天我想记录一下我对DOM属性的总结
首先，先来认识一下什么是JS的DOM
DOM 全称 Document Object Model ，中文名是 文档对象模型
文档：我们的html页面
文档对象：页面中的元素
文档对象模型：为了能够让程序–js去操作页面中的元素而定义的标准，通过 DOM，可访问 HTML 文档的所有元素
接下来，就认识一下DOM的一些属性及一些对属性的操作
1. childNodes //只读属性 子节点列表集合
不只元素节点是节点，一共有12种，当获取一个父元素的chlidNodes时要比元素数量多，经常接触到的除了元素节点外还有文本节点
2. nodeType //只读属性 当前元素的节点类型 1为元素节点
用判断子节点的nodeType为1时，再去控制它
常用节点：1是元素节点，2是属性节点，3是文本节点
属性节点：就是元素的属性–元素.attributes //只读属性
3. children //只读属性 子节点（元素节点）列表集合
children只会包含元素节点，因此不会有兼容性的问题
4. firstChild //只读属性 第一个子节点
包含文本类型的节点，不兼容
火狐有效的写法
firstElementChild兼容写法
var oFirst = 元素.firstElementChild||元素.firstChild;
if(oFirst){oFirst.style.....}//会在没有子节点时出问题因此最好的做法是
父元素.children[0].style....
5. lastChild //只读属性 最后一个子节点
兼容写法：
元素.lastElementChild||元素.lastChild
6. nextSibling //只读属性 下一个兄弟节点
兼容写法：
元素.nextElementSibling||元素.nextSibling
7. previousSibling //只读属性 上一个兄弟节点
兼容写法：
元素.previousElementSibling ||元素.previousSibling
parentNode //只读属性 父节点
没有兼容问题
8.offsetParent //只读属性 父节点
距离当前元素最近一个有定位属性的父元素节点
没有默认是body（ie7及以下，如果当前元素没有定位是body，如果有定位则变成html）
9.offsetLeft/offsetTop //只读属性 当前元素到定位父级的距离（偏移值）
如果有定位父级，如果自己没有定位，在ie7及以下该属性指的是到body的距离，其他是到定位父级的距离
如果没有定位父级（ie8及以下是到html的距离，而他们的默认margin值也不同，因此一定要清除默认样式，否则值不同）
10.offsetWidth/offsetHeight //只读属性 当前元素的占位宽高
style.width的取值可以取到元素属性style里的宽度
clientWidth的值为style.width+padding
offsetWidth（占位宽）盒子宽度（无margin）
如果有定位的父元素，如果获取一个元素到页面的距离
var iTop = 0;var obj = $('div3'); while(obj){iTop +=obj.offsetTop; obj=obj.offsetParent;}注意：
body的offsetparent为空
11. DOM元素的动态创建
1)
var oLi = document.createElement('li');//创建元素2)
oLi.innerHTML = oText.value;//给元素html内容3)
父级.appendChild(oLi)//在父级最后节点后添加元素4)
父级.insertBefore(oLi,b)//在父级b节点前添加元素5)
父级.insertBefore(oLi,oUl.children[0])//给父级第一个节点前添加元素（在ie下如果没有子元素会报错）解决方法:
oUl.children[0] ? oUl.insertBefore(oLi,oUl.children[0]) : oUl.appendChild(oLi)
appendChild,insertBefore,replaceChild都可以操作动态创建的元素，也可以操作已有的节点，而且是剪切操作
12. DOM的removeChild操作
父级.removeChild(li)//删除元素
父级.replaceChild(新节点,被替换节点)//替换子节点
13. 操作元素属性的方法
获取元素属性值
getAttribute()//()里为属性名设置元素属性值
setAttribute()//()里为属性名和值删除元素属性值
removeAttribute()//()里为属性名
Attribute的特性1、自定义属性，在ie8及以下可以用.和[]的方法取到，但是在标准浏览器下无法取到，用getAttribute()可以在所有浏览器中取到自定义属性
2、用.src和[‘src’]的方法取到的是绝对路径，用getAttribute()可以获取到相对路径（既实际值，ie7及以下不兼容，仍然是绝对路径）
创建元素的实例
<body>
<ul>
<li></li>
</ul>
<script>
var oUl = document.getElementsByTagName("ul")[0];
var oLi = document.createElement("li");
oLi.innerHTML = "231";
oLi.onclick = function(){
this.style.backgroundColor = "red";
};
oUl.children[0] ? oUl.insertBefore(oLi,oUl.children[0]) : oUl.appendChild(oLi);
</script>
</body>小练习：动态生成和删除对话
<body>
<input type="text"/>
<input type="button" value="发送"/>
<ul id="ul1">
</ul>
<script>
var oUl = document.getElementById("ul1");
var aInput = document.getElementsByTagName("input");
aInput[1].onclick = function (){
var oLi = document.createElement("li");
var oBtn = document.createElement("input");
oBtn.type = "button";
oBtn.value = "删除";
oBtn.onclick = function (){
oUl.removeChild(this.parentNode);
};
oLi.innerHTML = aInput[0].value;
oLi.appendChild(oBtn);
oUl.appendChild(oLi);
}
</script>
</body>//点击发送生成一个li，然后点击删除就删除这个li
