JavaEE中级.20190529.节点（二）（创建节点.插入节点.间接查找节点.替换节点.克隆节点.删除节点.）.表单（获取表单.获取 input 的元素.获取单/双选按钮.获取下拉选项.获取下）

最新推荐文章于 2021-02-28 03:47:16 发布

咚痞子

最新推荐文章于 2021-02-28 03:47:16 发布

阅读量229

点赞数

分类专栏： JavaEE阶段

本文链接：https://blog.csdn.net/LiangEdward/article/details/90676833

版权

本文详细介绍了JavaEE中关于节点的操作，包括创建、插入、查找、替换、克隆和删除节点的方法。同时讲解了如何获取和处理表单，如获取input元素、单选按钮、多选按钮、下拉选项等，并探讨了表单提交的GET和POST请求方式。

摘要由CSDN通过智能技术生成

一.节点（二）

1.创建节点
方法                        描述
           createElement() 创建一个新的节点，需要传入节点的标签名称，返回创建的元素对象
           createTextNode()        创建一个文本节点，可以传入文本内容
           innerHTML 也能达到创建节点的效果，直接添加到指定位置了
     2.插入节点
           方法                        描述
           write()                将任意的字符串插入到文档中
                                       document.write()在加载文档时使用，会和当前文档使用同一个document对象，所以写入的内容会

显示在原来的内容之后；
document.write()在加载文档之后使用（点击按钮触发事件使用），此时document是一个新的对象，

会将原来的document对象覆盖，所以原来页面中的内容也会被覆盖。
                                       不要在使用document.write()方法之后去获取元素节点
appendChild()    向元素中添加新的子节点，作为最后一个子节点
           insertBefore() 向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点，  需要参考父节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>创建节点、插入节点</title>
	</head>
	<body>
		<button onclick="addPara();">添加段落</button>
		<button onclick="addImg();">添加图片</button>
		<button onclick="addTxt();">添加文本框</button>
		<button onclick="addOptions()">添加选项</button> 
		<select name="music" id="mymusic">
			<option value="-1">你心内的一首歌</option>
			<option value="0">南山南</option>
			<option value="1">喜欢你</option>
		</select>
		<hr />
		<div id = "container" style="border: solid 1px pink;"></div>
	</body>
	
	<script type="text/javascript">
		/* 添加“段落、图片、文本框、选项” */
		
		// 得到div元素  （获取容器）
		var mydiv = document.getElementById("container");
		
		/**
		 * 添加 段落
		 */
		function addPara() {
			/* 方式一： */
			// 创建p元素
			var p = document.createElement("p");
			// 创建文本节点
			var ptxt = document.createTextNode("哈哈哈哈");
			// 将文本节点追加到p元素节点里面的最后
			p.appendChild(ptxt);
			console.log(p);
			// 将p元素节点追击到指定容器中
			mydiv.appendChild(p);
			
			
			/*方式二*/
			// 创建p元素
			var p2 = document.createElement("p");
			// 给p标签赋值
			p2.innerHTML = "嘻嘻嘻嘻嘻";
			// 将p标签追击到指定容器中    appendChild(节点)
			mydiv.appendChild(p2);
			
			/*方式三*/
			var p3 = "<p>嘿嘿嘿嘿</p>";
			mydiv.innerHTML += p3;
		}
		
		
		/**
		 * 添加图片
		 */
		function addImg() {
			/*方式一*/
			// 创建img元素节点
			var img = document.createElement("img");
			// 设置img元素属性节点
			img.src = "img/jay.jpg";
			// 设置图片的宽高
			img.width = 200;
			img.height = 200;
			// 将img元素节点追加到div中
			mydiv.appendChild(img);
			
			
			/*方式二*/
			// 创建img元素节点
			var img2 = document.createElement("img");
			// 设置img元素属性节点
			img2.setAttribute("src","img/jay.jpg");
			// 设置图片的宽高
			img2.style.width = "200px";
			img2.setAttribute("height",200);
			// 将img元素节点追加到div中
			mydiv.appendChild(img2);
			
			
			/*方式三*/
			var img3 = "<img src='img/jay.jpg' width=200 height=200 />";
			mydiv.innerHTML += img3;
		}
		
		/**
		 * 添加文本框
		 */
		function addTxt() {
			/*方式一*/
			// 创建input元素节点
			var ipt = document.createElement("input");
			// 设置input的类型
			ipt.type = "text";
			// 给文本框赋值
			ipt.value = "Hello";
			// 将img元素节点追加到div中
			mydiv.appendChild(ipt);
			console.log(ipt);
			
			/*方式二*/
			// 创建input元素节点
			var ipt2 = document.createElement("input");
			// 设置input的类型
			ipt2.setAttribute("type","text");
			// 给文本框赋值
			ipt2.setAttribute("value","你好");
			// 将img元素节点追加到div中
			mydiv.appendChild(ipt2);
			
			/*方式二*/
			var ipt3 = "<input type='text' value='hahahah'/>";
			console.log(mydiv.innerHTML);
			mydiv.innerHTML += ipt3;
			
		}
		
		
		/**
		 * 添加下拉选项
		 */
		function addOptions() {
			// 得到下拉框选项
			var mymusic = document.getElementById("mymusic");
			
			/*方式一*/
			var opt = document.createElement("option");
			// 设置opt的