JavaScript（DOM的使用一）

最新推荐文章于 2023-04-03 17:38:31 发布
最新推荐文章于 2023-04-03 17:38:31 发布
阅读量663 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mycsdn_first/article/details/124849900
版权

   本文章讲述的DOM的一些使用

一、节点的查询和遍历：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1 id="dom">DOM document Object Model</h1>
		<p>你好1</p>
		<p>你好2</p>
		<p>你好3</p>
		<h1>dom的节点查询</h1>
		<form action="">
			爱好：<br>
			<input type="checkbox" name="fav" id="">lol <br>
			<input type="checkbox" name="fav" id="">dnf  <br>
			<input type="checkbox" name="fav" id="">麻将  <br>
		</form>
		<script>
			// 节点的遍历，就是把获到的节点列表挨个输出
			// 01 for 循环来遍历
			var ps = document.getElementsByTagName("p");
			// for(var i = 0; i<ps.length;i++){
			// 	console.log(ps[i],ps[i].innerText);
			// }
			// 02 转换为数组后forEach
			// Array.from()把类数组元素转换为数组
			// foreach数组的高阶函数（遍历），传入一个回调函数function
			// 数组元素有多少个 function就会执行多少次
			// elem 当前被遍历的元素
			var arr = Array.from(ps)
			arr.forEach(function(elem){
				console.log(elem,elem.innerText)
			})
		</script>
	</body>
</html>

二、queryselsctor（选择器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<h1 id="dom">queryselsctor</h1>
		<div>
			<p>你好1</p>
			<p>你好2</p>
			<p>你好3</p>
			<p class="four">你好4</p>
			<p>你好5</p>
		</div>
		<script>
			// queryselsctor通过css选择器的方式去查询节点
			// query查询 selector选择器
			var p = document.querySelector("div .four");
			console.log(p,p.innerHTML);
			// 选择节点非常方便，填写Css选择器
			var p2 = document.querySelector("div p:last-of-type");
			console.log(p2,p2.innerHTML);
			// querySelectorAll 通过css选择器获取节点列表
			var ps = document.querySelectorAll("div p:not(.four)");
			ps.forEach(function(item){
				console.log(item.innerText);//遍历节点
				// innerText 元素的文本内容
			})
		</script>
		
		
	</body>
</html>

三、更改层内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" onclick="changeIt()">更改层内容</button>
		<div>	
			 我喜欢xxx
		</div>
		<input type="text" value="人生苦短"/> 
		<button type="button" onclick="changeInp()"> 改变文本框的内容</button>
		<script>
			function changeInp(){
				var input = document.querySelector("input");
				// value 获取/设置文本框的值
				input.value = "学前端，月薪过万！";
			}
			
			 function changeIt(){
				 var div = document.querySelector("div");
				 // 修改div的内容文本
				 // innerText 获取/设置元素文本内容（除html标签）
				 // div.innerText = "我还是喜欢<strong>xxx</strong>";
				 // innerHTML 获取/设置元素的html内容
				 div.innerHTML = "我还是喜欢<strong>xxx</strong>";
			 }
		</script>
	</body>
</html>

四、访问页面元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" value="春" name="season" />
		<input type="text" value="夏" name="season" />
		<input type="text" value="秋" name="season" />
		<input type="text" value="冬" name="season" /><br/>
		<input type="button"   value="显示input内容" onclick="showInput()" />
		<input type="button"   value="显示season内容" onclick="showSeason()" />
		<div id="tip">
		</div>
		<script type="text/javascript">
			function showSeason(){
				var str = "";//用来存储每个season的值
				// 获取到所有的季节
				var seasons = document.getElementsByName("season");
				// 遍历seasons
				seasons.forEach(function(item){
					// 累计追加每个input的值
					str+=item.value+"<br/>";
				})
				var tip  = document.getElementById("tip");
				// 设置tip的文本
				tip.innerHTML = str;
				
			}
			function showInput(){
				var str = "";//存储每个input里面的值
				// 获取所有input节点
				var inps = document.querySelectorAll("input");
				// 遍历inps 把value追加到 str里面
				inps.forEach(function(item){
					str+=item.value+"<br/>";
				})
				console.log(str);	
				// 获取tip节点
				var tip = document.getElementById("tip");
				// 设置tip的html内容
				tip.innerHTML = str;
			}
		</script>
	</body>
</html>

