JavaScript基础知识《二》《DOM》

最新推荐文章于 2024-06-13 10:05:02 发布

猿知了

最新推荐文章于 2024-06-13 10:05:02 发布

阅读量64

点赞数

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

本文链接：https://blog.csdn.net/qq_43702977/article/details/112756863

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

JavaSciript

1 篇文章 0 订阅

订阅专栏

DOM

DOM编程的基本概念

Document Object Model 文档对象模型，用于操作网页中元素

DOM编程的作用

每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树，我们通过编写JS代码就可以访问这棵树上任何一个节点，并且对节点进行操作。通过 DOM模型，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。新创建的元素对象，要挂到DOM树上才可以在网页上显示出来。

dom树

在这里插入图片描述

查找节点的方法

1. ```
document.querySelector("选择器") 
```
  根据选择器查询元素，返回一个元素
2. ```
document.querySelectorAll("选择器")
```
  根据选择器查询所有元素，返回一个数组

三个具事例学习DOM

示例一（全选，反选，结算）

1. 知识点：复选框如果要选中，设置checked=true，取消设置checked=false。
2. 全选：通过name属性得到上面所有的复选框对象，遍历集合，将每一个元素的checked设置为 true。
3. 全不选：将所有元素的checked属性设置为false。
4. 反选：原来选中的设置false，原来没选的设置为true。
5. 结账：将所有选中的元素的value转成数字，再累加，将累加的结果显示在后面的span中。

方法	作用
`document.createElement()`	创建元素节点
`document.createTextNode()`	创建文本节点
元素对象.`appendChild()`	向节点的子节点列表末尾添加新的子节点
元素对象.`removeChild()`	删除子节点
元素对象.`hasChildNodes()`	返回元素是否拥有子节点

<body>

		<input type="checkbox" name="item" value="120"/>a
		<input type="checkbox" name="item" value="998"/>b
		<input type="checkbox" name="item" value="9.9"/>c
		<input type="checkbox" name="item" value="10.2"/>d
		<input type="checkbox" name="item" value="666"/>e
		<hr />
		<input type="checkbox" id="all" onclick="checkAll()"/>全选/全不选
		<button type="button" onclick="reverse()">反选</button>
		<button type="button" onclick="sum()">结算</button>
		<p>总计： <span id="price">0</span>元</p>
		<script>
			// 数组
			var items = document.querySelectorAll("[name=item]");
			// 全选/全不选 按钮 点击事件
			function checkAll(){
		    // 全选框
			var all = document.querySelector("#all");
			// 迭代每一个元素
			for(var i = 0; i< items.length; i++){
			// 当前循环被迭代的元素
			var cur = items[i];
			cur.checked = all.checked;
				}
			}
			function reverse(){
				// 迭代每一个元素
				for(var i = 0; i< items.length; i++){
				// 当前循环被迭代的元素
				var cur = items[i];
				// 设置 checked 属性值为其 当前值的取反
				cur.checked = !cur.checked;

				// if(cur.checked){
				// 	cur.checed = false;
				// }else{
				// 	cur.checed = true;
				// }

				}
			}
			function sum(){
				var sum = 0;
				// 迭代每一个元素
				for(var i = 0; i< items.length; i++){
				// 当前循环被迭代的元素
				var cur = items[i];
				// 如果被选中
				if(cur.checked){
				// sum = sum + parseFloat(cur.value);
				sum += parseFloat(cur.value);
					}
				}
				document.querySelector("#price").innerText = sum;
			}
		</script>
	</body>

示例二（点击图案消失）

<body>
		<script type="text/javascript">
			// 获取 html 元素
			var html = document.querySelector("html");
			// 给 html 添加监听事件
			html.addEventListener("click", heart, false);
			function heart(e){
				// 定义字体大小
				var fontSize = 16;
				// 鼠标的位置 e.clientX e.clientY 
				// 根据鼠标位置 计算 元素出现的位置
				var left = e.clientX - fontSize / 2;
				var top = e.clientY - fontSize / 2;
				// 创建一个 b 元素
				var b = document.createElement("b");
				// b 元素的内容
				b.innerText = "❤";
				// 设置属性. 字体大小, 颜色, 位置  randomColor() 返回 rgb(r,g,b);
				b.style="font-size: " + fontSize + "px;color:" + randomColor() + ";position:absolute;left:"
						+ left + "px;top:" + top + "px;opacity:1;";	
				// 添加到 body 中
				document.body.appendChild(b);
				// 定义一个 定时任务, 修改他的 style 属性
				var timer = setInterval(function(){
				// 去掉 top 值的 单位 px
				var top = b.style.top.replace("px", "");
				// 调整位置
				b.style.top = top - 1 + "px" ;
				// 隐藏
				b.style.opacity -= 0.05; 
				// 看不见时
				if(b.style.opacity < 0){
				// 移除元素
				document.body.removeChild(b);
				// 清除定时器
				clearInterval(timer);
					}
				}, 100);
			}
			// 随机 rgb 字符串
			function randomColor(){
				//~~的作用是去掉小数部分
				return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")";
			}
		</script>
	</body>

示例三（点击表格变色）

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.bg{
				background-color: #ccc;
			}
		</style>
	</head>

	<body>
		<button onclick="addClass()">添加样式</button>
		<table border="1" cellspacing="0" cellpadding="0" class="a" width="500px">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>男</td>
			</tr>
		</table>

		<script>
			// 获取到元素
			var table = document.querySelector("table");
			// 鼠标放到 元素上时
			table.onmouseover = function(){
				console.log("鼠标放到表格上了");
			}
			// 鼠标移出 元素上时
			table.onmouseout = function(){
				console.log("鼠标移出表格了");
			}
			function addClass(){
				table.className = table.className + " bg";
				console.log(table.className);
			}
		</script>
	</body>

猿知了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识《二》《DOM》

DOMDOM编程的基本概念Document Object Model 文档对象模型，用于操作网页中元素DOM编程的作用每个HTML页面在被浏览器解析的时候都会在内存中创建一棵DOM树，我们通过编写JS代码就可以访问这棵树上任何一个节点，并且对节点进行操作。通过 DOM模型，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。新创建的元素对象，要挂到DOM树上才可以在网页上显示出来。dom树查找节点的方法docu
复制链接

扫一扫