querySelector
该方法接受一个css选择符,如果没有匹配的元素则返回null。
元素遍历
Element Traversal API为Dom元素添加了5个属性:
childElementCount firstElementChild lastElementChild previousElementSibling nextElementSibling
HTML5中
classList属性:
该属性可以运用4个方法:
add contains(表示列表中是否存在给定的值,存在返回true,否则返回false) remove toggle(如果列表中给定值则删除,没给定则添加)
<html>
<style>
.node2{
color:red
}
</style>
<body>
<div class="node1 node2">123</div>
</body>
<script type="text/javascript">
var dothing=function (){
var object=document.querySelector(".node1")
object.classList.remove("node2")
}
setTimeout(dothing,5000)
</script>
</html>
当不存在classList的时候可以进行添加
if (!("classList11" in document.documentElement)) {
Object.defineProperty(HTMLElement.prototype, 'classList11', {
get: function() {
var self = this;
function update(fn) {
return function(value) {
var classes = self.className.split(/s+/g),
index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(" ");
}
}
return {
add: update(function(classes, index, value) {
if (!~index) classes.push(value);
}),
remove: update(function(classes, index) {
if (~index) classes.splice(index, 1);
}),
toggle: update(function(classes, index, value) {
if (~index)
classes.splice(index, 1);
else
classes.push(value);
}),
contains: function(value) {
return !!~self.className.split(/s+/g).indexOf(value);
},
item: function(i) {
return self.className.split(/s+/g)[i] || null;
}
};
}
});
}
焦点管理
document.activeElement 属性始终会引用DOM中当前焦点的元素
document.hasFocus()方法用于确定文档是否获得了焦点
插入文本
innerText属性,操作元素中包含的所有的文本内容
兼容性
function getInnerText(element)
{
return (typeof element.textContent=="string")?
element.textContent:element.innerText;
}
function setInnerText(element,text)
{
if(typeof element.textContent == "string")
{
element.textContent = text;
}
else
{
element.innerText = text;
}
}
滚动
scrollIntoView() 是唯一一个错有连蓝旗都支持的方法,因此还是这个方法最常用