JavaScript学习笔记

最新推荐文章于 2024-07-28 20:27:10 发布
最新推荐文章于 2024-07-28 20:27:10 发布
阅读量122 收藏 4
点赞数
分类专栏： JavaScript 文章标签： js javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44524687/article/details/117037009
版权

JavaScript DOM

文章目录

JavaScript DOM

1.DOM的介绍

​ DOM（document object model）：文档对象模型。

​ 将HTML元素的各个组成部分封装成对象。借助这些对象可以对HTML元素进行增删改查的动态操作。

在这里插入图片描述

2.Element元素的获取

在这里插入图片描述

2.1 getElementById()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
	</head>
	<body>
		<div id="d1">这是一个div</div>
		<button onclick="f()">点击</button>
	</body>
</html>
<script>
	function f(){
   		//getElementById()：根据id属性获取元素对象
		let d1 = document.getElementById("d1");
		alert(d1)
	}
</script>
2.2 getElementByTagName()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
	</head>
	<body>
		<div id="d1">这是一个div</div>
		<div id="d2">这是一个div</div>
		<div id="d3">这是一个div</div>
		<button onclick="f()">点击</button>
	</body>
</html>
<script>
    //getElementByTagName() 根据标签名获取元素对象们 返回数组
	function f(){
		let d1 = document.getElementsByTagName("div")
		for(let i=0;i<d1.length;i++){
			alert(d1[i])
		}
	}
</script>
2.3 getElementByClassName()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
	</head>
	<body>
		<div class="c1">这是一个div</div>
		<div class="c1">这是一个div</div>
		<div class="c1">这是一个div</div>
		<button onclick="f()">点击</button>
	</body>
</html>
<script>
    //getElementByClassName() 根据class属性获取对象们 返回数组
	function f(){
		let d1 = document.getElementsByClassName("c1")
		for(let i=0;i<d1.length;i++){
			alert(d1[i])
		}
	}
</script>
2.4 getElementByName()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
	</head>
	<body>
		<div name="c1">这是一个div</div>
		<div name="c1">这是一个div</div>
		<div name="c1">这是一个div</div>
		<button onclick="f()">点击</button>
	</body>
</html>
<script>
    //getElementByClassName() 根据name属性获取对象们 返回数组
	function f(){
		let d1 = document.getElementsByName("c1")
		for(let i=0;i<d1.length;i++){
			alert(d1[i])
		}
	}
</script>
2.5 parentElement
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
	</head>
	<body>
		<div name="c1">
			<span id="s1">这是span</span>
		</div>
		<button onclick="f()">点击</button>
	</body>
</html>
<script>
    //parentElement(属性):子元素对象. parentElement 获取父元素对象
	function f(){
		let s1 = document.getElementById("s1")
		let d1 = s1.parentElement;
		alert(d1)
	}
</script>

3.Element元素的增删改

在这里插入图片描述

3.1 createElement()
3.2 appendChild()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<style>
			#d1{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		<button onclick="f()">点击</button>
	</body>
</html>
<script>
	function f(){
		/* 创建span元素 */
		let span = document.createElement("span");
		/* 添加文本内容 */
		span.innerText="你是大帅哥！！！！！";
		/*得到父类的元素对象*/
		let div1 = document.getElementById("d1");
		/* 将创建的对象添加到父元素中 */
		div1.appendChild(span);
	}
</script>
3.3 removeChild()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
		<style>
			#d1{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div>
			<span id="d2">123</span>
		</div>
		<button onclick="f()">点击</button>
	</body>
</html>
<script>
	function f(){
		let span = document.getElementById("d2")
		let div = span.parentElement;
		/* 删除子元素 */
		div.removeChild(span);
	}
</script>
3.4 replaceChild()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
	</head>
	<body>
		<select id="s1">
			<option>默认</option>
			<option>北京</option>
			<option id="o1">南京</option>
		</select>
		<button onclick="f()">点击</button>
	</body>
</html>
<script>
	function f(){
		let option = document.createElement("option");
		option.innerText="杭州";
		let s1 = document.getElementById("s1")
		let o1= document.getElementById("o1")
		s1.replaceChild(option,o1)
	}
</script>

4.Attribute属性的操作

在这里插入图片描述

4.1 添加属性
4.2 删除属性
4.3 获取属性

​

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
	</head>
	<body>
		<a id="a1" href="https://www.baidu.com">点击去百度</a>
		<button onclick="f()">获取属性</button>
		<button onclick="f2()">删除属性</button>
		<button onclick="f3()">添加属性</button>
	</body>
</html>
<script>
	function f(){
		let a1 = document.getElementById("a1")
		/* 获取属性值 getAttribute(属性名)*/
		let value = a1.getAttribute("href")
		alert(value)
	}
	function f2(){
		let a1 = document.getElementById("a1")
        /*删除指定属性 removeAttribute(属性名) */
		a1.removeAttribute("href")
	}
	function f3(){
		let a1 = document.getElementById("a1")
        /* 添加属性  setAttribute(属性名,属性值) */
		a1.setAttribute("href","https://www.baidu.com")
	}
</script>
4.4 添加样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>		
	</head>
	<body>
		<span id="s1">这是一个span标签</span>
		<button onclick="f()">添加样式</button>
		
	</body>
</html>
<script>
	function f(){
		let s1 = document.getElementById("s1")
		s1.style.color="red"
	}
