devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaScript基础12-day14【DOM查询(获取元素节点、获取元素节点的子节点)、全选练习、DOM增删改、DOM添加删除记录、Window对象方法】_怎样返回此节点

作者：羊村懒王 | 2024-02-19 06:59:44

赞

踩

怎样返回此节点

学习地址：

  1. 谷粒学院——尚硅谷
  2. 哔哩哔哩网站——尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)

JavaScript基础、高级学习笔记汇总表【尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)】

目   录

P96 96.尚硅谷_JS基础_DOM查询 22:09

获取元素节点

获取元素节点的子节点

dom查询练习【4~6】

P97 97.尚硅谷_JS基础_DOM查询 21:36

获取父节点和兄弟节点

dom查询练习【7~11】

P98 98.尚硅谷_JS基础_全选练习（一） 12:39

Checkbox 对象

checked 属性：设置或返回 checkbox 是否应被选中。

“全选按钮”的实现

P99 99.尚硅谷_JS基础_全选练习（二） 19:22

“全不选按钮、反选按钮、提交按钮”的实现

P100 100.尚硅谷_JS基础_全选练习（三）15:56

“全选/全不选按钮”状态同步的实现

P101 101.尚硅谷_JS基础_dom查询的剩余方法 21:42

document.getElementsByTagName("body")[0];   document.body;

document.documentElement;

document.all   document.getElementsByTagName("*")

getElementsByClassName()：根据元素的class属性值查询一组元素节点对象

document.querySelector()

document.querySelectorAll()

P102 102.尚硅谷_JS基础_dom增删改 33:15

DOM方法

DOM 增删改 案例

1、创建一个"广州"节点,添加到#city下

2、将"广州"节点插入到#bj前面

3、使用"广州"节点替换#bj节点

4、删除#bj节点

5、读取#city内的HTML代码

6、设置#bj内的HTML代码

7、创建一个"广州"节点，添加到#city下

P103 103.尚硅谷_JS基础_添加删除记录-删除 21:46

取消超链接的默认跳转行为

window 对象方法

删除dom元素

P96 96.尚硅谷_JS基础_DOM查询 22:09

获取元素节点

  • 通过document对象调用
  1. getElementById()：通过id属性获取一个元素节点对象。
  2. getElementsByTagName()：通过标签名获取一组元素节点对象。
  3. getElementsByName()：通过name属性获取一组元素节点对象。

获取元素节点的子节点

通过具体的元素节点调用

  1. getElementsByTagName()：方法，返回当前节点的指定标签名后代节点。
  2. childNodes：属性，表示当前节点的所有子节点。
  3. firstChild：属性，表示当前节点的第一个子节点。
  4. lastChild：属性，表示当前节点的最后一个子节点。

dom查询练习【4~6】

  

  childNodes：属性，表示当前节点的所有子节点。

  

P97 97.尚硅谷_JS基础_DOM查询 21:36

获取父节点和兄弟节点

通过具体的节点调用

  1. parentNode：属性，表示当前节点的父节点
  2. previousSibling：属性，表示当前节点的前一个兄弟节点
  3. nextSibling：属性，表示当前节点的后一个兄弟节点

