前端路线--JavaScript篇（day06）

已于 2022-02-17 16:56:49 修改
阅读量294 收藏
点赞数
分类专栏： 前端 文章标签： javascript 前端 开发语言
于 2022-01-21 14:01:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/122620190
版权

获取元素节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{

		}
		.box{

		}
		#pox{

		}
	</style>
</head>
<body>
	<div class="box" id="pox">
		hello
	</div>
	<div class="box">
		world
	</div>
	<p>段落1</p>
	<p>段落2</p>
	<p>段落3</p>
	<ul id="list">
		<li>无序列表1</li>
		<li>无序列表2</li>
		<li>无序列表3</li>
	</ul>
	<ul>
		<li>无序列表4</li>
		<li>无序列表5</li>
		<li>无序列表6</li>
	</ul>
	
	<form action="" method="">
		<input type="radio" name="sex" value="男" />男
		<input type="radio" name="sex" value="女" />女
	</form>
	
	<script>
		// 1、根据ID获取元素(推荐使用)
		var oPox = document.getElementById('pox');
		console.log(oPox)

		// document  文档
		// .         的
		// get       获取
		// Element   元素
		// By        通过
		// Id        ID

		// 通过ID获取文档的元素

		// 2、通过标签名去获取元素
		// 通过标签名获取的元素是一个集合，有下标、有长度、要通过下标调用
		var oP = document.getElementsByTagName('p');
		console.log(oP);   //获取多个
		console.log(oP[1]);  //获取单独的一个元素

		// 这种方式获取的就不再是一个集合，直接获取某个标签
		var oDiv = document.getElementsByTagName('div')[0];
		console.log(oDiv)

		// 3、通过class获取元素(用的少)
		// 通过类名获取的元素是一个集合，有下标、有长度、要通过下标调用
		var oText = document.getElementsByClassName('box');
		console.log(oText)
		console.log(oText[1])

		// 4、通过父元素获取子元素(进阶用法)
		// 第一步通过ID获取父元素
		var list = document.getElementById('list');  

		// 第二步通过标签名获取父元素下的元素
		var oLi = list.getElementsByTagName('li');
		console.log(oLi)
		
		//4.根据name的属性值来获取节点
		var inputNode=document.getElementsByName('sex');
		console.log(inputNode);
	</script>
</body>
</html>

获取特殊元素的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>百度以下</title>
</head>
<body>
	<form action="">
		<input type="text" name="">
		<input type="button" value="普通按钮">
	</form>
	<img src="https://static.leiphone.com/uploads/new/homepagerecommend/pic/202201/61dd1f2bc96e5.png?imageMogr2/thumbnail/!388x391r/gravity/Center/crop/388x391/quality/90" alt="">
	<img src="https://static.leiphone.com/uploads/new/latest/61dbce641b40e.jpg?imageMogr2/thumbnail/480x290!/quality/90" alt="">
	<a href="">百度一下</a>
	<a href="">你就知道</a>
	<a>打酱油的</a>
	<script>
		var oHtml = document.getElementsByTagName('html');
		console.log(oHtml[0])

		// 1、获取整个html元素-----包含整个文档元素
		console.log(document.documentElement)

		// 2、获取body
		console.log(document.body);
		console.log(document.head);

		// 3、获取title网页的标题
		console.log(document.title);

		// 4、获取网页整个的URL路径
		console.log(document.URL);

		// 5、获取整个网页的表单元素
		console.log(document.forms[0]);

		// 6、获取所有的图片元素
		console.log(document.images[1]);

		// 7、获取所有带href属性的a元素
		console.log(document.links);

		// var oBody = document.body;
		// oBody.innerText = '获取元素节点';
		
		//8.获取域名
		console.log(document.domain);
		
		//9.获取script节点
		console.log(document.scripts);
	</script>
</body>
</html>

改变HTML的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{

		}
		.box{

		}
		#pox{

		}
	</style>
