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');
})
}
复制代码