JavaScript的DOM对象
对象模型与DOM
对象模型对于HTML网页来说，就是一种规范如何访问HTML元素，样式或程序代码的机制，可以将HTML元素，样式或程序代码视为对象。
DOM可以用来处理HTML网页和XML文件，针对HTML网页的DOM称为HTML DOM,
DOM对象模型提供了一组标准的编程接口，我们可以通过这组接口来访问对象的属性和方法。
当网页加载时，浏览器会自动创建页面的文档对象模型
- 获取HTML元素节点
使用id属性来获取元素节点
getElementById()方法
getElementById() 返回带有指定 ID 的元素。
注：JavaScript程序代码获取HTML DOM是使用document，他是浏览器对象模型中的window根对象的属性。
可以在使用 nodeName或tagName属性获取节点的标签名称。
getElementsByTagName()方法返回的是一个NodeList对象，我们可以使用item（）方法来获得指定的节点对象。
同样我们也可以直接将NodeList对象当成数组来取得指定的下标值得节点元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
getElementsByName() 根据name获取元素节点
- 更改元素的内容
我们可以使用innerHTML属性访问HTML元素，innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
改变元素内容的最简单的方法是使用 innerHTML 属性。
- 存取HTML元素的尺寸与位置
<script type ="text/javascript">
function showposition()
{
var p = document.getElementById("myId");
alert("left"+ p.offsetLeft+"top"+p.offsetTop);
}
function showSize() {
var p = document.getElementById("myId");
alert("高" + p.offsetHeight + "宽" + p.offsetWidth);
}
function showParent() {
var p = document.getElementById("myId");
alert("父级元素" + p.offsetParent.tagName);
}
</script>
<p id="myId">HTML元素</p>
<form>
<input type="button" onclick="showposition()" value="元素的位置" />
<input type="button" onclick="showSize()" value="元素尺寸" />
<input type="button" onclick="showParent()" value="显示父元素" />
</form>
代码演示：
属性：
offsetLeft：节点对象距离左边界的距离
offsetTop：节点对象距离上边界的距离
offsetHeight：节点对象高
offsetWidth：节点对象宽
offsetParent：节点对象的上一级对象
方法：
scrollIntoView（）：如果浏览器看不见这个HTML元素，就自动滚动窗口到此元素。
-
DOM节点浏览
DOM提供了浏览属性来遍历节点，获取节点的种类与名称
firstChild：返回第一个childNodes集合对象的子节点，包含此节点下的所有子节点。
lastChild：返回最后一个childNodes集合对象的子节点，包含此节点下的所有子节点。
parentNode：返回父节点的对象
nextSibiling：返回下一个兄弟节点的对象
previousSiliing：返回前一个兄弟节点的对象
nodeName：返回节点的HTML名称
nodeType：返回节点的种类，1为标签，2为属性，3为文字节点
DOM也提供了属性来访问文字节点的属性
data：访问文字节点的内容，其他种类的节点返回underfined
nodeValue：访问文字节点的内容，其他种类的节点返回null
还有就是文字节点不会有子节点，在HTML网页中空格符或换行符都会转换为文字节点。
DOM的集合对象
attributes：节点对象的集合对象，可以直接使用名称来访问
childNodes：节点对象的集合对象，这是一个数组对象，可以使用下标值为0 来访问。
children：节点对象的集合对象，不包含文字节点
在DOM获取父节点是使用parentNode属性
- HTML集合对象
document.forms：包含网页的所有<form>标签
document.images：包含网页的所有<img>标签
document.links：包含网页的所有拥有href属性的<a>标签
- 访问HTML标签的属性
getAttribute（attribute）：获取传入参数的attribute属性的属性值
setAttribute（attribute,value）：将传入参数的attribute属性设置为value值
removeAttribute（attribute）：删除传入参数的attribute属性
节点操作
使用document对象的createElement（）方法创建节点对象，
使用document对象的removechild（）方法删除节点对象，由被删除的对象的父元素调用。
insertBefore()给文档树插入一个节点，位置在当前节点的指定子节点之前。如果该节点已经存在，则删除之再插入到它的位置。
replaceChild()从文档树中删除并返回指定的子节点，用另一个节点替换它。