</head>
<body>
	<div class="box" id="pox">
		hello
	</div>
	<div class="box" id="pox1">
		hello
	</div>
	<div id="main">
		<div class="box">
			<p>文本节点</p>
		</div>
		<div class="box">
			<p>文本节点</p>
		</div>
		<div class="box">
			<p>文本节点</p>
		</div>
	</div>
	<script>
		// .innerText  改变元素内部的文本内容
		// .innerHTML  改变元素内部的HTML内容

		// 根据ID获取元素
		var oPox = document.getElementById('pox');
		
		// 1、改变元素内容
		// 每次添加内容都会覆盖原来的内容
		oPox.innerText = '改变后的盒子';
		oPox.innerText = oPox.innerText+'改变后的盒子';
		// 通过+=进行叠加
		oPox.innerText += '改变后的盒子';


		// 2、改变标签结构
		var oPox1 = document.getElementById('pox1');

		oPox1.innerHTML = '<span>我是span内容1</span>';
		oPox1.innerHTML += '<span>我是span内容2</span>';
		oPox1.innerHTML += '<img src="../课件/media/fa2e7c4b1489716e056ac2aafc5e4c0f.png" alt="">';

		// 获取元素(循环添加内容)
		var oP = document.getElementsByTagName('p');

		// 通过遍历一次性改变多个标签内容
		for(var i=0;i<oP.length;i++){
			oP[i].innerText = '改变过后的内容'
		}
	</script>
</body>
</html>

改变CSS内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#main{
			width: 200px;
			height: 200px;
			background-color: #f00;
		}
	</style>
</head>
<body>
	<div id="main">
		文本节点
	</div>
	<script>
		// 获取元素
		var oMain = document.getElementById('main');
		console.log(oMain)

		oMain.style.color = '#0f0';
		oMain.style.fontSize = '32px';
		oMain.style.backgroundColor = 'yellow';
		oMain.style.borderBottom = '10px solid #00f';
		// 如果通过js改变css样式，碰见横杠要取消，并把下个单词的首字母大写
	</script>
</body>
</html>

改变标签属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#main{
			width: 200px;
			height: 200px;
			background-color: #f00;
		}
	</style>
</head>
<body>
	<div id="main" class="box" title="我是提示文本">文本节点</div>

	<input type="password" id="input" placeholder="提示信息">

	<div id="one"></div>

	<a href="https://www.baidu.com" id="baidu">百度一下</a>

	<script>
		var main = document.getElementById('main');
		var oInput = document.getElementById('input');
		var one = document.getElementById('one');
		var baidu = document.getElementById('baidu');

		//获取标签的属性
		var myId = main.getAttribute('id');   //获取main的id属性
		var myClazz = main.getAttribute('class');
		var myTitle = main.getAttribute('title');
		console.log(myId,myClazz,myTitle)

		// 添加修改标签的属性
		main.setAttribute('lang','zh');
		main.setAttribute('title','hello world');
		main.setAttribute('class','box pox');
		//删除标签的属性
		main.removeAttribute('title');

		// 也可以通过这种方式获取修改添加属性
		one.className = 'nav';
		one.id = 'nav';
		oInput.placeholder = '啊啊啊 啊啊啊啊啊';
		baidu.href = 'https://www.taobao.com';
	</script>
</body>
</html>

新建并且追加

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<div id="main">
		<p id="box1">box1</p>
		<p id="box2">box2</p>
		<p id="box3">box3</p>
	</div>

	<script>
		// 1、获取元素
		var oMain = document.getElementById('main');

		// 2、新建元素
		var newElement = document.createElement('p');
		newElement.setAttribute('id','box4');
		newElement.innerText = 'box4';
		console.log(newElement)
		
		//3.创建文本节点
		var txt=document.createTextNode('你好');
		// 4、追加到div内容的最后
		oMain.appendChild(newElement);
	</script>
</body>
</html>

操作元素–插入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<div id="main">
		<p id="box1">box1</p>
		<p id="box2">box2</p>
		<p id="box3">box3</p>
	</div>

	<script>
		// 1、获取元素
		var oMain = document.getElementById('main');

		// 2、新建元素
		var newElement = document.createElement('p');
		newElement.setAttribute('id','box4');
		newElement.innerText = 'box4';
		console.log(newElement)

		// 3、获取目标元素box2
		var targetElement = document.getElementById('box2');

		// 4、将新元素插入到box2目标元素的前面
		oMain.insertBefore(newElement,targetElement);
	</script>
