js查找元素和设置dom节点属性和样式浅析

以前一直做PC端的web开发，习惯了使用jquery操作文档的dom节点和选择元素，如今转到移动端开发更多的用到了原生js，也用到了hbuilder 的mui框架来开发移动App。但是发现mui框架的文档介绍里并没有关于类似jquery那种定位dom节点，选择器和修改属性和样式的Api。我们知道，原生js代码是在各种设备和浏览器中兼容性最好的，于是这两天研究了javascript操作dom节点属性和定位元素的一些方法。记录下来供自己以后需要查阅以及供需要的同行参考。所有方法都是基于当前文档对象document而来的。

html代码贴上如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!--<link href="../../../css/mui.min.css" rel="stylesheet" />-->
		<link href="../../../static/fonts/iconfont.css" rel="stylesheet"/>
		<link href="../../../static/css/reset.css" rel="stylesheet"/>
		<link href="../../../static/css/main.css" rel="stylesheet"/>
		<link  href="../css/login.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="content-box">
			<div class="loin-area">
				<i class="login-icon"></i>
			</div>
			<form id='login-form' class="login-form-box">
				<div class="custom-input-row">
					<i class="iconfont icon-icon-test3" style="color:#fff"></i>
					<input id='userAccount' type="text" class="custom-input input-text" placeholder="请输入账号">
				</div>
				<div class="custom-input-row">
					<i class="iconfont icon-icon-test9" style="color:#fff"></i>
					<input id='loginPwd' type="password" class="custom-input input-password" placeholder="请输入登录密码">
					<i class="iconfont icon-icon-test2" style="color:#fff;"></i>
				</div>
				<div class="custom-input-row">
					<i class="iconfont icon-yanzhengma" style="color:#fff"></i>
					<input id='verifyCode' type="text" class="custom-input input-message" placeholder="请输入验证码">
					<button class="btn-send-message" id="sendMessageCode">获取验证码</button>
				</div>
			</form>
			<div class="custom-row forget-password">
				<div id="forget-loginPwd" class="forget-loginPwd">忘记登录密码</div>
			</div>
			<div class="custom-row error-tip">
				<span id="errorTip" class="errorTip"></span>
			</div>
			<div class="custom-row login">
				<button id='login' class="btn-login">登录</button>
			</div>
			<div class="custom-row change-lang" >
				<div id="changeLang" class="changeLang">Change English</div>
			</div>
		</div>
		<script src="../../../config/config.js"></script>
		<script src="../../../static/js/mui.min.js"></script>
		<script src="../../../static/js/mui.enterfocus.js"></script>
		<script src="../../../static/js/app.js"></script>
		<script src="../../../static/js/md5.min.js"></script>
		<script src="../../../static/js/common.js"></script>
		<script src="../js/login.js"> </script>
	</body>
</html>

(一) 根据选择器查找元素

这里重点介绍一下document.querySelector（args）和document.querySelectorAll（args）方法。

document.querySelector和document.querySelectorAll方法能根据id，className, tagName, 以及元素之间的关系精确定位到要查找的元素。前者返回找到的第一个dom对象，后这返回找到的所有NodeList对象。只要是NodeList对象就有querySelector和querySelectorAll方法,可进一步缩小查找范围。

其中 NodeList与dom对象的最大区别是NodeList的元素对象（选择器）具可通过控制台打印显示一系列的属性和绑定方法

其部分属性如下截图所示有（详细方法可通过在控制台输入document.querySelectorAll("queryStr")查看），项目开发中一些操作dom节点API通过控制台打印可查到：

在浏览器控制台输入document.querySelector('#login-form')回车后返回id为login-form的dom对象

在控制台中输入document.querySelectorAll('#login-form')时返回一个NodeList对象，相当于jquery里的$("#id")查找元素

(1) 根据元素id查找元素的3种方法

document.getElementById("id") ;
document.querySelector('#id')；
document.querySelectorAll('#id')[0]；

以上三种方法均返回dom元素

（2）根据className查找

document.getElementByClassName（"className"）返回NodeList;
document.querySelector(".className")返回dom元素;
document.querySelectorAll(".className") 返回NodeList

在控制台输入 var $form = document.getElementById('login-form'); $form.querySelector('.custom-input-row');回车后的得$form对象查到的第一个类名为custom-input-row的dom对象

(3) 根据标签名查找

document.getElementByTagName(tagName)
document.querySelectorAll（tagName） HTMLCollection 对象
document.querySelector(tagName) 则返回dom对象

(4) 根据相互关系查找

查找父节点: el.parentNode或el.parentElement;
查找子节点：el.childNodes或el.children;
查找前一个兄弟节点: el.previousElementSibling或nextSibling;
查找后后一个兄弟节点：el.nextSibling或el.nextElementSibling ;

(5) 根据多重关系查找

查找登录form表单下type类型为password的input元素

document.querySelectorAll("#login-form input[type='password']")

查找 form表单下具有icon-icon-test3类的<i>标签

(二） dom节点修改属性和样式API

（1）设置属性：el.setAttribute(key,value); 获取属性： el.getAttribute(key); key为字符窜

（2）修改样式: el.style.key = value; 如设置背景和颜色 el.style.color="#333"; el.style.backgroundColor="#FFF"。

(3) 增加类 el.classList.add(className) ; 删除类 el.calssList.remove(className); 这一方法相当于jquery里的$('selector').addClass(className) 和 $('selector').removeClass(className)

js查找元素和设置dom节点属性和样式浅析

猜你喜欢