js常用DOM操作

<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>

补充：web前端 , JavaScript ,