五、修改style样式（相当于用js来样式）


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div{
				width: 200px;
				height: 100px;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		 <div id="div">
		 	你好样式style
		 </div>
		 <button type="button" onclick="changeW()">变宽</button>
		 <script type="text/javascript">
		 	function changeW(){
				// 获取div
				var div = document.getElementById("div");
				// 相当于用js写了行内样式
				// 修改div样式
				div.style.width = "400px";
				// font-size写法改成驼峰式 fontSize
				div.style.fontSize = "48px";
			}
		 </script>
	</body>
</html>

六、修改元素的显示与隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#mydiv{
				width: 200px;
				height: 100px;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		 <button type="button" onclick="toggle()">切换</button>
		 <div id="mydiv">
		 	学前端月薪过1.5万
		 </div>
		 <script type="text/javascript">
		  // 通过单击按钮实现div的切换与线上
		  function toggle(){
			  // 获取到div
			  var divs = document.getElementById("mydiv");
			  // 获取到display值（第一次默认获取不到）
			  var display = divs.style.display;
			  // 如果不是为none
			  if(display!=="none"){
				  // 隐藏
				  divs.style.display = "none";
			  }else{
				  // 显示
				  divs.style.display = "block";
			  }
		  }
		  
		 </script>
	</body>
</html>

七、通过classlist切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#mydiv{
				width: 200px;
				height: 100px;
				border: 2px solid red;
			}
			.hide{
				display: none;
			}
		</style>
	</head>
	<body>
		 <button type="button" onclick="toggle()">切换</button>
		 <div id="mydiv">
		 	学前端月薪过1.5万
		 </div>
		 <script type="text/javascript">
		  // 通过单击按钮实现div的切换与线上
		  function toggle(){
			  // 获取到div
			  var divs = document.getElementById("mydiv");
			  // 如果divs的类列表里面有hide 移除hide没有添加hide
			  // console.log(divs.classList);
			  divs.classList.toggle("hide");
			  // classList.toggle() 切换类名
			  // classList.add()  添加类名
			  // classList.remove() 移除类名
			  // classList.contains() 检查是否包含
		  }
		 </script>
	</body>
</html>

八、style只能访问行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#mydiv{
				 
				height: 100px;
				border: 2px solid red;
			}
			 
		</style>
	</head>
	<body>
		 <button type="button">切换</button>
		 <div id="mydiv" style="width: 200px;">
		 	学前端月薪过1.5万
		 </div>
		 <script type="text/javascript">
			var divs = document.getElementById("mydiv");
			// 如果是行内样式可以访问到
			// 写在style标签里的样式是访问不到的
			alert(divs.style.width);
			alert(divs.style.height);
		  
		 </script>
	</body>
</html>

