js的DOM节点访问与操作

浏览数：18 / 时间：2015年06月09日

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节点访问与操作