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() 是唯一一个错有连蓝旗都支持的方法,因此还是这个方法最常用