day17学习 前端JavaScript DOM操作

最新推荐文章于 2024-07-19 12:58:53 发布
最新推荐文章于 2024-07-19 12:58:53 发布
阅读量251 收藏
点赞数
文章标签： javascript 前端 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cosumerD/article/details/125791573
版权

DOM操作

DOM(document object model) 操作
js提供了一个document对象，指向的是HTML，在js中通过document对象可以直接或者间接获取页面内容对应的标签

DOM操作具体内容 - 操作节点（节点就是标签）

  • 直接获取节点

    • document.getElementById(id属性值) - 通过id属性值获取标签

    • getElementsByClassName(class属性值)

    • getElementsByTagName(标签名)

  • 获取父节点：节点.parentElement - 获取指定节点的父节点

  • 获取子节点：

    • 节点.children - 获取指定节点的所有子节点
    • 节点.firstElementChild - 获取指定节点的第一个子节点
    • 节点.lastElementChild - 获取指定节点的最后一个子节点
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box1">
			<p id="p1">段落</p>
		</div>
		<div id="box2">
			<a href="">百度</a>
			<p id="p2">段落</p>
		</div>
		<div id="box3">
			<p id="p3">段落</p>
		</div>
		
		<script type="text/javascript">
			p1 = document.getElementById('p1')
			console.log(p1)
			p1.style.color = 'red'
			// p1.style = 'color:red;' 
			p2 = document.getElementsByTagName('p')
			console.log(p2)
			colors = ['blue','green', 'pink']
			for(x in p2){
				p2[x].style = `color:${colors[x]};`
			}
			div1 = document.getElementById('p1').parentElement
			console.log(div1)
		</script>
	</body>
</html>

  • 添加节点

    • 创建新的节点
      document.createElement(标签名)
    • 添加节点
      • 节点1.appendChild(节点2) - 在节点1的最后添加节点2（节点1和节点2是父子关系
      • 节点.inserBefore(节点2，节点3)） - 在节点1中和节点3的前边添加节点2
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			document.write('<span>aaaa</span>')
			// 想在哪里加就写在哪里
		</script>
		
		<div id="div1">
			<p>段落</p>
		</div>
		
		<script>
			// 直接向body标签添加子标签
			document.write('<span>aaaa</span>')
		</script>
		
		<script>
			// 向p标签前添加新标签
			a = document.createElement('a')
			p = document.getElementById('p1')
			div1 = document.getElementById('div1')
			.insertBefore(a, p)
		</script>
	</body>
</html>

  • 删除节点

    remove() - 删除节点

    节点.remove()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="p1">段落1</p>
		<p>段落2</p>
		<p>段落3</p>
	</body>
	
	<script>
		p1 = document.getElementById('p1')
		p1.remove()
		
		p = document.getElementsByTagName('p')
		console.log(p)
		p[1].remove()
	</script>
</html>

向节点中添加内容和属性

  • 节点.innerText – 标签内部的文字（子标签也属于文字）
  • 节点.innerHTML – 标签内部的文字（包括子标签内部的文字）
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a class="a1">百度<b>一下</b></a>
		
		<script>
			a1 = document.getElementsByTagName('a')
			
			// a1[0].innerText = 'HTML'
			// a1[0].innerText = 'HTML<b>CSS</b>'
			// a1[0].innerHTML = 'HTML'
			a1[0].innerHTML = 'HTML<b>CSS</b>'	
			// 节点.属性 = 属性值 --->向节点内添加或修改属性
			a1[0].href = 'https://www.baidu.com'
			a1[0].target = '_blank'
			
			// 通过js代码改变属性，用于网页源代码显示的伪装
			a1[0].className = 'a2' 
			// a2属性实则是不存在的，a标签的属性值为a1
		</script>
	</body>
</html>

