document获取-元素的和创建元素

菜汪在路上

已于 2022-07-23 17:51:25 修改

阅读量674

点赞数

分类专栏： js 文章标签： servlet javascript 前端

于 2022-07-23 12:02:04 首次发布

本文链接：https://blog.csdn.net/qx020814/article/details/125945813

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

通过id获取：

        <p id="biao1">你好世界</p>
		<p>演示<b>document获取数据</b></p>
		<script>
			var x = document.getElementById("biao1");
			document.write("<p>" + x.innerHTML + "</p>")
		</script>

获取一个对象，里面有这个对象的属性；每个标签属性不同，可以去了解一些：HTML DOM Checkbox 对象 | 菜鸟教程 (runoob.com)

通过name获取：（实现一个全选框）

<script>
			function quanChange() {
				var cb0 = document.getElementById("fuXuan");
				var cb1 = document.getElementsByName("xuan1");
				for (var i = 0; i < cb1.length; i++) {
					cb1[i].checked = cb0.checked;
				}
			}
		
			function danChange() {
				var cb1 = document.getElementsByName("xuan1");
				var cb0 = document.getElementById("fuXuan");
				var xuan = 0;
				for (var i = 0; i < cb1.length; i++) {
					if (cb1[i].checked) {
						xuan++;
					}
				}
				if (xuan == cb1.length) {
					cb0.checked = cb1[0].checked;
				} else {
					cb0.checked = false;
				}
			}
		</script>
		<table border="1">
			<tr>
				<td><input type="checkbox" id="fuXuan" onchange="quanChange()" />全选</td>
				<td>厂家</td>
				<td>价格</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="xuan1" onchange="danChange()" />
				</td>
				<td>小米手机</td>
				<td>1299</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="xuan1" onchange="danChange()" />
				</td>
				<td>华为</td>
				<td>1699</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="xuan1" onchange="danChange()" />
				</td>
				<td>oppo</td>
				<td>1499</td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="xuan1" onchange="danChange()" />
				</td>
				<td>vivo</td>
				<td>1466</td>
			</tr>
		</table>

点击全选将所有复选框设置为true，再次点击设置为false

普通单击复选框时，所有复选框被选中，全选框也要被选中，

其中一个复选框未被选中，全选框不能被选中，记录选中的个数就好了

利用标签名字获取：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			li {
				list-style: none;
				font-size: 40px;

			}

			ul li {
				float: left;
				margin-left: 4px;
				background-color: aqua;
			}

			ul {
				margin-left: 30px;
			}

			a {
				text-decoration: none;
				color: blue;
				width: 6.4375rem;
				height: 2.0625rem;
				display: block;

			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">活动</a></li>
			<li><a href="#">折扣</a></li>
			<li><a href="#">厂家</a></li>
		</ul>
		<script>
			var list = document.getElementsByTagName("li");
			for (var i = 0; i < list.length; i++) {
				list[i].onmouseover = function() {
					this.style.background = "red";
				}
				list[i].onmouseout = function() {
					this.style.background = "aqua";
				}
			}
		</script>
	</body>
</html>

获取到所有标签名为“li”，附上鼠标悬浮和鼠标离开的方法，悬浮变颜色，离开变回原来的样式

利用class获取:

<ul  style="list-style: none;">
			<li class="a">
				<p>啦啦啦啦啦</p>
			</li>
			<li>
				<p>啦啦啦啦啦</p>
			</li>
			<li class="a">
				<p>啦啦啦啦啦</p>
			</li>
			<li>
				<p>啦啦啦啦啦</p>
			</li>
			<li class="a">
				<p>啦啦啦啦啦</p>
			</li>
			<li>
				<p>啦啦啦啦啦</p>
			</li>
			<li class="a">
				<p>啦啦啦啦啦</p>
			</li>
		</ul>
		<script>
			var list = document.getElementsByClassName("a");
			for (var i=0;i<list.length;i++) {
				list[i].style.background="red";
			}
		</script>

和id一模一样，不多做结束

创建元素：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="添加" onclick="addSelect()" />
		<input type="button" value="删除" onclick="delSelect()" />
		<script>
			var f = false;
			var sel = document.createElement("select");

			var opt1 = document.createElement("option");
			opt1.value = "blue";
			opt1.innerHTML = "蓝色";
			sel.appendChild(opt1);

			var opt2 = document.createElement("option");
			opt2.value = "red";
			opt2.innerHTML = "红色";
			sel.appendChild(opt2);

			var opt3 = document.createElement("option");
			opt3.value = "pink";
			opt3.innerHTML = "粉色";
			sel.appendChild(opt3);

			function addSelect() {
				sel.onchange = function() {
					document.body.style.background = this.value;
				}
				document.body.appendChild(sel);
				f = true;
			}

			function delSelect() {
				if (f) {
					document.body.removeChild(sel);
					f = false;
				}
			}
		</script>
	</body>
</html>

值得注意的时：

document.body.style.background = this.value;

菜汪在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document获取-元素的和创建元素

获取到所有标签名为“li”，附上鼠标悬浮和鼠标离开的方法，悬浮变颜色，离开变回原来的样式。获取一个对象，里面有这个对象的属性；点击全选将所有复选框设置为true，再次点击设置为false。其中一个复选框未被选中，全选框不能被选中，记录选中的个数就好了。普通单击复选框时，所有复选框被选中，全选框也要被选中，和id一模一样，不多做结束。......
复制链接

扫一扫

专栏目录