原生js 設置html內容,原生JS操作DOM

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

html例子结构

1234

2456

789

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

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[i].style.color="green";

}

2.var two=document.getElementsByClassName("two")

for(var i=0;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[i].addEventListener("click",function(){

console.log(this.innerHTML);

for(var j=0;j

removeClass(two[j],'active')

}

addClass(this,'active');

})

}