js的DOM节点访问与操作

时间：2014-12-31 10:02:16 阅读：157 评论：0 收藏：0 [点我收藏+]

标签：

1.访问DOM节点
1.1 按id取元素：getElememtByld("标签的id")
1.2 按标签名取元素集：getElementsByTagName()返回一个对象数组

2.操作元素内的文本
2.1 简单的方法是innerText(),但是FireFox浏览器不兼容。

function text(e){
var t="";
//如果传入的是元素，则继续遍历其元素
//否则假定它是一个数组
e=e.childNodes || e;
//遍历所有字节点
for(var j=o;j<e.length;j++){
//如果不是元素，追加其文本值
//否则，递归遍历所有元素的子节点
t+=e[j].nodeType !=1 ? e[j].nodeValue:text(e[j].childNodes);

}
return t;
}

function displayInfo(){
var x=document.getElementById("test");//得到id为test的元素
alert(text(x));//显示其信息
}
这是一种比较简单易用的方式获取元素的文本内容。

3.操作元素内的HTML
3.1 innerHTML

4.修改DOM节点
4.1 创建DOM节点
document.createElementt("div");
4.2 插入DOM节点
常用插入DOM节点的函数insertBefore和appendChild。
1.parentOfBeforeNode.insertBefore(nodeToInsert,beforeNode);nodeToInsert是要插入的

节点，beforeNode是表示插入到哪个节点之前，parentOfBeforeNode则是beforeNode的父元素。
2.appendChild函数
它调用一个元素参数，追加指定的节点到子节点列表中的最后。
parentElement.appendChild(nodeToInsert);
4.3 删除DOM节点

removeChild()函数；NodeParent.removeChild(NodeToRemove);

js的DOM节点访问与操作

标签：

原文地址：http://blog.csdn.net/heye13/article/details/42290753

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行