dom查询练习【7~11】

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. 		<title>Untitled Document</title>
  6. 		<!-- <link rel="stylesheet" type="text/css" href="style/css.css" /> -->
  7. 		<style type="text/css">
  8. 			@CHARSET "UTF-8";
  9.  
  10. 			body {
  11. 				width: 800px;
  12. 				margin-left: auto;
  13. 				margin-right: auto;
  14. 			}
  15.  
  16. 			button {
  17. 				width: 300px;
  18. 				margin-bottom: 10px;
  19. 			}
  20.  
  21. 			#btnList {
  22. 				float: left;
  23. 			}
  24.  
  25. 			#total {
  26. 				width: 450px;
  27. 				float: left;
  28. 			}
  29.  
  30. 			ul {
  31. 				list-style-type: none;
  32. 				margin: 0px;
  33. 				padding: 0px;
  34. 			}
  35.  
  36. 			.inner li {
  37. 				border-style: solid;
  38. 				border-width: 1px;
  39. 				padding: 5px;
  40. 				margin: 5px;
  41. 				background-color: #99ff99;
  42. 				float: left;
  43. 			}
  44.  
  45. 			.inner {
  46. 				width: 400px;
  47. 				border-style: solid;
  48. 				border-width: 1px;
  49. 				margin-bottom: 10px;
  50. 				padding: 10px;
  51. 				float: left;
  52. 			}
  53. 		</style>
  54. 		<script type="text/javascript">
  55.  
  56. 			/*
  57. 			 * 定义一个函数，专门用来为指定元素绑定单击响应函数
  58. 			 * 	参数：
  59. 			 * 		idStr：要绑定单击响应函数的对象的id属性值
  60. 			 * 		fun：事件的回调函数，当单击元素时，该函数将会被触发
  61. 			 */
  62. 			function myClick(idStr, fun) {
  63. 				var btn = document.getElementById(idStr);
  64. 				btn.onclick = fun; // 函数也是对象，可以作为实参
  65. 			}
  66.  
  67. 			window.onload = function() {
  68. 				//为id为btn01的按钮绑定一个单击响应函数
  69. 				var btn01 = document.getElementById("btn01");
  70. 				btn01.onclick = function() {
  71. 					//查找#bj节点
  72. 					var bj = document.getElementById("bj");
  73. 					//打印bj
  74. 					//innerHTML 通过这个属性可以获取到元素内部的html代码
  75. 					alert(bj.innerHTML);
  76. 				};
  77.  
  78.  
  79. 				//为id为btn02的按钮绑定一个单击响应函数
  80. 				var btn02 = document.getElementById("btn02");
  81. 				btn02.onclick = function() {
  82. 					//查找所有li节点
  83. 					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
  84. 					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
  85. 					//即使查询到的元素只有一个，也会封装到数组中返回
  86. 					var lis = document.getElementsByTagName("li");
  87. 					//打印lis
  88. 					//alert(lis.length);
  89. 					//变量lis
  90. 					for (var i = 0; i < lis.length; i++) {
  91. 						alert(lis[i].innerHTML);
  92. 					}
  93. 				};
  94.  
  95.  
  96. 				//为id为btn03的按钮绑定一个单击响应函数
  97. 				var btn03 = document.getElementById("btn03");
  98. 				btn03.onclick = function() {
  99. 					//查找name=gender的所有节点
  100. 					var inputs = document.getElementsByName("gender");
  101. 					//alert(inputs.length);
  102. 					for (var i = 0; i < inputs.length; i++) {
  103. 						/*
  104. 						 * innerHTML用于获取元素内部的HTML代码的
  105. 						 * 	对于自结束标签，这个属性没有意义
  106. 						 */
  107. 						//alert(inputs[i].innerHTML);
  108. 						/*
  109. 						 * 如果需要读取元素节点属性，
  110. 						 * 	直接使用 元素.属性名
  111. 						 * 		例子：元素.id 元素.name 元素.value
  112. 						 * 		注意：class属性不能采用这种方式，
  113. 						 * 			读取class属性时需要使用 元素.className
  114. 						 */
  115. 						alert(inputs[i].className);
  116. 					}
  117. 				};
  118.  
  119. 				//为id为btn04的按钮绑定一个单击响应函数
  120. 				var btn04 = document.getElementById("btn04");
  121. 				btn04.onclick = function() {
  122. 					//获取id为city的元素
  123. 					var city = document.getElementById("city");
  124. 					//查找#city下所有li节点
  125. 					var lis = city.getElementsByTagName("li");
  126. 					for (var i = 0; i < lis.length; i++) {
  127. 						alert(lis[i].innerHTML);
  128. 					}
  129. 				};
  130.  
  131. 				//为id为btn05的按钮绑定一个单击响应函数
  132. 				var btn05 = document.getElementById("btn05");
  133. 				btn05.onclick = function() {
  134. 					//获取id为city的节点
  135. 					var city = document.getElementById("city");
  136. 					//返回#city的所有子节点
  137. 					/*
  138. 					 * childNodes属性会获取包括文本节点在内的所有节点
  139. 					 * 根据DOM标签标签间空白也会当成文本节点
  140. 					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
  141. 					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
  142. 					 */
  143. 					var cns = city.childNodes;
  144. 					//alert(cns.length);
  145. 					// for (var i = 0; i < cns.length; i++) {
  146. 					// 	alert(cns[i]);
  147. 					// }
  148. 					/*
  149. 					 * children属性可以获取当前元素的所有子元素
  150. 					 */
  151. 					var cns2 = city.children;
  152. 					alert(cns2.length);
  153. 				};
  154.  
  155. 				//为id为btn06的按钮绑定一个单击响应函数
  156. 				var btn06 = document.getElementById("btn06");
  157. 				btn06.onclick = function() {
  158. 					//获取id为phone的元素
  159. 					var phone = document.getElementById("phone");
  160. 					//返回#phone的第一个子节点
  161. 					//phone.childNodes[0];
  162. 					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
  163. 					var fir = phone.firstChild;
  164. 					//firstElementChild获取当前元素的第一个子元素
  165. 					/*
  166. 					 * firstElementChild不支持IE8及以下的浏览器，
  167. 					 * 	如果需要兼容他们尽量不要使用
  168. 					 */
  169. 					//fir = phone.firstElementChild;
  170. 					alert(fir);
  171. 				};
  172.  
  173. 				//为id为btn07的按钮绑定一个单击响应函数
  174. 				myClick("btn07", function() {
  175. 					//获取id为bj的节点
  176. 					var bj = document.getElementById("bj");
  177. 					//返回#bj的父节点
  178. 					var pn = bj.parentNode;
  179. 					alert(pn.innerHTML);
  180. 					/*
  181. 					 * innerText
  182. 					 * 	- 该属性可以获取到元素内部的文本内容
  183. 					 * 	- 它和innerHTML类似，不同的是它会自动将html去除
  184. 					 */
  185. 					//alert(pn.innerText);
  186. 				});
  187.  
  188.  
  189. 				//为id为btn08的按钮绑定一个单击响应函数
  190. 				myClick("btn08", function() {
  191. 					//获取id为android的元素
  192. 					var and = document.getElementById("android");
  193. 					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
  194. 					var ps = and.previousSibling;
  195. 					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
  196. 					//var pe = and.previousElementSibling;
  197. 					alert(ps);
  198. 				});
  199.  
  200. 				//读取#username的value属性值
  201. 				myClick("btn09", function() {
  202. 					//获取id为username的元素
  203. 					var um = document.getElementById("username");
  204. 					//读取um的value属性值
  205. 					//文本框的value属性值，就是文本框中填写的内容
  206. 					alert(um.value);
  207. 				});
  208.  
  209.  
  210. 				//设置#username的value属性值
  211. 				myClick("btn10", function() {
  212. 					//获取id为username的元素
  213. 					var um = document.getElementById("username");
  214. 					um.value = "今天天气真不错~~~";
  215. 				});
  216.  
  217.  
  218. 				//返回#bj的文本值
  219. 				myClick("btn11", function() {
  220. 					//获取id为bj的元素
  221. 					var bj = document.getElementById("bj");
  222. 					//alert(bj.innerHTML);
  223. 					//alert(bj.innerText);
  224. 					//获取bj中的文本节点
  225. 					/*var fc = bj.firstChild;
  226. 					alert(fc.nodeValue);*/
  227. 					alert(bj.firstChild.nodeValue);
  228. 				});
  229. 			};
  230. 		</script>
  231. 	</head>
  232. 	<body>
  233. 		<div id="total">
  234. 			<div class="inner">
  235. 				<p>
  236. 					你喜欢哪个城市?
  237. 				</p>
  238.  
  239. 				<ul id="city">
  240. 					<li id="bj">北京</li>
  241. 					<li>上海</li>
  242. 					<li>东京</li>
  243. 					<li>首尔</li>
  244. 				</ul>
  245.  
  246. 				<br>
  247. 				<br>
  248.  
  249. 				<p>
  250. 					你喜欢哪款单机游戏?
  251. 				</p>
  252.  
  253. 				<ul id="game">
  254. 					<li id="rl">红警</li>
  255. 					<li>实况</li>
  256. 					<li>极品飞车</li>
  257. 					<li>魔兽</li>
  258. 				</ul>
  259.  
  260. 				<br />
  261. 				<br />
  262.  
  263. 				<p>
  264. 					你手机的操作系统是?
  265. 				</p>
  266.  
  267. 				<ul id="phone">
  268. 					<li>IOS</li>
  269. 					<li id="android">Android</li>
  270. 					<li>Windows Phone</li>
  271. 				</ul>
  272. 			</div>
  273.  
  274. 			<div class="inner">
  275. 				gender:
  276. 				<input class="hello" type="radio" name="gender" value="male" />
  277. 				Male
  278. 				<input class="hello" type="radio" name="gender" value="female" />
  279. 				Female
  280. 				<br>
  281. 				<br>
  282. 				name:
  283. 				<input type="text" name="name" id="username" value="abcde" />
  284. 			</div>
  285. 		</div>
  286. 		<div id="btnList">
  287. 			<div><button id="btn01">查找#bj节点</button></div>
  288. 			<div><button id="btn02">查找所有li节点</button></div>
  289. 			<div><button id="btn03">查找name=gender的所有节点</button></div>
  290. 			<div><button id="btn04">查找#city下所有li节点</button></div>
  291. 			<div><button id="btn05">返回#city的所有子节点</button></div>
  292. 			<div><button id="btn06">返回#phone的第一个子节点</button></div>
  293. 			<div><button id="btn07">返回#bj的父节点</button></div>
  294. 			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
  295. 			<div><button id="btn09">返回#username的value属性值</button></div>
  296. 			<div><button id="btn10">设置#username的value属性值</button></div>
  297. 			<div><button id="btn11">返回#bj的文本值</button></div>
  298. 		</div>
  299. 	</body>
  300. </html>

