首页 > 代码库 > js的DOM节点访问与操作

js的DOM节点访问与操作

2024-10-19 11:24:41   209人阅读

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


联系
我们