小案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 修改标签内容 -->
		<span>请输入姓名：</span><span id="name">张三丰</span>
		<br>
		<input type="text" name="" id="info">
		<!-- onclick -- 点击事件 -->
		<input type="submit" value="提交" 
		onclick = "document.getElementById('name').innerText=document.getElementById('info').value">
		<br>
		<!-- 修改图片 -->
		<img src="img/cat_open.png" alt="" id="photo">
		<input type="submit" value="更改图片" 
		onclick="document.getElementById('photo').src='./img/cat_close.png'">
	
		<!-- 修改文字样式 -->
		<p id="style">段落</p>
		<input type="submit" value="华丽的" 
		onclick="document.getElementById('style').style = 'color:pink; font-size:20px;'">
		<input type="submit" value="朴素的" 
		onclick="document.getElementById('style').style = ''">
		<br>
		
		<!-- 插入html代码 -->
		<script type="text/javascript">
			// Python的列表在其他编程语言中叫做数组。
			titles = ['四川', '云南', '贵州', '湖北']
			for (x in titles){
				title = titles[x]
				html_str = "<span id='one'>" + title + "</span><span>|</span>"
				document.write(html_str)
				document.getElementById('one').style = 'color:red'
			}

			// 报错： 开发者页面 console查看报错原因及位置
			// for (x in titles):
			// 	title = titles[x]
			// 	html_str = "<span>" + title + "</span><span>|</span>"
			// 	document.write(html_str)
				// 报错：02%20js%E5%B0%8F%E6%…88%E4%BE%8B.html:40 Uncaught SyntaxError: Unexpected ':'	
		</script>
	</body>
</html>

BOM操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 打开浏览器新标签页：window.open()
			function openwindow1(){
				w1 = window.open('https://www.baidu.com')
			}
			// 关闭刚打开的新标签页
			function close1(){
				w1.close()
			}
			// 打开新窗口
			function openwindow2(){
				w2 = window.open('https://www.baidu.com', '_blank', 'width=400,height=500')
				w2.moveTo(500,200)
			}
			// 关闭新打开窗口
			function close2(){
				w2.close()
			}
			
			// 关闭当前窗口
			function close3(){
				window.close()
			}
			
			// 页面滚动(应用：瀑布式加载页面)(还需设置停顿)			
			function to_bottom(){
				// window.scrollTo(x,y)
				y = 0
				y_max = 5000
				while(y <= y_max){
					y += 500
					window.scrollTo(0,y)
				}
			}
			// 页面横向滚动
			function to_right(){
				x = 0
				x_max = 10000
				while(x <= x_max){
					x +=500
					window.scrollTo(x,0)
				}
			}
		</script>
		
		<input type="submit" value="打开新窗口" onclick="openwindow2()">
		<input type="submit" value="关闭新窗口" onclick="close2()">
		<br>
		<input type="submit" value="打开新标签页" onclick="openwindow1()">
		<input type="submit" value="关闭标签页" onclick="close1()">
		<input type="submit" value="关闭当前窗口" onclick="close3()">
		<input type="submit" value="滚动到页面底部" onclick="to_bottom()">
		<input type="submit" value="滚动到页面右部" onclick="to_right()">
		
		<div style="width: 10000px; height: 5000px;"></div>
		<p>页面底部</p>
		
	</body>
