原生javascript控制兄弟节点

最新推荐文章于 2023-12-14 11:20:07 发布
最新推荐文章于 2023-12-14 11:20:07 发布
阅读量2.1k 收藏
点赞数
分类专栏： javascript 文章标签： javascript css3 querySelector this
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a562550212/article/details/51791358
版权

可能这个东西不是很难，但是我还是花了一些功夫，主要目的是判断input的输入，来动态显示input的兄弟节点span的显示内容。

核心方法就是“当前元素寻找父节点然后再通过选择器查找对应节点”;

this.parentNode.querySelector("css seletor").innerText;

上代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html{-webkit-user-select: none;-user-select: none;}
		body,input,div{font-family: "微软雅黑";}
		.login{width: 60%;margin: 40px auto 30px;}
		.login_panel{width: 80%;border-radius: 3px;border: 1px solid #B1B1B1;margin: 10px auto 10px;}
		.login_panel h4{text-align: center;}
		.inputBox{display: block;margin: 10px auto 10px 30px;text-align: left;}
		.inputBox span:last-child{font-size: 10px;color: #EE3333;}

	</style>
	<script>
		window.οnlοad=function(){
			var username = document.querySelector("input[name=username]");
			var email = document.querySelector("input[name=email]");
			var pwd = document.querySelector("input[name=pwd]");

			username.οnblur=function(){
				if(username.value==""){
					this.parentNode.querySelector("input+span").innerText="账号不能为空";
				}else{
					this.parentNode.querySelector("input+span").innerText="";
				}
			}

			email.οnblur=function(){
				if(email.value==""){
					this.parentNode.querySelector("input+span").innerText="账号不能为空";
				}else{
					var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
					flag = pattern.test(email.value);
					if(!flag){
						this.parentNode.querySelector("input+span").innerText="邮箱格式不正确";
						email.value="";
					}else{
						this.parentNode.querySelector("input+span").innerText="";
					}
				}
			}

			pwd.οnblur=function(){
				var pwd_pat = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
				flag = pwd_pat.test(pwd.value);
				if(pwd.value==""){
					this.parentNode.querySelector("input+span").innerText="账号不能为空";
				}else if(!flag){
					this.parentNode.querySelector("input+span").innerText="密码不符合要求";
					pwd.value="";
				}else{
					this.parentNode.querySelector("input+span").innerText="";
				}
			}

			/*继承方法*/
			/*function judge(obj){
				console.log(obj.name);
				this.οnblur=function(){
					if(obj.value=""){
						this.parentNode.querySelector("input+span").innerText="账号不能为空";
					}else if(obj.name==email){
						var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
						var flag = pattern.test(email.value);
						if(!flag){
							this.parentNode.querySelector("input+span").innerText="邮箱格式不正确";
							email.value="";
						}else{
							this.parentNode.querySelector("input+span").innerText="";
						}
					}else if(obj.name==pwd){
						var pwd_pat = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
						var flag = pwd_pat.test(pwd.value);
						if(!flag){
							this.parentNode.querySelector("input+span").innerText="密码不符合要求";
							email.value="";
						}else{
							this.parentNode.querySelector("input+span").innerText="";
						}
					}
				}
			}*/
		}
		
	</script>
</head>
<body class="login">
	<div class="login_panel">
		<h4>用户登录</h4>
		<div class="login_username inputBox">
			<span>用户名：</span>
			<input type="text" name="username" placeholder="请输入您的账号" οnblur="judge(this)">
			<span></span>
		</div>
		<div class="login_mail inputBox">
			<span>邮箱：</span>
			<input type="mail" name="email" placeholder="您的邮箱" οnblur="judge(this)">
			<span></span>
		</div>
		<div class="login_pwd inputBox">
			<span>密码：</span>
			<input type="password" name="pwd" placeholder="您的密码" οnblur="judge(this)">
			<span></span>
		</div>
	</div>
</body>
	
</html>
最后有点美中不足的就是没有把它继承为一个函数，供三个input调用。如果有大神知道的话，跪求指点。
鬼谷中妖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js兄弟节点
香格里拉&的博客
01-14 3098
用到的方法: - nextSibling: 下一个兄弟节点 - previousSibling: 上一个兄弟节点 - previousElementSibling: 上一个兄弟元素节点 - nextElementSibling: 下一个兄弟元素节点 <body> <div id="box"> <div>这是一个区域1</div> &l...
JavaScript实现获得所有兄弟节点的方法
08-02
主要介绍了JavaScript实现获得所有兄弟节点的方法,实例分析了javascript节点遍历的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Javascript 选取元素的兄弟节点、父节点、子节点
subsistent的博客
09-09 2017
来获取前一个兄弟节点。需要注意的是，这些属性返回的节点可能是文本节点或注释节点，而不仅仅是元素节点。这些方法可以在 JavaScript 中使用，通过操作 DOM 来选择元素的兄弟节点。属性来访问元素的下一个兄弟节点和前一个兄弟节点。例如，如果有一个元素节点。这两个属性只返回元素节点，而不包括文本节点或注释节点。如果只想选择元素节点作为兄弟节点，可以使用。来获取下一个元素节点作为兄弟节点，使用。如果元素没有父节点（比如根节点），那么。来获取前一个元素节点作为兄弟节点。来获取下一个兄弟节点，使用。
JS兄弟节点的获取
tong_struggller的博客
08-14 2465
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;兄弟节点&lt;/title&gt; &lt;/head&gt; &lt;script&gt; win
js获取父节点、子节点、兄弟节点
最新发布
转身浮生
12-14 511
js获取父节点、子节点、兄弟节点
一些常用且实用的原生JavaScript函数.docx
07-09
原生JavaScript中没有提供直接获取元素在父节点中索引的方法，但可以通过编写自定义函数实现： ```javascript function getIndex(element) { var children = element.parentNode.children; for (var i = 0; i ;...
javascriptDOM详解
07-21
4. **遍历DOM**：通过节点的`childNodes`属性可以获取子节点，`parentNode`获取父节点，`previousSibling`和`nextSibling`获取相邻的兄弟节点。`querySelector()`和`querySelectorAll()`方法则提供了更灵活的选择器...
课题-js和jquery获取父级元素、子级元素、兄弟元素的方法.pdf
11-11
接下来，我们可以使用`childNodes`来获取所有子节点，`parentNode`获取父节点，`nextSibling`和`previousSibling`分别获取当前元素的下一个和上一个兄弟节点，`firstChild`和`lastChild`则分别获取第一个和最后一个...
jQuery学习之DOM节点的插入方法总结
10-20
`append()` 方法用于将指定的内容追加到每个匹配的元素内部，类似于原生的`appendChild`方法。而`appendTo()` 方法则是将指定的元素追加到目标元素内部，与`append()`相反，它是将目标元素追加到内容元素内部。以下...
经典之作javascript dom编程艺术源码
12-02
通过学习并实践《JavaScript DOM编程艺术》中的源码，开发者能够掌握原生JavaScript对DOM的精细控制，从而提升网页交互的灵活性和性能。同时，理解并熟练运用这些知识点，对于开发高效、响应式的Web应用至关重要。在...
js弹框带传值父窗口给子框_iframe-父子-兄弟页面相互传值(jq和js两种方法)
weixin_39700215的博客
12-19 606
参考文章：http://blog.csdn.net/u013299635/article/details/78773207http://www.cnblogs.com/xyicheng/archive/2010/02/26/1674017.html父窗口代码1. 父窗口调用子窗口中的方法test方法//jsdocument.getElementById("frame").contentWindo...
原生JS获取父节点，兄弟节点的方式
m0_46380179的博客
04-04 1791
原生JS各个节点的方式 在这里我先创建了四个元素 下面展示一些 `html片段 <ul id="ul" > <li id="li1">节点一号选手</li> <li id="li2">节点二号选手</li> <li id="li3">节点三号选手</li> ...
JS 兄弟元素和兄弟节点
weixin_45974687的博客
03-15 2990
获取兄弟节点和兄弟元素 1.获取兄弟节点 : 上一个节点 下一个节点 //body内容 <ul id="ul"> wwwwww <!-- 我是注释 --> <li>我是li标签1</li> <li id="li2">我是li标签2</li> <li>我是li标签3</li> <...
8、节点操作
weixin_45998542的博客
12-16 939
8、节点操作 1. 节点概述 ​ 网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 ​ HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。 ​ 一般节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。 2. 节点层级 ​ 利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。 ​
scss中的相邻兄弟选择器，less中的相邻兄弟选择器， +选择器
imkaifan的博客
01-19 2753
scss中的相邻兄弟选择器，less中的相邻兄弟选择器， +选择器
十分钟掌握LESS
Akrisllen的博客
02-28 578
简介 CSS使用中有时可能令人沮丧，尤其是当项目包含几千行代码的时候。仅仅改变一个颜色，也可能需要你反复进行搜索，复制粘贴，维护CSS变得枯燥。幸运的是Less Sass Stylus等CSS预处理工具的出现，使这些问题得到解决。 变量，可轻松定义或改变数值（CSS将会添加这一功能） 动态计算值（CSS中虽然新添了calc，但是只能用于计算长度） Mixin，合并再利用已有风格 函数，可以计...
原生JS获取父节点、子节点、兄弟节点
热门推荐
LLL_liuhui的博客
03-26 1万+
1、访问父节点parentNode : Node 类型，返回指定节点的父节点,如果指定节点没有父节点，则返回 null。<div id="box"> <p id="hello">hello world!</p> </div> <script> var hello=document.getElementById("hello"); console.log(hello.
JQ获取上级、同级、下级元素
weixin_30470857的博客
03-10 977
------------------------------------------------------------------------------jQuery---------------------------------------------------------------------- 1.父级： jQuery.parent(expr) 找父亲节点，可以传入expr进行...
原生Javascript和jQuery获取元素归纳 document.getElementById,document.querySelector(““) 子节点 父节点 兄弟节点
hangshao_123的博客
11-03 2349
1. var div = document.querySelector("#box") var div = document.getElementByID("box") var div = document.getElementByClass("box")
原生Javascript
05-28
2. 更好的性能：原生 JavaScript 能够更好地控制代码的执行过程，避免使用第三方库或框架所带来的性能损失。 3. 更好的浏览器兼容性：原生 JavaScript 的 API 在各种浏览器中是通用的，而使用第三方库或框架时可能...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值