P98 98.尚硅谷_JS基础_全选练习（一） 12:39

Checkbox 对象

checked 属性：设置或返回 checkbox 是否应被选中。

“全选按钮”的实现

P99 99.尚硅谷_JS基础_全选练习（二） 19:22

“全不选按钮、反选按钮、提交按钮”的实现

  

P100 100.尚硅谷_JS基础_全选练习（三）15:56

“全选/全不选按钮”状态同步的实现

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. 		<title>全选练习</title>
  6. 		<script type="text/javascript">
  7. 			window.onload = function() {
  8.  
  9. 				//获取四个多选框items
  10. 				var items = document.getElementsByName("items");
  11.  
  12. 				//获取全选/全不选的多选框
  13. 				var checkedAllBox = document.getElementById("checkedAllBox");
  14.  
  15.  
  16. 				/*
  17. 				 * 全选按钮
  18. 				 * 	- 点击按钮以后，四个多选框全都被选中
  19. 				 */
  20. 				//1.#checkedAllBtn
  21. 				//为id为checkedAllBtn的按钮绑定一个单击响应函数
  22. 				var checkedAllBtn = document.getElementById("checkedAllBtn");
  23. 				checkedAllBtn.onclick = function() {
  24. 					//遍历items
  25. 					for (var i = 0; i < items.length; i++) {
  26. 						//通过多选框的checked属性可以来获取或设置多选框的选中状态
  27. 						//alert(items[i].checked);
  28. 						items[i].checked = true; //设置四个多选框变成选中状态
  29. 					}
  30. 					checkedAllBox.checked = true; //将全选/全不选设置为选中
  31. 				};
  32.  
  33.  
  34. 				/*
  35. 				 * 全不选按钮
  36. 				 * 	- 点击按钮以后，四个多选框都变成没选中的状态
  37. 				 */
  38. 				//2.#checkedNoBtn
  39. 				//为id为checkedNoBtn的按钮绑定一个单击响应函数
  40. 				var checkedNoBtn = document.getElementById("checkedNoBtn");
  41. 				checkedNoBtn.onclick = function() {
  42. 					for (var i = 0; i < items.length; i++) {
  43. 						items[i].checked = false; //将四个多选框设置为没选中的状态
  44. 					}
  45. 					checkedAllBox.checked = false; //将全选/全不选设置为不选中
  46. 				};
  47.  
  48.  
  49. 				/*
  50. 				 * 反选按钮
  51. 				 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
  52. 				 */
  53. 				//3.#checkedRevBtn
  54. 				var checkedRevBtn = document.getElementById("checkedRevBtn");
  55. 				checkedRevBtn.onclick = function() {
  56. 					//将checkedAllBox设置为选中状态
  57. 					checkedAllBox.checked = true;
  58. 					for (var i = 0; i < items.length; i++) {
  59. 						//判断多选框状态
  60. 						/*if(items[i].checked){
  61. 							//证明多选框已选中，则设置为没选中状态
  62. 							items[i].checked = false;
  63. 						}else{
  64. 							//证明多选框没选中，则设置为选中状态
  65. 							items[i].checked = true;
  66. 						}*/
  67. 						items[i].checked = !items[i].checked;
  68. 						//判断四个多选框是否全选
  69. 						//只要有一个没选中则就不是全选
  70. 						if (!items[i].checked) {
  71. 							//一旦进入判断，则证明不是全选状态
  72. 							//将checkedAllBox设置为没选中状态
  73. 							checkedAllBox.checked = false;
  74. 						}
  75. 					}
  76. 					//在反选时也需要判断四个多选框是否全都选中
  77. 				};
  78.  
  79.  
  80. 				/*
  81. 				 * 提交按钮：
  82. 				 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
  83. 				 */
  84. 				//4.#sendBtn
  85. 				//为sendBtn绑定单击响应函数
  86. 				var sendBtn = document.getElementById("sendBtn");
  87. 				sendBtn.onclick = function() {
  88. 					//遍历items
  89. 					for (var i = 0; i < items.length; i++) {
  90. 						//判断多选框是否选中
  91. 						if (items[i].checked) {
  92. 							alert(items[i].value);
  93. 						}
  94. 					}
  95. 				};
  96.  
  97.  
  98. 				//5.#checkedAllBox
  99. 				/*
  100. 				 * 全选/全不选 多选框
  101. 				 * 	- 当它选中时，其余的也选中；当它取消时 其余的也取消
  102. 				 * 
  103. 				 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁
  104. 				 */
  105. 				//为checkedAllBox绑定单击响应函数
  106. 				checkedAllBox.onclick = function() {
  107. 					// alert(this === checkedAllBox); // true
  108. 					//设置多选框的选中状态
  109. 					for (var i = 0; i < items.length; i++) {
  110. 						items[i].checked = this.checked;
  111. 					}
  112. 				};
  113.  
  114.  
  115. 				//6.items
  116. 				/*
  117. 				 * 如果四个多选框全都选中，则checkedAllBox也应该选中
  118. 				 * 如果四个多选框没都选中，则checkedAllBox也不应该选中
  119. 				 */
  120. 				//为四个多选框分别绑定点击响应函数
  121. 				for (var i = 0; i < items.length; i++) {
  122. 					items[i].onclick = function() {
  123. 						//将checkedAllBox设置为选中状态
  124. 						checkedAllBox.checked = true;
  125. 						for (var j = 0; j < items.length; j++) {
  126. 							//判断四个多选框是否全选
  127. 							//只要有一个没选中则就不是全选
  128. 							if (!items[j].checked) {
  129. 								//一旦进入判断，则证明不是全选状态
  130. 								//将checkedAllBox设置为没选中状态
  131. 								checkedAllBox.checked = false;
  132. 								//一旦进入判断，则已经得出结果，不用再继续执行循环
  133. 								break;
  134. 							}
  135. 						}
  136. 					};
  137. 				}
  138.  
  139. 			};
  140. 		</script>
  141. 	</head>
  142. 	<body>
  143. 		<form method="post" action="">
  144. 			你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
  145. 			<br />
  146. 			<input type="checkbox" name="items" value="足球" />足球
  147. 			<input type="checkbox" name="items" value="篮球" />篮球
  148. 			<input type="checkbox" name="items" value="羽毛球" />羽毛球
  149. 			<input type="checkbox" name="items" value="乒乓球" />乒乓球
  150. 			<br />
  151. 			<input type="button" id="checkedAllBtn" value="全　选" />
  152. 			<input type="button" id="checkedNoBtn" value="全不选" />
  153. 			<input type="button" id="checkedRevBtn" value="反　选" />
  154. 			<input type="button" id="sendBtn" value="提　交" />
  155. 		</form>
  156. 	</body>
  157. </html>

