js常用DOM操作

来源：互联网发布：淘宝无线产品链接编辑：程序博客网时间：2024/06/05 11:22
<html><head></head><body><form id="myform"><input type="text" value="获取id" id="getId" ><input type="button" value="huhu" id="getId1" ><span>努力学习</span></form><script>//DOM 对象方法//getElementById返回带有指定 ID 的元素/*var byid = document.getElementById("getId");alert(byid.value);            //获取id//getElementsByTagName返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)var tagname = document.getElementsByTagName("input");alert(tagname[0].value);        //获取id//createElement创建元素节点var myform = document.getElementById("myform");var e = document.createElement("input");        //创建input元素e.type="button";                                //给input的type定义值e.value="嘻嘻哈哈";                                //给input的value定义值//appendChild() 把新的子节点添加到指定节点myform.appendChild(e);                            //往form里添加创建好的input表单//insertBefore() 在指定的子节点前面插入新的子节点document.body.insertBefore(e,myform);            //把input添加到form前面                       //createAttribute()创建属性节点var att=document.createAttribute("class");att.value="democlass";//setAttributeNode()方法添加新的属性节点document.getElementsByTagName("input")[0].setAttributeNode(att);//createElement创建元素节点var newel = document.createElement("p");//createTextNode() 方法创建新的文本节点newtext=document.createTextNode('xixihaha');//appendChild() 把新的子节点添加到指定节点newel.appendChild(newtext);//appendChild() 把新的子节点添加到指定节点myform.appendChild(newel);// setAttribute() 可以在属性不存在的情况下创建新的属性，我们可以使用这个方法来创建新属性x=document.getElementsByTagName("input");x[0].setAttribute("asdasd","first");//replaceChild() 方法用于替换节点//第一个参数是新的节点//第二个参数是旧的节点(要被替换掉的节点)var y1=document.getElementsByTagName("input")[1];var y2=document.getElementsByTagName("input")[2];myform.replaceChild(y2,y1);//removeChild() 方法删除指定的节点//当已定位需要删除的节点时，就可以通过使用 parentNode 属性和 removeChild() 方法来删除此节点var span1=document.getElementsByTagName("span")[0];span1.parentNode.removeChild(span1);*/</script></body></html>