关于DOM操作-增删改查的练习

最新推荐文章于 2024-04-10 11:10:46 发布

weixiwo

最新推荐文章于 2024-04-10 11:10:46 发布

阅读量706

点赞数 3

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/weixiwo/article/details/106028457

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

时隔两个多月，终于学到了DOM操作，下面是个人做的一个练习，适合新手小白
在网页中，html标签，属性，文本，注释，整个文档都是节点
而document文档节点，代表整个网页document,可以获取任意对象
首先我们要了解dom，是如何获取元素节点的
1.getElementById()通过id获取节点
html代码

<button type="button" id="btn">我是一个按钮</button>

js代码

var btn=document.getElementById('btn');
	//修改按钮里的文字
			btn.innerHTML="I am btn";

2.getElementsByName()通过name获取节点（用法类似）通过name获取一组元素对象

3.getElementsByTagName()通过标签名获取一组元素节点对象,会返回类数组对象，所有查找的都以封转的数组封装（即使是一个元素也会封转在数组里面）

4.getElementsByClassName()这个是根据class属性获取元素节点，也会返回到数组里

5.document.querySelector()查询选择器很强大（可以根据一个css的选择器字符串作为参数，可以根据css选择器查询一个元素节点对象）
但是该方法只会返回一个符合条件的元素，如果满足条件的有多个，只会返回第一个
所以提供了querySelectorAll（）会把符合条件的返回成类数组，即使只有一个元素也会封转在数组里

6这是基本的获取元素操作，还有获取后代元素，父元素,兄弟元素的方法就不赘述了
然后了解dom如何创建节点
1.document.createElement()创建元素节点

var li=document.createElement("li");

创建好了之后会把创建好的节点放到其他节点中
1.appendChild()添加子节点,也就是说创建的节点会成为其他节点的子节点

然后就是删除子节点

removeChild()删除子节点

下面就直接看代码
HTML代码

<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="style.css">
	</head>

	<body>
		<div id="content">

			<table id="employeeTable" border="1px solid black" style=" border-collapse: collapse">
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Salary</th>
					<th>操作 </th>
					<th>操作</th>
				</tr>
				<tr>
					<td><input value="Tom" name="inform"></input></td>
					<td><input value="tom.com" name="inform"></input></td>
					<td><input value="5000" name="inform"></input></td>
					<td><a href="#" class="del">删除</a></td>
					<td><a href="#"  class="edit">编辑</a></td>
				</tr>
				<tr>
					<td><input value="Jerry" name="inform"></input></td>
					<td><input value="Jerry.com" name="inform"></input></td>
					<td><input value="8000" name="inform"></input></td>
					<td><a href="#" class="del">删除</a></td>
					<td><a href="#" class="edit">编辑</a></td>
				</tr>
				<tr>
					<td><input value="lina" name="inform"></input></td>
					<td><input value="lina.com" name="inform"></input></td>
					<td><input value="9000" name="inform"></input></td>
					<td><a href="#" class="del">删除</a></td>
					<td><a href="#"  class="edit">编辑</a></td>
				</tr>
			</table>


			<div id="formDiv">
				<h4>添加员工</h4>
				<table border="1px solid black" style=" border-collapse: collapse">
					<tr>
						<td class="word">name:</td>
						<td class="inp">
							<input type="text" name="empName" id="empName">
						</td>
					</tr>
					<tr>
						<td class="word">email</td>
						<td class="inp">
							<input type="text" name="empName" id="email">
						</td>
					</tr>
					<tr>
						<td class="word">salary</td>
						<td class="inp">
							<input type="text" name="empName" id="salary">
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<button id="addEmpButton" value="abc">
								提交
							</button>
						</td>
					</tr>
				</table>
			</div>
		</div>
</body>
<script src="index.js"></script>
</html>

对应的图
在这里插入图片描述
css代码

td {
    padding: 0px;
    height: 30px;
}

input {
    margin: 0;
    height: 36px;
    width: 120px;
}

#content {
    width: 600px;
    height: auto;
    margin: 0 auto;
}
.del{
    color: red;
    text-decoration: none;
}
.edit{
    color: blue;
    text-decoration: none;
}
.confirm{
    color: blueviolet;
    text-decoration: none;
}

还有下面的js代码，但是代码还是要多敲
在这里插入图片描述

这是写个小白的，大神请自行飘过。另外本人刚学js不久，可能在技术还不精通，以上js代码，可能封装性还不太好，此文中只封账了两个函数，一个是删除操作，另外一个是编辑操作。希望大家可以给我多指教，加油

weixiwo

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于DOM操作-增删改查的练习

时隔两个多月，终于学到了DOM操作，下面是个人做的一个练习，适合新手小白在网页中，html标签，属性，文本，注释，整个文档都是节点而document文档节点，代表整个网页document,可以获取任意对象首先我们要了解dom，是如何获取元素节点的1.getElementById()通过id获取节点html代码<button type="button" id="btn">我是一个按钮</button>js代码var btn=document.getElementByI
复制链接

扫一扫

专栏目录