P101 101.尚硅谷_JS基础_dom查询的剩余方法 21:42

document.getElementsByTagName("body")[0];   document.body;

document.documentElement;

document.all   document.getElementsByTagName("*")

getElementsByClassName()：根据元素的class属性值查询一组元素节点对象

根据元素的class属性值查询一组元素节点对象，getElementsByClassName()可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器。

document.querySelector()

document.querySelector()

  1. 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象。
  2. 虽然IE8中没有getElementsByClassName()，但是可以使用querySelector()代替。
  3. 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个。

document.querySelectorAll()

document.querySelectorAll()

  1. 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回。
  2. 即使符合条件的元素只有一个，它也会返回数组。

P102 102.尚硅谷_JS基础_dom增删改 33:15

DOM方法

DOM 增删改 案例

1、创建一个"广州"节点,添加到#city下

document.createElement()

  1. 可以用于创建一个元素节点对象，
  2. 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
  3. 并将创建好的对象作为返回值返回。

document.createTextNode()

  1. 可以用来创建一个文本节点对象，
  2. 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。

appendChild()

  1. 向一个父节点中添加一个新的子节点
  2. 用法：父节点.appendChild(子节点);

2、将"广州"节点插入到#bj前面

insertBefore()

  1. 可以在指定的子节点前插入新的子节点
  2. 语法：父节点.insertBefore(新节点,旧节点);

