<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>
js常用DOM操作
最新推荐文章于 2024-04-09 10:54:17 发布