DOM操作HTML文档;js创建表格；清除空文本节点

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);

}