1、关于class的操作
IE9以下的getElementsByClassName()方法兼容问题
//<p>Hello World</p>
//<p class="a">增加样式 World</p>
//<ul id="ul"></ul>
function getClass(classA){
if (document.getElementsByClassName) {
return document.getElementsByClassName(classA)
}else{
//兼容IE9一下
var getClassArr=[];
var nodeArr=document.getElementsByTagName('*');
for(let i=nodeArr.length-1;i>=0;i--){
if(nodeArr[i].className.indexOf(classA)>=0){
getClassArr.push(nodeArr[i]);
}
}
return getClassArr;
}
}
console.log(getClass('a')[0].innerText);
注意：
1、以上兼容方法性能会下降
2、getElementsByClassName()得到的为HTMLCollection动态合集，自己写的兼容方法为一个数组，不是动态合集。
3、通过ID获取DOM节点比通过Class获取节点
HTML DOM classList 属性
classList 属性返回元素的类名；作为 DOMTokenList 对象。该属性用于在元素中添加，移除及切换 CSS 类。classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它
//HTML
//<div id="bar" class="ceshi class1"></div>
var bar=document.getElementById('bar');
//添加类
bar.classList.add('xinzeng','xinzeng2');
//移除类
bar.classList.remove('class1','xinzeng2');
console.log(bar.classList.contains('fc_black'));//false
console.log(bar.classList.contains('ceshi'));//true
console.log(bar.classList.item(1));//xinzeng
注意：
当增加多个类时，会将所有class增加完成后，一次进行渲染；而非多次渲染。因为渲染器和解释器是只能一个在工作，所以先一次性渲染完成。
//<style>
//.bg_color{ background:#ff0;}
//.fc_red{ color:#f00;}
//.fc_green{ color:green;}
//</style>
//<button onclick="clickToggle()">toggle</button>
//<button onclick="clickToggle(1)">红色</button>
//<button onclick="clickToggle(2)">绿色</button>
//<div id="bar" class="ceshi class1">测试</div>
<script>
function clickToggle(type){
var bar=document.getElementById('bar');
if(type==1){
bar.classList.toggle('fc_red',true);
bar.classList.toggle('fc_green',false);
}else if(type==2){
bar.classList.toggle('fc_red',false);
bar.classList.toggle('fc_green',true);
}else{
bar.classList.toggle('bg_color');
}
}
</script>
2、关于焦点的操作
activeElement 属性返回文档中当前获得焦点的元素
为元素设置焦点，可以使用 element.focus() 方法
可以使用 document.hasFocus() 方法来查看当前元素是否获取焦点
//<body onclick="clickElement()">
//<button>toggle</button>
//<button>红色</button>
//<button>绿色</button>
//<input type="text" placeholder="请输入内容" />
//<p>1111</p>
//</body>
<script>
window.onload = function(){
var x = document.activeElement.tagName;
console.log(x); //页面刚加载完，获取焦点的元素为BODY，如果未加载完，x为null
}
function clickElement(){
var x = document.activeElement.tagName;
console.log(x); //点击页面上的其他元素，则会返回对应的元素标签，button和input则返回BUTTON和INPUT，其他则返回BODY
}
</script>