九、二级下拉菜单（ps：这个有点难）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				
			}

			ul,
			li {
				list-style: none;
			}

			.nav {
				height: 90px;
				background-color: #ccc;
			}

			.menu>li {
				display: inline-block;
				height: 90px;
				line-height: 90px;
				width: 160px;
				text-align: center;
				vertical-align: middle;
			}

			.menu>li:hover,.submenu>li:hover{
				background-color: aqua;
			}

			.submenu {
				background-color: #ccc;
				display: none;
			}
			.link{
				position: relative;
			}
			.submenu .submenu{
				position: absolute;
				width: 160px;
				left: 160px;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<ul class="menu">
				<li class="link">
					首页
				</li>
				<li class="link">
					<a href="">产品</a>
					<ul class="submenu">
						<li>
							<a href="">二级菜单一</a>
						</li>
						<li class="link">
							<a href="">二级菜单二</a>
							<ul class="submenu">
								<li>
									<a href="">三级菜单一</a>
								</li>
								<li>
									<a href="">三级菜单二</a>
								</li>
								<li>
									<a href="">三级菜单三</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="">二级菜单三</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<script>
			// link被hover时候，选择到link的子节点submenu显示
			var links = document.querySelectorAll(".link");
			// 对link遍历
			links.forEach(function(item) {
				// 选择到link（item）的子节点submen
				var submenu = item.querySelector(".submenu");
				// 当鼠标移入link（item）
				item.onmouseover = function() {
					// 让其子节点submenu显示，解决鼠标放到首页li上会报错用的js上三级运算符
					submenu ? submenu.style.display = "block" : "";
				}
				// 当鼠标移除事件
				item.onmouseout = function() {
					// 让其子节点submenu显示 ，解决鼠标放到首页li上会报错用的js上三级运算符
					submenu ? submenu.style.display = "none" : "";
				}
			})
			// 本次单词：onmouseover（当鼠标移入事件），onmouseout（当鼠标以出事件）
		</script>
	</body>
</html>

十、全选按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				
			}

			ul,
			li {
				list-style: none;
			}

			.nav {
				height: 90px;
				background-color: #ccc;
			}

			.menu>li {
				display: inline-block;
				height: 90px;
				line-height: 90px;
				width: 160px;
				text-align: center;
				vertical-align: middle;
			}

			.menu>li:hover,.submenu>li:hover{
				background-color: aqua;
			}

			.submenu {
				background-color: #ccc;
				display: none;
			}
			.link{
				position: relative;
			}
			.submenu .submenu{
				position: absolute;
				width: 160px;
				left: 160px;
				top: 0;
			}
		</style>
	</head>
	<body>
		<h1>全选</h1>
		<input type="checkbox" name="" id="all">全选<br>
		<input type="checkbox" >选项1
		<input type="checkbox" >选项2
		<input type="checkbox" >选项3
		<input type="checkbox" >选项4
		<script>
			// 当全选发生变化的时候，所有checkbox非all值与all的保持一致
			// 获取all
			var all = document.getElementById("all");
			// 获取非all的checks
			var checks = document.querySelectorAll("input:not(#all)");
			all.onchange = function(){
				// 遍历checks，设置元素的值为all的值
				checks.forEach(function(item){
					item.checked = all.checked;
				})
			}
			// checks每个input，当发生变化时候，计算已经选中的个数
			// 如果选中的个数等于checks长度那么就说明要设置全选了
			checks.forEach(function(item){
				item.onchange = function(){
					// 获取已经选中的checkbox
					// input:not(#all):check(css3新增选择器)
					// input选中所有input标签：not（#all）过滤掉id为all表单：checked留下被选中的checkbox
					var sel = document.querySelectorAll("input:not(#all):checked");
				    if(sel.length===checks.length){
						// 如果选中的长度等于checks长度
						all.checked = true;
					} else{
						all.checked = false;
					}
				}
			})
		</script>
	</body>
</html>

