• dom——操作文档树及其案例

    创建元素:这个元素是不会渲染到页面上的,它不在DOM中

    var box2=document.createElement("div")//传入的字符串  是标签的名字

    也就是说这一行代码写出来，到现在为止，他只是创建了这样一个标签，还并没有在文档树中添加

    添加类名与移除类名

    添加类名

    box2.className="box2"

    box2.classList.add("box2")(这种方法只能一次写一个参数，但可以写几次)

    也可以是一次写两个类名

    box2.className="box2 box3"

    删除类名

    box2.classList.remove("box2")

    操作文档树——添加

    box.appendChild(box2)

    添加到文档树中,x.appendChild(y)  把y节点对象添加到x节点中

     box2.innerHTML="6666"//666会把box2内部的所有元素全部覆盖

    克隆

     var box2=box.cloneNode()//连同box的后代元素和所有的事件 一起克隆

    案例1：

    1. <div id="mainbox">
    2. 			
    3. 		div>
    4. 		<script>
    5. 			var mysina={
    6. 				a:20,
    7. 				b:"20条新浪微博",
    8. 				arr:[
    9. 					{
    10. 						id:12345,
    11. 						text:"微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1微博内容1",
    12. 						comments_count:20,
    13. 						att_count:80,
    14. 						report:13,
    15. 						imgs:["./src/2.jpg","./src/3.jpg","./src/4.jpg"]
    16. 					},
    17. 					{
    18. 						id:12346,
    19. 						text:"山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅山东高法第三帝国电饭锅",
    20. 						comments_count:250,
    21. 						att_count:820,
    22. 						report:1323,
    23. 						imgs:["./src/5.jpg","./src/6.jpg","./src/7.jpg","./src/8.jpg","./src/9.jpg","./src/10.jpg"]
    24. 					}
    25. 				]
    26. 			}
    27. 			
    28. 			
    29. 			console.log(mysina)
    30. 			//1.创建一个放新闻的大盒子,把它添加到mainbox中
    31. 			for(var i=0;iarr.length;i++){
    32. 			var box1=document.createElement("div")
    33. 			mainbox.appendChild(box1)
    34. 			// 添加类名
    35. 			box1.className="box1"
    36. 			
    37. 			
    38. 			//2.创建一个放标题的盒子 添加到新闻大盒子
    39. 			var title=document.createElement("div")
    40. 			box1.appendChild(title)
    41. 			
    42. 			// 添加文本innerHTML,是mysina中的数据
    43. 			title.innerHTML=mysina.arr[i].text
    44. 			
    45. 			//添加类名,让它排版排在新闻大盒子的上面
    46. 			title.classList.add("title")
    47. 			
    48. 			
    49. 			
    50. 			//3.创建一个放图片的盒子box2 添加到新闻大盒子			
    51. 			//添加类名,让它排版排在新闻大盒子的中间,写弹性布局让它内部的图片排版整齐
    52. 			var imgbox=document.createElement("div")
    53. 			imgbox.className="imgbox"
    54. 			box1.appendChild(imgbox)
    55. 			
    56. 			
    57. 			//4.
    58. 			//根据图片数据的个数创建对应个数的图片标签 
    59. 			// 把图片全部添加到box2中
    60. 			//给图片加类名
    61. 			// 给图片加src
    62. 			
    63. 			mysina.arr[i].imgs.forEach((el)=>{
    64. 				var img1=document.createElement("img")
    65. 				img1.classList.add("img1")
    66. 				img1.src=el
    67. 				imgbox.appendChild(img1)
    68. 			})
    69. 			
    70. 			}
    71. 			//5.底部条
    72. 			
    73. 			
    74. 		script>

    因为在现实操作中，每天的数据都是不同的，数据是流动的，往往只靠html写一个静态的页面是不行的，所以，我们要从后端获取到数据，然后根据这个数据去渲染当前的页面。

    案例2：模糊弹窗

    1. 	document.querySelector("#loginbtn1").onclick=function() {
    2. 		console.log(66666)
    3. 		//创建半透明的蒙版层
    4. 		var modelbox=document.createElement("div")
    5. 		modelbox.classList.add("modelbox")
    6. 		document.body.appendChild(modelbox)
    7. 		
    8. 		
    9. 		var loginbox=document.createElement("div")
    10. 		loginbox.classList.add("loginbox")
    11. 		modelbox.appendChild(loginbox)
    12. 	}

    在一般网页中我们都与遇到模糊弹窗例如点击登录/注册页面的时候。怎么实现呢

    首先，我们直接创建一个div标签设置他的样式，将他铺满整个屏幕，因为是铺满整个屏幕所以直接添加再body里面，然后再创建一个div标签设置登录窗口，添加到之前我们添加的大div标签中，作为他的登录/注册框。通过固定定位来固定他的位置。

    效果如下

     

     案例3：信息录入系统

    1. 		<style>
    2. 			body {
    3. 				font-family: "楷体";
    4. 			}
    5.  
    6. 			.wrapper {
    7. 				width: 300px;
    8. 				margin: 0 auto;
    9. 				/* background-color: red; */
    10. 				text-align: center;
    11. 				color: blue;
    12. 			}
    13.  
    14. 			.wrapper>div {
    15. 				margin-top: 10px;
    16. 			}
    17.  
    18. 			.info {
    19. 				width: 100px;
    20. 				outline: none;
    21. 				border-radius: 5px;
    22. 				border: 1px solid #ccc;
    23. 				text-indent: 5px;
    24. 			}
    25.  
    26. 			.btn {
    27. 				width: 50px;
    28. 				height: 25px;
    29. 				border-radius: 5px;
    30. 				border: 1px solid #ccc;
    31. 				background-color: skyblue;
    32. 				color: #000;
    33. 				outline: none;
    34. 			}
    35.  
    36. 			table {
    37. 				width: 600px;
    38. 				margin-top: 50px;
    39. 				margin-left: -150px;
    40. 				border: 1px solid #ccc;
    41. 			}
    42.  
    43. 			td {
    44. 				width: 20%;
    45. 			}
    46.  
    47. 			th {
    48. 				background-color: blue;
    49. 				color: #fff;
    50. 			}
    51. 			td input{
    52. 				width: 100px;
    53. 			}
    54. 		style>
    55. 	head>
    56.  
    57. 	<body>
    58. 		<div class="wrapper">
    59. 			<div>学号：<input class="info" type="text" value="1">div>
    60. 			<div>姓名：<input class="info" type="text" value="1">div>
    61. 			<div>年龄：<input class="info" type="text" value="1">div>
    62. 			<div>爱好：<input class="info" type="text" value="1">div>
    63. 			<div>地址：<input class="info" type="text" value="1">div>
    64. 			<div>
    65. 				<input type="submit" class="btn" value="添加">
    66. 				<input type="reset" class="btn" value="重置">
    67. 			div>
    68.  
    69. 			<table>
    70. 				<tr>
    71. 					<th>学号th>
    72. 					<th>姓名th>
    73. 					<th>年龄th>
    74. 					<th>爱好th>
    75. 					<th>癖好th>
    76. 					<th>操作th>
    77. 				tr>
    78. 			table>
    79.  
    80.  
    81. 		div>
    82.  
    83. 		<script>
    84. 			var btns = document.querySelectorAll(".btn")
    85. 			//重置
    86. 			btns[1].onclick = function() {
    87. 				var infos = document.querySelectorAll(".info")
    88. 				infos.forEach((el) => {
    89. 					//el是每一个.info的输入框
    90. 					el.value = ""
    91. 				})
    92. 			//btn取到了两个按钮，这设置的是重置按钮，给重置按钮绑定点击事件，通过类选择器获取到所有的输入框，通过foreach循环把所有输入框的值改为空字符串
    93. 			}
    94. 			btns[0].onclick = function() {
    95. 				//创建tr元素 添加到table中
    96. 				var wrappertab = document.querySelector(".wrapper table")
    97. 				var tr = document.createElement("tr")
    98. 				wrappertab.appendChild(tr)
    99. 				var infos = document.querySelectorAll(".info")
    100. 				infos.forEach((el) => {
    101. 					var td = document.createElement("td")
    102. 					td.innerHTML = el.value
    103. 					tr.appendChild(td)
    104. 				})
    105. 				//通过类选择器获取到所有的输入框，通过foreach循环把所有输入框的值在td.innerHTML方法添加到页面上，在把td标签添加到tr上
    106. 				var tdlast = document.createElement("td")
    107. 				tr.appendChild(tdlast)
    108. 				// tdlast.innerHTML="666"
    109. 				var delbtn = document.createElement("button")
    110. 				delbtn.innerHTML = '删除'
    111. 				delbtn.classList.add("btn")
    112. 				tdlast.appendChild(delbtn)
    113. 				delbtn.onclick = function() {
    114. 					// console.log(this)
    115. 					this.parentNode.parentNode.remove()
    116. 				}
    117. 				//设置表单的最后一项，把他们分成两个按钮分别是修改和删除
    118. 				var setbtn = document.createElement("button")
    119. 				setbtn.innerHTML = '修改'
    120. 				setbtn.classList.add("btn")
    121. 				tdlast.appendChild(setbtn)
    122. 				let flag = true
    123. 				setbtn.onclick = function() {
    124. 					// console.log(this,111111)
    125. 					// 开关思想 当点击第一下是修改后 ，操作修改键变成保存键
    126. 					flag = !flag
    127. 					if (flag) {
    128. 						console.log("开")
    129. 						this.innerHTML = "修改"
    130. 						
    131. 						//把当前这一排的 td内部的输入框的数据 value 获取了设置到td中 
    132. 						 let tds=this.parentNode.parentNode.children
    133. 						 Array.from(tds).forEach((el,index)=>{
    134. 							 if(index==tds.length-1){return}
    135. 							 el.innerHTML=el.children[0].value
    136. 						 })
    137. 					} else {
    138. 						console.log("关")
    139. 						this.innerHTML = "保存"
    140. 						//把当前这一排的 td的innerHTML 替换成input
    141. 						let tds = this.parentNode.parentNode.children
    142. 						Array.from(tds).forEach((el, index) => {
    143. 							if (index != tds.length-1) {
    144. 								var text = el.innerHTML
    145. 								el.innerHTML = ""
    146. 								var input1 = document.createElement("input")
    147. 								input1.value = text
    148. 								el.appendChild(input1)
    149. 							}
    150. 						})
    151. 					}
    152.  
    153. 				}
    154. 			}
    155. 		script>
    156. 	body>

    最后我们再讲一个比较简单的插入元素的方法 

    box.insertBefore(要插入的元素,要插入的位置)

    但是没有insertAfter这个函数这个函数只能由用户自己在写在原型链上使用

  • 相关阅读:
    自己动手从零写桌面操作系统GrapeOS系列教程——8.x86介绍
    任务管理专家飞项告诉你：日流水30万与300万的电商人差距到底在哪
    【AI作画】使用stable-diffusion-webui搭建AI作画平台
    飞利浦Fidelio B97全景声家庭影院，让你在家享受“暑期档”
    linux 压缩包解压
    Go字符串、Unicode rune、byte字节相互转换
    二、注册功能
    基于Java毕业设计在线课堂辅助系统源码+系统+mysql+lw文档+部署软件
    【赠书活动】AI时代项目经理必备技能
    原型工具墨刀的使用
  • 原文地址：https://blog.csdn.net/weixin_53596260/article/details/125884177