</html>
奶盖er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一看就懂，HashMap的底层结构
weixin_45012804的博客
10-09 1535
HashMap的底层结构就是哈希表，具体实现起来就是一维数组和单向链表，一个HashMap对象就是一个一维数组和几条单向链表， 数组中的元素就是单向链表的起始节点。 往HashMap中存数据时：根据key和value构建一个节点（一个Node对象），而HashMap的数组的元素就是一个个Node对象， 节点中存有哈希值、key、value、下一节点的内存地址，此时下一节点的内存地址还是null，哈希值是key调用hashCode方法产生的， 在HashMap中再通过哈希算法将哈希值转化为数组下标，然后会通过
JS打开窗口、取得父窗口句柄的方法
JAVA_EE技术探讨
09-10 2080
一、 window.open的方式开启新窗口或通过点击链接的话，要取得父窗口的控件，可以用window.opener来取得父窗口 ，   二、 然而如果使用showModalDialog的话...却无效 ，如果有需要的话，需要修改开启的语法以及showModalDialog中的语法 开启语法第2个参数请填写为window,范例如下 ： var rc=window.showModalDi...
原生js实现dom的获取及操作
weixin_42349568的博客
07-22 2267
DOM（文档对象模型）是针对HTML和XML文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于Netscape及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。...
DOM day_04(7.12)BOM、打开新页面（延迟打开）、地址栏操作、浏览器信息读取、历史操作
m0_70328115的博客
07-13 243
BOM、打开新页面（延迟打开）、地址栏操作、浏览器信息读取、历史操作
学习笔记（7）：JavaScript学习-DOM(上）
zty666_的博客
05-16 142
基本概念 TCP/IP协议族本身很复杂，本人也暂时还没有“详解TCP/IP”的想法，本系列相关的文章都是意在从宏观上建立一个认知。 想要理解TCP/IP协议族，核心就是要理解分层的概念。 到底什么是分层？ 假如说有A,B这么两个部门，每个部门有一个经理和一个秘书，有一些事情没必要开会或者直接交流，比如文件的签署，可能是这样的： A经理拿一份文件给a秘书，然后a秘书将文件交给b秘书，b秘书然后又交给B经理，B经理签字后，又依次通过b秘书，a秘书，最后到达A经理处 ...
vito的Web前端学习_JavaScript_Day1
03-04
在“vito的Web前端学习_JavaScript_Day1”这个课程中，我们将会深入探讨JavaScript的基础概念和核心特性，为日后的Web开发打下坚实的基础。 首先，我们要理解JavaScript与ECMAScript的关系。JavaScript是基于...
06day_前端学习资料_
09-30
学习JavaScript包括变量、数据类型、控制流、函数、DOM操作、AJAX等，以及现代JavaScript特性如ES6+的新语法。 4. 响应式设计：随着移动设备的普及，响应式设计成为必备技能。学习如何使用媒体查询、弹性网格布局...
JS.rar_day3lb_javascript
09-23
总的来说，这个压缩包中的项目涵盖了JavaScript的基础语法、DOM操作、事件处理、AJAX、前端框架以及数据格式处理等多个方面。掌握这些知识将有助于理解并完成"JS.rar_day3lb_javascript"中的任务。
JavaScript时间操作之年月日星期级联操作
11-26
JavaScript时间操作之年月日星期级联操作是一个常见的前端交互功能，主要用于创建一个级联的日期选择器，用户可以通过选择年、月来动态更新可选的日期天数，并且在选择日期后显示相应的星期。这一功能在网页表单或者...
a-nice-day:接下来学习前端的日子
05-01
在"a-nice-day-master"这个项目中，你可以找到一个关于前端学习的实例，可能包含了上述某些概念的实际应用。通过实践，你可以更好地理解和掌握JavaScript在前端开发中的运用。记住，持续学习和不断练习是提升技能的...
DOM窗口相关数据、操作 & BOM操作
qq_56668869的博客
07-23 294
窗口相关数据和操作、窗口的可视区域尺寸、元素的几何尺寸、BOM操作基础
自定义getElementsByClassName方法
weixin_55869175的博客
08-15 266
自定义getElementsByClassName方法 在IE8以下是不兼容getElementsByClassName方法的。这时可以选择通过其他方式来达到此方法的效果。 <script> function elementByClassName(node, classStr) { //先获取node节点下的全部子节点 classStr是传入的要获取节点的类名 let nodes = node.getElementsByTagName("*");
博客前端项目学习day03——框架页
最新发布
qq_53237241的博客
07-19 195
【代码】博客前端项目学习day03——框架页。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 989
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
vue快速上手——创建vue项目，vue基本使用方式，路由vue-Router，转态管理vuex
weixin_73582152的博客
07-15 783
Node.js 是一个开源、跨平台的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript 代码。Node.js 是基于 Chrome V8 引擎构建的，它的设计目标是提供一种高效、轻量级的方式来构建可扩展的网络应用程序。事件驱动：Node.js 使用非阻塞 I/O 模型，使其非常适合处理大量并发连接，这使得它在构建实时应用程序（如聊天应用）时非常高效。单线程。
HOW - SVG 图标组件封装（Lucide React）
weixin_58540586的博客
07-18 855
在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到 图标 依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。
vue3配置代理
Joe world的博客
07-16 155
【代码】vue3配置代理。
Vue2中的v-model的表单元素绑定
m0_56698546的博客
07-16 262
常用的表单元素是可以用v-model来绑定关联 ->快速获取或设置表单元素的值。它会根据控件的类型自动选择正确的方法来更新元素。
vue3 vxe-grid查询有返回数据，但是不显示的问题解决
jwbabc的专栏
07-18 243
vxe-grid，方法是调用了，也有返回结果，但是就是不显示的解决。
JavaScript进阶笔记：数据类型、数组、对象与DOM操作详解
本资源是一份关于JavaScript的详细学习笔记，主要涵盖了Day_3-4的学习内容，重点涉及JavaScript的核心概念和技术。以下是具体内容的深入解析： 1. **JavaScript数据类型**：首先，笔记介绍了JavaScript中的基本数据...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值