大大怪侠士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript里使用Dom操作Xml
10-31
Javascript里使用Dom操作Xml
JavaScrip循环 函数 DOM操作
cxz_dong的博客
12-08 1183
JS的循环 for 循环 常规for 循环 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> for(var i=11;i>10;i++){ //var i=0 声明变量i i<10条
js 循环dom中的节点 直到找到节点里的文本内容（递归）
qq_42174597的博客
02-08 883
js 循环dom中的节点 直到找到节点里的文本内容（递归方法）
JavaScriptDOM操作节点遍历的四种方法
weixin_43635751的博客
02-18 1752
节点遍历方法第一种，使用第二套DOMAPI 关系 遍历 // 元素节点的遍历方法 第一种 // var box = document.getElementById("box"); // for(var i=0,len = box.children.length;i<len;i++){ // console.lo...
JS DOM之DOM遍历
大河之犬的博客
10-06 2027
DOM遍历，可以简单地理解为“查找元素”。举个例子，如果你使用等方法获取一个元素，然后又想得到该元素的父元素、子元素，甚至是下一个兄弟元素，这种操作涉及的就是DOM遍历。
js那些常用的遍历节点的方法
秋来九月八
12-08 1365
你可以编写递归函数来遍历 DOM 树的各个节点，访问它们的属性和执行操作。这些方法提供了多种方式来遍历 DOM 节点，你可以根据需要选择最适合你的方法。注意，一些方法可能返回文本节点等非元素节点，因此需要小心处理。在 JavaScript 中，遍历 DOM 节点（文档对象模型）的方法有多种。允许你通过 CSS 选择器选择特定的节点或一组节点。分别用于根据元素的 ID 和类名来获取节点。这些方法可以快速定位到特定节点。你可以使用这些属性来遍历父节点和子节点。属性可以访问节点的下一个兄弟节点和上一个兄弟节点。
javascript Dom 编程艺术
08-11
读者将看到JavaScript、 HTML5和CSS如何协作来创建易用的、与标准兼容的Web设计，掌握使用JavaScript和DOM通过客户端动态效果和用户控制的动画来加强 Web页面的必备技术；同时，还将对如何利用库提高开发效率有全面...
javascript DOM 操作.doc
01-15
javascript DOM 操作.doc
JavaScriptDOM高级程序设计
07-22
资源名称：JavaScript DOM高级程序设计内容简介：本书注重理论与实践的结合，全面讲述高级的DOM 脚本编程。全书分为3 个部分：第一部分“深入理解DOM 脚本编程”，涉及W3C DOM 规范的各方面，包括非标准的浏览器支持...
JavaScript DOM 学习总结(五)
10-23
当页面加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型定义访问和处理HTML文档的标准方法，本篇文章给大家介绍javascript dom 学习总结(五)，感兴趣的朋友一起学习吧
原生js循环展示dom_JS DOM 操作 与 虚拟 DOM
weixin_39952190的博客
10-16 1446
一、DOM 操作相比普通 JS 操作DOM 操作慢，这个概念最初来自于《高性能 JavaScript》这本书，但文中没有给出任何数据和对比。快慢这种描述是个相对值，而非绝对值。今天用代码实际操作得出数据比较一下，DOM 操作到底慢不慢？相对于什么慢？<主要对比 JavaScript push 方法和 JavaScript DOM 操作const 当用原生 JavaScript DOM 操作插...
js 基础学习 遍历DOM
qq_40890601的博客
07-23 912
DOM这块知识很重要，做个总结吧！ DOM 表示文档对象模型，每个HTML标签都是一个对象，标签内的文本也是对象，所有这些对象都可以使用 js 来访问和修改。 js 共有12 种节点类型 通常用到的有四种： document — DOM 的“入口点”。 元素节点 — HTML 标签，树构建块。 文本节点 — 包含文本。 注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。 自动修正 如果浏览器遇到格式不正确的HTML，它会在形成DOM的时候修正它。 例如，顶级标签永
JS classList 用法简介
kayron的博客
11-14 1万+
JS classList 用法简介定义及用法 classList 属性返回元素类名. 该属性用于在元素中添加, 移除及切换 CSS 类.
你可能不知道的JavaScript 遍历DOM的几种方法
热门推荐
Quiet-Night的博客
11-02 2万+
你可能不知道的JavaScript 遍历DOM的几种方法
深入学习js的classList
杜永康的博客
04-03 7127
classList 是 JavaScript 中一个用于操作元素类名的东西，这个东西有很多好用的方法，可以让我们轻松地添加、删除、切换和检查元素的类名。接下来我们详细学习一下 classList 的使用方法以及相关方法。classList 是一个非常实用的工具，可以让我们轻松地操作元素的类名。在使用 classList 时，我们可以通过 add、remove、toggle 和 contains 等方法来添加、删除、切换和检查类名；
css classlist,JS classList属性的使用
weixin_29426299的博客
08-03 716
使用元素的 classList 属性可以访问或添加、删除及修改元素的 class 属性。需注意的是，支持 classList 属性的浏览器主要是一些较新版的，例如：IE10+、Firefox3.6+。使用 classList 属性访问 class 属性的格式如下：element.classListclassList 是一个只读属性，其返回的值为 DOMTokenList，其中包含了元素的所有 cl...
JavaScript_classList
Kro_C
04-06 180
classList:获取元素class的集合 length : class的个数 add() : 给元素添加class,是以追加的形式,不会覆盖之前已经存在的class contains() : 判断元素是否包含指定的class名,返回值为布尔值 remove() : 移除指定的class名 toggle() : 切换指定的class名,如果存在就将这个class名移除,如果不存在就添加 ...
JavaScript classList() 属性和方法解释
allway2的博客
06-05 6565
属性是 HTML 元素的一个属性，它保存当前选定元素的类名。您可以使用该属性将 HTML 元素的类名作为数组获取。例如，假设您的标签中有以下 HTML 元素： 您可以使用该方法获取上面的元素，然后您可以使用or属性获取元素的类名。属性以字符串形式返回类名，而属性以数组形式返回类名： 该属性是只读属性。如果要操作 HTML 元素的类，则需要使用属性中包含的方法。它们如下：让我们从方法开始了解这些方法是如何工作的。该方法允许您向元素添加一个或多个类名。您只需要将要添加的类名作为逗号分隔的字符串传递：
用JavaScript classList控制元素
cungui5726的博客
08-23 150
For a very long time, manipulating classes was something that JavaScript did very poorly, often requiring the use of awkward regular expressions, which was one of the reasons that so many developers t...
javascript DOM
最新发布
04-04
JavaScript DOM (Document Object Model) is a programming interface that allows developers to interact with and manipulate HTML and XML documents. The DOM represents an ... Through the DOM, developers ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值