原生JS操作DOM

html例子结构

<div class="one">
	<p>1234</p>
</div>
<div class="two">
	<p>2456</p>
</div>
<div class="two">
	<p>789</p>
</div>
复制代码

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

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<two.length;i++){
			two[i].style.color="green";
		}


2.var two=document.getElementsByClassName("two")
		 for(var i=0;i<two.length;i++){
		 	two[i].style.color="red";
		}
复制代码

• 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<two.length;i++){
		two[i].addEventListener("click",function(){
			console.log(this.innerHTML);
			for(var j=0;j<two.length;j++){
				removeClass(two[j],'active')
			}
			addClass(this,'active');
		})
	}
复制代码