javascript dom操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><script language="javascript">function loadshow(){var bod = document.body; //body元素var forms = document.forms; //所有表单var imgs = document.images; //所有图片var all = document.all; //文档中所有的元素//getElementById&getElementsByTagNamevar frm1 = document.getElementById("frm1"); //getElementById方法用于根据id找寻出唯一的元素，只能用在document文档对象上，适合查找单独元素alert(frm1.getAttribute("name")); //frm1；getAttribute获取某个元素的某一属性var inputs = frm1.getElementsByTagName("input");//getElementsByTagName返回某一对象所包含的标签名字为xx的一组元素,可以用在任何每个nodealert(inputs.length); //3for(i=0;i<inputs.length;i++){alert(inputs.getAttribute("type")); //text，password，button}var script = document.getElementById("script");//xx.childNodes获取xx节点的所有子节点（包括文本节点）var scriptChilds = script.childNodes; for(i=0;i<scriptChilds.length;i++){var child = scriptChilds;alert(child.innerHTML); //js,perl,php,python //文本节点的nodeName值#text nodeType的值3，元素节点name为元素名，type值为1alert("nodeName:"+child.nodeName+" nodeType:"+child.nodeType);}alert(script.firstChild.innerHTML); //xx.firstChild 获取xx节点的第一个子节点alert(script.lastChild.innerHTML);//xx.firstChild 获取xx节点的最后一个子节点alert(script.parentNode.getAttribute("name")); //testNode;xx.firstChild 获取xx节点的父节点alert(script.nextSibling.getAttribute("name")); //db;xx.firstChild 获取xx节点的父节点alert(script.previousSibling.getAttribute("name")); //develop;xx.firstChild 获取xx节点的父节点//添加新nodevar newLi1 = document.createElement("li"); //创建一个新的li元素节点var textNode1=document.createTextNode("sqlserver");//创建一个文本节点alert(textNode1.nodeValue); //获取文本节点的值newLi1.appendChild(textNode1); //xx.appendChild 用于将元素或文本节点添加到xx元素的子节点列表的最后var newLi2 = document.createElement("li");var textNode2 = document.createTextNode("I am first");newLi2.appendChild(textNode2); var newLi3 = document.createElement("li"); var textNode3 = document.createTextNode("I replace the last");newLi3.appendChild(textNode3); var parentNode = document.getElementById("db"); //获取插入节点位置parentNode.appendChild(newLi1); //只能使用一次parentNode.insertBefore(newLi2,parentNode.firstChild);//xx.insertBefore在xx元素某一子节点前插入新元素，第一个参数新节点，第二个旧节点parentNode.replaceChild(newLi3,parentNode.lastChild); //xx.replaceChild替换xx元素下的某个子元素，第一个参数为新，第二个为旧的/*没有insertAfter方法，可以自定义一个function insertAfter(new,old){var parent = old.parentNode;if(parent.lastChild == old){parent.appendChild(new);}else{parent.insertBefore(new,old.nextSibling);} }*/var javaNode = document.getElementById("java");var javaParent = javaNode.parentNode;javaParent.removeChild(javaNode); //xx.removeChild(); 删除某个节点}</script> </HEAD> <BODY ><div id="title">用户登录</div><div id="form"></div><form id="frm1" name="frm1"><input type="text" name="username"/><br/><input type="password" name = "psd"/><br/><input type="button"value="submit"/></form><p><a>a</a><a>b</a><a>c</a></p><div id="testNode" name="testNode"><ul id="develop" name="develop"><li id="java">java</li><li>c</li><li>c++</li><li>.net</li><li>c#</li></ul><ul id="script" name="script"><li>js</li><li>perl</li><li>php</li><li>python</li></ul><ul id="db" name="db"><li>mysql</li><li>oracle</li><li>db2</li></ul></div> </BODY></HTML>
页:
[1]