</script>
4.5 添加指定样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
		</style>		
	</head>
	<body>
		<div>这是一个div</div>
		<div>这是一个div</div>
		<div>这是一个div</div>
		<div>这是一个div</div>
		<div>这是一个div</div>
		<div>这是一个div</div>
		<button onclick="f()">加样式</button>
	</body>
</html>
<script>
	function f(){
		let divs = document.getElementsByTagName("div");
		for(let i=0;i<divs.length;i++){
			/* divs[i].className="div1" */
			divs[i].setAttribute("class","div1")
		}
	}
</script>

5.Text文本操作

在这里插入图片描述

5.1 innerText()
5.2 innerHTML()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
				border: 1px solid red;
			}
			p{
				color: red;
			}
		</style>		
	</head>
	<body>
		<div id="div1"></div>
		<button onclick="f()">添加文本</button>
	</body>
</html>
<script>
	function f(){
		let div = document.getElementById("div1")
		div.innerText="我是div"
		/* innerText 添加文本内容 不会解析标签 */
		/* div.innerText="<p>这是一个p标签</p>" */
		div.innerHTML="这是HTML的文本"
		innerHTML 添加文本内容  解析标签
		div.innerHTML="<p>这是一个p标签</p>"
	}
</script>

6.JavaScript事件

6.1 事件介绍

​ 事件指的就是某些组件执行完某些操作后会触发某些代码的执行。

6.2 常用事件

​ 在这里插入图片描述

6.3 了解事件

在这里插入图片描述

6.4 绑定事件

​ 方式一：​

<button onclick="f()">添加文本</button>
//案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			
	</head>
	<body>
		密码：<input type="text" onchange="f2()" id="pwd"/>
		<span id="s1" hidden="hidden">密码格式不对</span>
		<button>提交</button>
	</body>
</html>
<script>
	function f2(){
		let input = document.getElementById("pwd")
		var s1 = document.getElementById("s1")
		let pwdvalue = input.value;
		if(pwdvalue.length<6){
			s1.removeAttribute("hidden")
			s1.style.color="red"
		}else{
			s1.setAttribute("hidden","hidden")
		}
	}
</script>

​ 方式二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 400px;
				height: 200px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="d1">			
		</div>
		<button onclick="f()">在div中添加输入框并且添加内容改变事件</button>
	</body>
</html>
<script>

	function f(){
		let input = document.createElement("input")
		input.setAttribute("type","text")
		input.onchange=function(){
			alert(1)
		}
		let d1 = document.getElementById("d1")
		d1.appendChild(input)	
	}
</script>
初级炼丹师Yiky--1229
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
JavaScript学习笔记讲解
05-07
这只是JavaScript学习笔记的一小部分，JavaScript还有更多高级特性和概念，如对象、数组、函数、类、模块、闭包等，以及DOM操作、事件处理、Ajax异步请求等内容，需要进一步深入学习和实践才能掌握。
JavaScript学习笔记.pdf
11-21
JavaScript 学习笔记 JavaScript 是互联网上流行的脚本语言，可以用于 HTML 和 web，广泛应用于服务器、PC、笔记本、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言，可以插入 HTML 页面的编程代码...
JavaScript 学习笔记（五）
10-29
在这一部分的学习笔记中，我们将深入探讨JavaScript中的本地对象、内置对象以及宿主对象，同时也会涉及作用域和关键字`this`的使用。 首先，我们来看本地对象。本地对象是JavaScript引擎自身提供的对象，它们直接由...
JavaScript 学习笔记一些小技巧
10-29
以下是一些JavaScript学习过程中的小技巧，它们可以帮助你更高效地编写和理解代码。 一、错误处理与try...catch语句 在JavaScript中，错误处理是一个关键的组成部分。`try...catch`语句用于捕获和处理可能出现的...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 350
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1205
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 1067
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 217
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 180
【代码】vue el-select的下拉树形结构。
新手vue学习问题汇总（自用）（长期更新）
最新发布
lapiii的博客
07-28 261
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 622
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 764
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
让开发者生活更轻松的 JavaScript 字符串方法
粉丝们务必加入微信粉丝群
07-27 165
前端岗位内推来了JavaScript 最初被引入作为一种简单的客户端脚本语言，但现在，它已经成为一种真正的 WORA（一次编写到处运行）语言，使开发者能够构建桌面、移动、电视、CLI 和嵌入式应用程序。JavaScript 的初学者友好语法、生产性语言特性和良好管理的 ECMAScript 规范，激励了所有人使用 JavaScript 进行通用编程。ECMAScript 标准通过提供许多语言特性来...
爬虫基本原理入门
RHeng的博客
07-25 1085
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
Vue3学习总结
inside802的博客
07-28 167
9、计算属性：使用computed属性，可以给template传递一个经过计算后的值，当这个值放在缓存中，当这个值不发生改变时，则JS不会再次执行computed，这样就能提高运行速度。4、属性绑定：使用v-bind:命令来实现属性绑定，如果是绑定单个属性，命令为v-bind:attr=“attr”，也可以写为v-bind:attr，也可以简写为：。11、绑定CSS样式，是通过绑定style属性来实现的，语法为v-bind:style=“myStyle”.其中，myStyle是在vue中自定义的样式。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 158
【代码】typescript中type和interface有什么区别，如何选择？
JavaScript学习笔记：元素交互与基本语法详解
本篇笔记记录了作者在学习JavaScript过程中的关键知识点，主要包括以下几个方面： 1. HTML中使用JavaScript: - 使用`<script>`元素插入脚本，这是在HTML文档中嵌入JavaScript的基本方式。 - 子页面与父页面之间的...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值