第二十六节：class和焦点的操作管理

最新推荐文章于 2022-10-21 23:11:30 发布

静静小白

最新推荐文章于 2022-10-21 23:11:30 发布

阅读量299

点赞数

分类专栏： js学习整理文章标签： javascript 原型模式前端

本文链接：https://blog.csdn.net/qq_43628158/article/details/123047403

版权

js学习整理专栏收录该内容

30 篇文章 7 订阅

订阅专栏

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>