以前一直做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)