3、使用"广州"节点替换#bj节点

replaceChild()

  1. 可以使用指定的子节点替换已有的子节点
  2. 语法：父节点.replaceChild(新节点,旧节点);

4、删除#bj节点

removeChild()

  1. 可以删除一个子节点
  2. 语法：父节点.removeChild(子节点);
  3. 子节点.parentNode.removeChild(子节点); // 更方便

5、读取#city内的HTML代码

6、设置#bj内的HTML代码

7、创建一个"广州"节点，添加到#city下

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. 		<title>Untitled Document</title>
  6. 		<!-- <link rel="stylesheet" type="text/css" href="style/css.css" /> -->
  7. 		<style type="text/css">
  8. 			@CHARSET "UTF-8";
  9. 			body {
  10. 				width: 800px;
  11. 				margin-left: auto;
  12. 				margin-right: auto;
  13. 			}
  14. 			button {
  15. 				width: 300px;
  16. 				margin-bottom: 10px;
  17. 				text-align: left;
  18. 			}
  19. 			#btnList {
  20. 				float: left;
  21. 			}
  22. 			#total {
  23. 				width: 450px;
  24. 				float: left;
  25. 			}
  26. 			ul {
  27. 				list-style-type: none;
  28. 				margin: 0px;
  29. 				padding: 0px;
  30. 			}
  31. 			.inner li {
  32. 				border-style: solid;
  33. 				border-width: 1px;
  34. 				padding: 5px;
  35. 				margin: 5px;
  36. 				background-color: #99ff99;
  37. 				float: left;
  38. 			}
  39. 			.inner {
  40. 				width: 400px;
  41. 				border-style: solid;
  42. 				border-width: 1px;
  43. 				margin-bottom: 10px;
  44. 				padding: 10px;
  45. 				float: left;
  46. 			}
  47. 		</style>
  48. 		<script type="text/javascript">
  49. 			window.onload = function() {
  50.  
  51. 				//1、创建一个"广州"节点,添加到#city下
  52. 				myClick("btn01", function() {
  53. 					//创建广州节点 <li>广州</li>
  54. 					//创建li元素节点
  55. 					var li = document.createElement("li");
  56. 					//创建广州文本节点
  57. 					var gzText = document.createTextNode("广州");
  58. 					//将gzText设置li的子节点
  59. 					li.appendChild(gzText);
  60. 					//获取id为city的节点
  61. 					var city = document.getElementById("city");
  62. 					//将广州添加到city下
  63. 					city.appendChild(li);
  64. 				});
  65.  
  66. 				//2、将"广州"节点插入到#bj前面
  67. 				myClick("btn02", function() {
  68. 					//创建一个广州
  69. 					var li = document.createElement("li");
  70. 					var gzText = document.createTextNode("广州");
  71. 					li.appendChild(gzText);
  72. 					//获取id为bj的节点
  73. 					var bj = document.getElementById("bj");
  74. 					//获取city
  75. 					var city = document.getElementById("city");
  76. 					//父节点.insertBefore(新节点, 旧节点);
  77. 					city.insertBefore(li, bj);
  78. 				});
  79.  
  80. 				//3、使用"广州"节点替换#bj节点
  81. 				myClick("btn03", function() {
  82. 					//创建一个广州
  83. 					var li = document.createElement("li");
  84. 					var gzText = document.createTextNode("广州");
  85. 					li.appendChild(gzText);
  86. 					//获取id为bj的节点
  87. 					var bj = document.getElementById("bj");
  88. 					//获取city
  89. 					var city = document.getElementById("city");
  90. 					//父节点.replaceChild(新节点, 旧节点);
  91. 					city.replaceChild(li, bj)
  92. 				});
  93.  
  94. 				//4、删除#bj节点
  95. 				myClick("btn04", function() {
  96. 					//获取id为bj的节点
  97. 					var bj = document.getElementById("bj");
  98. 					//获取city
  99. 					var city = document.getElementById("city");
  100. 					city.removeChild(bj);
  101. 					//子节点.parentNode.removeChild(子节点);
  102. 					// bj.parentNode.removeChild(bj);
  103. 				});
  104.  
  105. 				//5、读取#city内的HTML代码
  106. 				myClick("btn05", function() {
  107. 					//获取city
  108. 					var city = document.getElementById("city");
  109. 					alert(city.innerHTML);
  110. 				});
  111.  
  112. 				//6、设置#bj内的HTML代码
  113. 				myClick("btn06", function() {
  114. 					//获取bj
  115. 					var bj = document.getElementById("bj");
  116. 					bj.innerHTML = "昌平";
  117. 				});
  118.  
  119. 				//7、创建一个"广州"节点,添加到#city下
  120. 				myClick("btn07", function() {
  121. 					//向city中添加广州
  122. 					var city = document.getElementById("city");
  123. 					/*
  124. 					 * 使用innerHTML也可以完成DOM的增删改的相关操作
  125. 					 * 一般我们会两种方式结合使用
  126. 					 */
  127. 					// city.innerHTML += "<li>广州</li>";
  128. 					//创建一个li
  129. 					var li = document.createElement("li");
  130. 					//向li中设置文本
  131. 					li.innerHTML = "广州";
  132. 					//将li添加到city中
  133. 					city.appendChild(li);
  134. 				});
  135.  
  136. 			};
  137.  
  138. 			function myClick(idStr, fun) {
  139. 				var btn = document.getElementById(idStr);
  140. 				btn.onclick = fun;
  141. 			}
  142. 		</script>
  143. 	</head>
  144. 	<body>
  145. 		<div id="total">
  146. 			<div class="inner">
  147. 				<p>你喜欢哪个城市?</p>
  148. 				<ul id="city">
  149. 					<li id="bj">北京</li>
  150. 					<li>上海</li>
  151. 					<li>东京</li>
  152. 					<li>首尔</li>
  153. 				</ul>
  154. 			</div>
  155. 		</div>
  156. 		<div id="btnList">
  157. 			<div><button id="btn01">1、创建一个"广州"节点,添加到#city下</button></div>
  158. 			<div><button id="btn02">2、将"广州"节点插入到#bj前面</button></div>
  159. 			<div><button id="btn03">3、使用"广州"节点替换#bj节点</button></div>
  160. 			<div><button id="btn04">4、删除#bj节点</button></div>
  161. 			<div><button id="btn05">5、读取#city内的HTML代码</button></div>
  162. 			<div><button id="btn06">6、设置#bj内的HTML代码</button></div>
  163. 			<div><button id="btn07">7、创建一个"广州"节点,添加到#city下</button></div>
  164. 		</div>
  165. 	</body>
  166. </html>

