javascript dom操作-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_7664/article/details/81954949

本文介绍了一种通过JavaScript操作DOM的方法，包括获取页面元素、添加和删除节点等实用技巧。通过对文档中的各种元素进行操作，可以实现网页内容的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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  &  getElementsByTagName
			var frm1 = document.getElementById("frm1");     //getElementById方法用于根据id找寻出唯一的元素，只能用在document文档对象上，适合查找单独元素
			alert(frm1.getAttribute("name"));               //frm1；getAttribute获取某个元素的某一属性
			var inputs = frm1.getElementsByTagName("input");//getElementsByTagName返回某一对象所包含的标签名字为xx的一组元素,可以用在任何每个node
			alert(inputs.length); //3
			for(i=0;i<inputs.length;i++){
				alert(inputs[i].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[i];
				alert(child.innerHTML);          //js,perl,php,python 

				//文本节点的nodeName值#text nodeType的值3，元素节点name为元素名，type值为1
				alert("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节点的父节点

			//添加新node
			var 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 onload="loadshow()">
	<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>