DOM操作HTML文档

DOM 定义了访问和操作 HTML 文档的标准方法。

1、DOM访问节点
document.documentElement:返回HTML根元素
 var ohtml = document.documentElement;
 alert(ohtml.nodeName);
结果为：HTML

getElementsByTagName()：返回一个列表，这些列表的特点是：后面的节点名称相同
var items = document.getElementsByTagName('a');//获取所有的超链接

getElementsByName()：获取name属性的值相同的元素，在选择单选按钮时很好用
getElementById()
注意:如果给定的元素匹配某个元素的name属性的值，则也会返回这个元素，当然如果有匹配的ID值，首先返回此元素，如果没有这个元素，

则返回name属性的值匹配的元素

 

firstChild：获取下级节点的第一个子节点
ohtml.firstChild.nodeName结果为：head
lastChild：获取下级节点的最后一个子节点

childNodes[0]：获取某个节点的子节点列表中的第一个子节点,以此类推可以获取多个节点

但是会有空文本节点，所以在获取某一节点（ul）的子节点时，需要清除空文本节点。

清除空文本方法如下：
 function cleanWhitespace(element) {
            for (var i = 0; i < element.childNodes.length; i++) {
                var node = element.childNodes[i];
                if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
                    node.parentNode.removeChild(node);
                }
            }
        }
参数为某一节点。

parentNode：获取节点的父节点
例子：
 var ohtml = document.documentElement;  （HTML）
    var ohead = ohtml.childNodes[0];   
    var obody = ohtml.childNodes[1];
         alert(ohead.parentNode.nodeName); 结果为：HTML
         alert(obody.parentNode==ohtml);
兄弟节点：如下中的li标签
<ul>
<li></li>
<li></li>
<li></li>
</ul>
previousSibling：同级节点的上一个节点
nextSibling：同级节点的下一个节点
例子：
  var ohtml = document.documentElement;
            var ohead = ohtml.childNodes[0];
            var obody = ohtml.childNodes[1];
            alert(obody.previousSibling.nodeName);结果为head
            alert(ohead.nextSibling.nodeName);结果为body

2、获取节点的属性，修改节点的属性，删除节点的属性。
getAttribute(name)：获取节点中属性为name的属性值
setAttribute(name,newvalue):将节点中属性为name的属性值更改为newvalue
removeAttribute(name):删除节点中名称为name的属性

3、操作节点

createElement():创建节点
createTextNode():创建文本节点
appendChild()：将子节点附加到父节点中
removeChild()：最好使用节点的parentNode属性来删除节点
在客户端通过js脚本动态创建的节点，是不能通过js程序访问的，比如替换，删除，能够操作(替换，删除)的节点必须不是动态创建的，也

就是查看源文件时能够看到的html节点
replaceChild()：注意，第1个参数为新节点，第2个参数为旧节点
insertBefore():将新消息在旧消息之前显示
function replacenode() {
            var op = document.createElement("p");
            var otext = document.createTextNode('世界你好');
            op.appendChild(otext);
            var oldop = document.getElementsByTagName('p')[0];
            oldop.parentNode.insertBefore(op, oldop);
        }

4、js创建表格

rows:<tbody/>中所有行的集合
deleteRow(position):删除指定位置的行
insertRow(position):在rows集合中的指定位置插入新行
<tr/>元素添加以下内容
cells:</tr>元素中所有单元格的集合
deleteCell(position):删除指定位置的单元格
insertCell(position):在指定位置插入新的单元格

例子：
function createTable() {
            var tablenode = document.createElement('table');
            //设置表括格属性
            tablenode.setAttribute('border', '1px');
            tablenode.setAttribute('width', '500px');
            tablenode.setAttribute('height', '100px');

            //创建第一行
            tablenode.insertRow(0);
            tablenode.rows[0].insertCell(0);
            tablenode.rows[0].insertCell(1);
            tablenode.rows[0].insertCell(2);
            tablenode.rows[0].cells[0].appendChild(document.createTextNode('姓名'));
            tablenode.rows[0].cells[1].appendChild(document.createTextNode('旅游地点'));
            tablenode.rows[0].cells[2].appendChild(document.createTextNode('出发日期'));

            //创建第二行
            tablenode.insertRow(1);
            tablenode.rows[1].insertCell(0);
            tablenode.rows[1].insertCell(1);
            tablenode.rows[1].insertCell(2);
            tablenode.rows[1].cells[0].appendChild(document.createTextNode('刘能'));
            tablenode.rows[1].cells[1].appendChild(document.createTextNode('象牙山'));
            tablenode.rows[1].cells[2].appendChild(document.createTextNode('2013-11-11'));

            var divnode = document.getElementById('mydiv');
            divnode.appendChild(tablenode);
        }