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

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

html代码贴上如下

	
		
		
		
		
		
		
		
		
	
	
		

			

				
			
			

				

					
					
				
				

					
					
					
				
				

					
					
					获取验证码
				
			
			

				
忘记登录密码
			
			

				
			
			

				登录
			
			

				
Change English
			
		
		
		
		
		
		
		
		
	

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

     这里重点介绍一下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类的标签

    

 

(二） 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)