原生JS操作DOM-白红宇

html例子结构

操作一个类，拿到类的属性，并进行控制

var one = document.querySelector('.one');one.style.color="blue";复制代码

操作所有相同的类，有两种方法。

1.getElementsByClassName()2.querySelectorAll()复制代码

因为js获得的节点中返回所有类是一个数组，所以要对其进行循环控制用循环长度的方式

1.var two = document.querySelectorAll('.two');		for(var i=0;i

getElementsByClassName的性能比querySelectorAll好的多

getElementsBy返回的是Live Node List

querySelectorAll返回的是Static Node List

querySelectorAll可以用数组循环的方式

var two = document.querySelectorAll('.two'); two.forEach(function(item){ item.style.color="green"; })

操作父元素 ele.parentElement

操作子元素 ele.children

查询子元素 ele.getElementsByClassName ele.getElementsByTagName

当前元素的第一个/最后一个子元素节点 ele.firstChild ele.lastChild

下一个/上一个兄弟元素节点 ele.nextSibling; ele.previousSibling

获取节点属性

el.getAttribute('class')el.getAttribute('id')复制代码

设置节点属性

ele.setAttribute('class','sss');复制代码

判断、移除属性

el.hasAttribute('class'); el.removeAttribute('class');复制代码

获取文本值.innerHTML

js添加类

var one = document.getElementById("oneId");  one.classList.add("mystyle","ssss");   one.classList.remove("mystyle"); var twoClick = document.querySelectorAll('.twoClick');    for (var i = 0; i < twoClick.length; i++) {		    	    	twoClick[i].addEventListener('click',function(){    		this.classList.add("addclass");	})}复制代码

addClass hasClass removeClass toggleClass

function hasClass(obj, cls) {return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));}function addClass(obj, cls) {      if (!this.hasClass(obj, cls)) obj.className += " " + cls;  }    function removeClass(obj, cls) {      if (hasClass(obj, cls)) {          var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');          obj.className = obj.className.replace(reg, ' ');      }  }    function toggleClass(obj,cls){      if(hasClass(obj,cls)){          removeClass(obj, cls);      }else{          addClass(obj, cls);      }  }  复制代码

实现点击当前，其他删除,再次循环点击类的所有数组

var two = document.getElementsByClassName('two');	for(var i=0;i