P103 103.尚硅谷_JS基础_添加删除记录-删除 21:46

取消超链接的默认跳转行为

两种方式都可以！

window 对象方法

删除dom元素

  

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. 		<title>添加删除记录练习</title>
  6. 		<!-- <link rel="stylesheet" type="text/css" href="ex_2_style/css.css" /> -->
  7. 		<style type="text/css">
  8. 			@CHARSET "UTF-8";
  9. 			#total {
  10. 				width: 450px;
  11. 				margin-left: auto;
  12. 				margin-right: auto;
  13. 			}
  14. 			ul {
  15. 				list-style-type: none;
  16. 			}
  17. 			li {
  18. 				border-style: solid;
  19. 				border-width: 1px;
  20. 				padding: 5px;
  21. 				margin: 5px;
  22. 				background-color: #99ff99;
  23. 				float: left;
  24. 			}
  25. 			.inner {
  26. 				width: 400px;
  27. 				border-style: solid;
  28. 				border-width: 1px;
  29. 				margin: 10px;
  30. 				padding: 10px;
  31. 				float: left;
  32. 			}
  33. 			#employeeTable {
  34. 				border-spacing: 1px;
  35. 				background-color: black;
  36. 				margin: 80px auto 10px auto;
  37. 			}
  38. 			th, td {
  39. 				background-color: white;
  40. 			}
  41. 			#formDiv {
  42. 				width: 250px;
  43. 				border-style: solid;
  44. 				border-width: 1px;
  45. 				margin: 50px auto 10px auto;
  46. 				padding: 10px;
  47. 			}
  48. 			#formDiv input {
  49. 				width: 100%;
  50. 			}
  51. 			.word {
  52. 				width: 40px;
  53. 			}
  54. 			.inp {
  55. 				width: 200px;
  56. 			}
  57. 		</style>
  58. 		<script type="text/javascript">
  59. 			window.onload = function() { // 点击超链接以后，删除一个员工的信息
  60. 				//获取所有的超链接
  61. 				var allA = document.getElementsByTagName("a");
  62. 				//为每个超链接都绑定一个单击响应函数
  63. 				for (var i = 0; i < allA.length; i++) {
  64. 					allA[i].onclick = function() {
  65. 						//点击超链接以后需要删除超链接所在的那行
  66. 						//这里我们点击哪个超链接this就是谁
  67. 						//获取当前tr
  68. 						var tr = this.parentNode.parentNode;
  69. 						//获取要删除的员工的名字
  70. 						//var name = tr.getElementsByTagName("td")[0].innerHTML;
  71. 						var name = tr.children[0].innerHTML;
  72. 						//删除之前弹出一个提示框
  73. 						/*
  74. 						 * confirm()用于弹出一个带有确认和取消按钮的提示框
  75. 						 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
  76. 						 * 如果用户点击确认则会返回true，如果点击取消则返回false
  77. 						 */
  78. 						var flag = confirm("确认删除" + name + "吗?");
  79. 						//如果用户点击确认
  80. 						if (flag) {
  81. 							//删除tr
  82. 							tr.parentNode.removeChild(tr);
  83. 						}
  84. 						/*
  85. 						 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
  86. 						 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
  87. 						 */
  88. 						return false;
  89. 					};
  90. 				}
  91. 			};
  92. 		</script>
  93. 	</head>
  94. 	<body>
  95. 		<table id="employeeTable">
  96. 			<tr>
  97. 				<th>Name</th>
  98. 				<th>Email</th>
  99. 				<th>Salary</th>
  100. 				<th>&nbsp;</th>
  101. 			</tr>
  102. 			<tr>
  103. 				<td>Tom</td>
  104. 				<td>tom@tom.com</td>
  105. 				<td>5000</td>
  106. 				<td><a href="javascript:;">Delete</a></td>
  107. 			</tr>
  108. 			<tr>
  109. 				<td>Jerry</td>
  110. 				<td>jerry@sohu.com</td>
  111. 				<td>8000</td>
  112. 				<td><a href="deleteEmp?id=002">Delete</a></td>
  113. 			</tr>
  114. 			<tr>
  115. 				<td>Bob</td>
  116. 				<td>bob@tom.com</td>
  117. 				<td>10000</td>
  118. 				<td><a href="deleteEmp?id=003">Delete</a></td>
  119. 			</tr>
  120. 		</table>
  121. 		<div id="formDiv">
  122. 			<h4>添加新员工</h4>
  123. 			<table>
  124. 				<tr>
  125. 					<td class="word">name: </td>
  126. 					<td class="inp">
  127. 						<input type="text" name="empName" id="empName" />
  128. 					</td>
  129. 				</tr>
  130. 				<tr>
  131. 					<td class="word">email: </td>
  132. 					<td class="inp">
  133. 						<input type="text" name="email" id="email" />
  134. 					</td>
  135. 				</tr>
  136. 				<tr>
  137. 					<td class="word">salary: </td>
  138. 					<td class="inp">
  139. 						<input type="text" name="salary" id="salary" />
  140. 					</td>
  141. 				</tr>
  142. 				<tr>
  143. 					<td colspan="2" align="center">
  144. 						<button id="addEmpButton" value="abc">
  145. 							Submit
  146. 						</button>
  147. 					</td>
  148. 				</tr>
  149. 			</table>
  150. 		</div>
  151. 	</body>
  152. </html>

2021年1月22日，5：14就醒了，5：55起床~

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/113245
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号