关闭

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

1204人阅读 评论(0) 收藏 举报

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:37773次
    • 积分:952
    • 等级:
    • 排名:千里之外
    • 原创:57篇
    • 转载:15篇
    • 译文:0篇
    • 评论:6条
    最新评论