</body>
</html>

操作元素–替换

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<div id="main">
		<p id="box1">box1</p>
		<p id="box2">box2</p>
		<p id="box3">box3</p>
	</div>

	<script>
		// 1、获取元素
		var oMain = document.getElementById('main');

		// 2、新建元素
		var newElement = document.createElement('p');
		newElement.setAttribute('id','box4');
		newElement.innerText = 'box4';
		console.log(newElement)

		// 3、获取目标元素box2
		var targetElement = document.getElementById('box2');

		// 4、将新元素替换box2
		oMain.replaceChild(newElement,targetElement);
		
	</script>
</body>
</html>

操作元素–删除

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<div id="main">
		<p id="box1">box1</p>
		<p id="box2">box2</p>
		<p id="box3">box3</p>
	</div>

	<script>
		// 1、获取元素
		var oMain = document.getElementById('main');

		// 2、获取要被删除的元素
		var targetElement = document.getElementById('box2');

		// 3、通过删除oMain 的孩子 box2
		oMain.removeChild(targetElement)
		
	</script>
</body>
</html>

操作元素–复制

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<div id="main">
		<p id="box1">box1</p>
		<p id="box2">box2</p>
		<p id="box3">box3</p>
	</div>

	<script>
		// 1、获取元素
		var oMain = document.getElementById('main');

		// 浅拷贝(只拷贝当前元素)
		var copy1 = oMain.cloneNode(false);
		// 深拷贝(拷贝当前元素以及当前元素的所有后代元素)
		var copy2 = oMain.cloneNode(true);
		
		console.log(copy1)
		console.log(copy2)

		document.body.appendChild(copy1);
		document.body.appendChild(copy2);
	</script>
</body>
</html>

根据元素的关系访问元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		
	</style>
</head>
<body>
	<div>
		<div>
			<p>box1</p>
			<p>box2</p>
			<p>box3</p>
		</div>
		<div id="box2">
			<p>box4</p>
			<p>box5</p>
			<p>box6</p>
		</div>
		<div>
			<p>box7</p>
			<p>box8</p>
			<p>box9</p>
		</div>
	</div>

	<script>
		// 1、获取box2元素
		var box2 = document.getElementById('box2');

		// 获取父节点
		console.log(box2.parentNode);

		// 上一个兄弟节点(空白节点、幽灵节点)
		console.log(box2.previousSibling);
		// 上一个元素兄弟节点
		console.log(box2.previousElementSibling);

		// 下一个兄弟节点(空白节点、幽灵节点)
		console.log(box2.nextSibling);
		// 下一个元素兄弟节点
		console.log(box2.nextElementSibling);

		// 获取第一个孩子节点
		console.log(box2.firstChild);
		console.log(box2.firstElementChild);

		// 获取最后一个孩子节点
		console.log(box2.lastChild);
		console.log(box2.lastElementChild);

		// 获取所有的孩子(获取的是一个伪数组)可以通过下标获取
		console.log(box2.children);
		// 获取所有的孩子(包含空白节点、幽灵节点)
		console.log(box2.childNodes);


		// 找box2父亲的父亲
		console.log(box2.parentNode.parentNode);
		// 找box2的上一个兄弟的上一个兄弟
		console.log(box2.previousSibling.previousSibling);
		// 找box2的下一个兄弟的第一个孩子
		console.log(box2.nextElementSibling.firstElementChild);
		// 找box2的下一个兄弟的第二个孩子
		console.log(box2.nextElementSibling.children[1]);
	</script>
</body>
</html>
喝西瓜汁的兔叽Yan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3938
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
30-day-of-javascript-day-1
03-04
【标题】"30-day-of-javascript-day-1" 是一个关于JavaScript编程的学习计划，旨在帮助初学者在30天内逐步掌握JavaScript的基础知识。这个计划的第一天通常会涵盖JavaScript的入门概念，为后续的学习打下坚实的基础...
前端路线--JS高阶（day02）
Yan9_9的博客
03-14 1384
实例成员和静态成员 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //构造方法 function Person (name,age) { this.name=
前端路线--Ajax（day01）
Yan9_9的博客
03-20 1195
计算机网络知识 JSON <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //Json对象的两种格式: /* JSON数据中的值的类型:null
前端路线--Ajax（day03）
Yan9_9的博客
03-23 3556
同源策略和跨域 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p><input type="text"></p> <button>get请求</button> <div class="box">
kettle开发篇-JavaScript脚本-Day31
qq_29061315的博客
12-29 3745
前言： 昨天我们讲了映射，映射可以帮我来将转换进行封装便于我们的重用，今天我们来讲解下JavaScript脚本，可以通过JavaScript脚本来处理一些复杂的转换问题。JavaScript脚本就是使用JavaScript语言通过代码编程来完成对数据流的操作。JS中有很多内置函数，可以在编写JS代码时查看。 一、JavaScript脚本 JavaScript脚本就是使用JavaScript语言...
day12_javaweb_javascript_day12-xml_energy7fo_
10-03
【标题】"day12_javaweb_javascript_day12-xml_energy7fo_" 提供的资源包主要涵盖了JavaWeb开发中的JavaScript和XML技术，是作者个人学习过程中的一个阶段性的总结，虽然标注为“day2”，但可以推测整个系列应该包含...
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
day08-HTTP&Tomcat&Servlet
10-28
* Ajax、Vue、ElementUI：都是前端技术栈，用于构建响应式用户界面。 JavaWeb 技术栈包括了 B/S 架构、静态资源、动态资源、数据库、HTTP 协议、Web 服务器、Servlet 等几个方面，是 Java 技术来解决相关 web ...
vito的Web前端学习_JavaScript_Day1
03-04
在“vito的Web前端学习_JavaScript_Day1”这个课程中，我们将会深入探讨JavaScript的基础概念和核心特性，为日后的Web开发打下坚实的基础。 首先，我们要理解JavaScript与ECMAScript的关系。JavaScript是基于...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 243
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 100
vue 自定义滚动条同步拖动（移动端）
什么是防抖和节流？如何理解它们并在不同的场景条件下灵活运用？
Vinca@的博客
07-08 878
防抖（Debouncing）和节流（Throttling）是两种常见的性能优化技术，常用于控制某些操作（例如事件处理器）的频率，从而减少资源消耗并提高性能。防抖：在事件停止触发后的指定时间内执行函数。适用于需要等用户停止操作后再处理事件的场景。节流：在指定时间间隔内最多执行一次函数。适用于需要限制函数执行频率的场景。滚动停止后的操作：使用防抖。滚动过程中的持续操作：使用节流。根据具体需求选择适合的优化技术可以有效提高应用性能和用户体验。
Webkit简介以及工作流程
读心悦
07-10 308
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
lightchart 和百度echarts 有什么区别, 各自优势是什么
huanghm88的专栏
07-08 206
总体而言，Lightchart和百度Echarts都是强大的图表库，选择使用哪个取决于具体的需求和个人偏好。如果您对界面简洁和定制化有较高要求，可以选择Lightchart；社区活跃：百度Echarts拥有广泛的用户群体和开发者社区，用户可以通过社区获取到丰富的文档、教程和示例，解决问题和获取帮助。易于使用：Lightchart提供了方便易用的API和丰富的文档和示例，使用户能够快速上手并灵活使用图表库。成熟稳定：百度Echarts已经发布了多个版本，经过了长时间的发展和优化，具有较高的稳定性和可靠性。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
cc1314_工作、学习有感
07-12 182
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 304
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 158
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
什么是vue的计算属性
weixin_56187723的博客
07-12 169
Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。
获取当前时间 2023-06-02 17:02 前端代码实现
06-03
在前端代码中，你可以使用 JavaScript 获取当前时间并显示在页面上。以下是一个简单的示例： ```html <!DOCTYPE html> 当前时间 当前时间是: <p id="time"></p> // 获取当前时间 var now = new Date...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值