DOM扩展
方法 | 含义 |
---|---|
querySelector() | 接受一个CSS选择符返回与该模式匹配的第一个元素,如果没有返回null |
querySelectorAll() | 接受CSS选择符返回一个NodeList的实例 |
matchesSelector() | 接受CSS选择符,如果与调用该方法的元素相匹配返回true,否则返回false |
childElementCount属性 | 返回子元素的个数 |
firstElementChild | 返回第一个子元素 |
lastElementChild | 指向最后一个子元素 |
previousElementSibling | 指向前一个同辈元素 |
nextElementSibling | 指向后一个后辈元素 |
document.getElementsByClassName() | 传入class特性值返回包含的NodeList |
classList | add(val)为元素的class特性添加val,cintains(val)判断元素的class中师傅包含val,remove(val)移除元素的class中的val,toggle(val)如果列表中已存在给定值,删除,如果不存在添加 |
document.activeElement | 指向会引用DOM中当前获得了焦点的元素 |
HTMLDocument
属性和方法 | 含义 |
---|---|
readyState | “loading”正在加载文档,”complete”已经加载完文档 |
document.compatMode | “CSS1Compat”标准模式,”BackCompat”混杂模式 |
document.head | 引用文档元素 |
charset | 字符集属性 |
innerHTML | 返回与调用元素的所有子节点对应的HTML标记,赋值会根据指定值创建DOM树然后替换元素的原有子节点 |
outerHTML | 与innerHTML基本相同 |
insertAdjacentHTML() | 接受两个参数:插入位置和要插入的HTML文本,第一个参数必须为:1.”beforebegin”,在当前元素之前插入一个紧邻的同辈元素2”afterbegin”在当前元素之下插入一个新的子元素或在第一个子元素之前插入新的子元素3。”beforeend”在当前元素之下插入一个新的子元素或在最后一个子元素之后插入新的子元素4.”afterend”在当前元素之后插入一个紧邻的同辈元素 |
scrollIntoView() | 传入true,调用该方法的元素在滚动浏览器时元素顶部与视口平行,传入false调用元素尽可能全部出现在视口中 |
contains() | 测试某个元素是否为调用元素的后代,返回1表示无关,2之前,4之后,8包含,16被包含 |
innerText | 读取值为子元素的文本拼接,赋值删除所有子节点插入文本 |
outerText | 与innerText基本没区别 |
scrollIntoViewIfNeeded(flag) | 当元素不可见时,传入true表示元素出现在视口中部 |
scrollBylines(lineCount) | 将内容滚动指定行高 |
scrollByPages(pageCount) | 将元素内容滚动指定页面高度 |
DOM2和DOM3
扩展DOM API满足操作XML的需求,提供更好的错误处理及特性检测
//是否支持
var supportsDOM2Core = document.implementation.hasFeature("Core", "2.0");
var supportsDOM3Core = document.implementation.hasFeature("Core", "3.0");
var supportsDOM2HTML = document.implementation.hasFeature("HTML", "2.0");
var supportsDOM2Views = document.implementation.hasFeature("Views", "2.0");
var supportsDOM2XML = document.implementation.hasFeature("XML", "2.0");
DocumentType
属性 | 含义 |
---|---|
publicId | 文档声明中信息 |
systemId | 文档声明中的信息 |
internalSubset | 文档声明的额外定义 |
Document
属性或方法 | 含义 |
---|---|
importNode() | 与cloneNode()类似 |
defaultView | 指向拥有给定文档的窗口 |
Node
属性和方法 | 含义 |
---|---|
isSupporded() | 确定当前节点具有什么能力 |
框架变化
属性和方法 | 含义 |
---|---|
contentDocument | 指向包含框架的文档对象 |
样式
//是否支持DOM2的css能力
var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");
//是否支持操作样式表
var supportsDOM2StyleSheets = document.implementation.hasFeature("StyleSheets", "2.0");
元素对应style属性,这个属性是CSSStyleDeclaration的实例包含HTML特性指定的所有样式的信息,不包含与外部样式表或嵌入样式表经层叠而来的样式,也就是说只包含自身的style属性,css的含-的样式名要转换为驼峰式才能访问,其中float为cssFloat(IE只支持styleFloat),赋值改变样式
style的属性和方法
属性或方法 | 含义 |
---|---|
cssText | css代码,通过该属性批量插入样式,重写整个style,以前的style会丢失 |
length | css属性数量 |
parentRule | css信息的cssRule对象 |
getPropertyCssValue(propertyName) | 返回给定属性值的CSSValue对象,返回对象包含两个对象cssText指定属性字符串和cssValueType一个数值常量,表示类型P315第二行 |
getPropertyPriority(propertyName) | 如果给定属性使用!important(给定属性优先)返回import,否则返回”“ |
getPropertyValue(propertyName) | 返回给定属性的字符串值 |
item(index) | 返回给定位置的CSS属性的名称 |
removeProperty(propertyname) | 从样式表中删除给定样式 |
setProperty(propertyName,value,priority) | 将给定属性设置为相应值,最后一个为优先标志 |
document.defaultView.getComputedStyle(元素对象,null)返回渲染后的CSS样式,也就是浏览器呈现的样式
IE中具有style的元素还有currentStyle属性这个属性是CSSStyleDeclaration的实例,是计算后的样式
操作样式表 CSSStyleSheet
表示和
function getStyleSheet(element){
return element.sheet || element.styleSheet;
}
//取得第一个<link/>元素引入的样式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStylesheet(link);
cssRule
表时样式表中的每一条样式
属性和方法 | 含义 |
---|---|
cssText | 返回整条规则对应的文本 |
parentRule | 如果当前规则是导入的规则,这个属性引用的就是导入规则 |
parentStyleSheet | 当前规则所属的样式表 |
selectorText | 房钱规则选择符文本 |
style | 一个CSSStyleDeclaration,可通过设置和取得特定的样式表 |
type | 值为1 |
div.box {
background-color: blue;
width: 100px;
height: 200px;
}
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得规则列表
var rule = rules[0]; //取得第一条规则
alert(rule.selectorText); //"div.box"
alert(rule.style.cssText); //完整的CSS 代码
alert(rule.style.backgroundColor); //"blue"
alert(rule.style.width); //"100px"
alert(rule.style.height); //"200px"
sheet.insertRule(“body { background-color: silver }”, 0); //DOM 方法
元素大小
属性 | 含义 |
---|---|
offsetHeight | 元素在垂直上方的控件大小 |
offsetWidth | 元素水平方向大小 |
offsetLeft | 元素的左外边框至包含元素的左边框之间的像素距离 |
offsetTop | 元素的上外边框至包含元素的上内边框之间的像素距离 |
clientWidth | 元素内容区宽度 |
clientHeight | 元素内容区高度 |
scrollHeight | 在没有滚动条的情况下,元素内容的总高度 |
scrollWidth | 在没有滚动条的情况下,元素内容的总宽度 |
scrollLeft | 被隐藏在内容区域左侧的像素数,用来设置改变元素滚动位置 |
scrollTop | 被隐藏在内容区域上方的像素数,用来设置改变元素滚动位置 |
getBoundingClientRect()返回矩形对象有left,top,right和bottom,给出元素相对于视口位置
//跨浏览器
function getBoundingClientRect(element){
var scrollTop = document.documentElement.scrollTop;
var scrollLeft = document.documentElement.scrollLeft;
if (element.getBoundingClientRect){
if (typeof arguments.callee.offset != "number"){
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
} else {
var actualLeft = getElementLeft(element);
var actualTop = getElementTop(element);
return {
left: actualLeft - scrollLeft,
right: actualLeft + element.offsetWidth - scrollLeft,
top: actualTop - scrollTop,
bottom: actualTop + element.offsetHeight - scrollTop
}
}
}
遍历
NodeIterator和TreeWalker
基于给定起点对DOM结构执行深度优先的遍历操作
//支持情况
var supportsTraversals = document.implementation.hasFeature("Traversal", "2.0");
var supportsNodeIterator = (typeof document.createNodeIterator == "function");
var supportsTreeWalker = (typeof document.createTreeWalker == "function");
document.createNodeIterator()
接受4个参数
root,搜索起点的树的节点
whatToShow,要访问那些节点的数字代码,p328
filter,NodeFilter对象或者表示接受还是拒绝某种特性节点的函数,
entityReferenceExpansion,布尔值,表示是否扩展实体引用
whatToShow
TreeWalker是NodeIterator的一个更高级的版本
方法 | 含义 |
---|---|
parentNode() | 遍历到当前节点的父节点 |
firstChildren() | 遍历到当前节点的第一个子节点 |
lastChildren() | 遍历到当前节点的最后一个子节点 |
nextSibling() | 遍历到当前节点的下一个同辈节点 |
previousSibling() | 遍历到当前节点的上一个同辈节点 |
document.createTreeWalker()
与document.createNodeIterator()相同
范围
document.createRange();通过范围可以选择文档的一个区域,设置位置确定范围,对范围内容执行操作,每个范围都是Rang类型的实例
属性 | 含义 |
---|---|
startContainer | 范围起点节点包含 |
startOffset | 范围在startComtainer中的起点偏移量,如果startContainer为文本节点注释或CDATA节点则为范围起点之前跳过的字符数量否则为范围中的第一个子节点的索引 |
endContainer | 范围终点 |
endOffset | 终点偏移量 |
commonAncestorContainer | startContainer 和endContainer 共同的祖先节点在文档树中位置最深的拉个 |
var rang = document.createRang();
rang.selectNode(document.getElementById(“p1”));
方法 | 含义 |
---|---|
setStartBefore(refNode) | 将范围的起点设置refNode之前包含refNode |
setStartAfter(refNode) | 将范围的起点设置为refNode之后不包含 |
setEndBefore(refNode) | 将范围的终点设置在ref之前不包含 |
setEndAfter(refNode) | 将范围的终点设置在refNode之后包含 |
deleteContents() | 删除文档中的内容 |
extractContents() | 移除文档范围内容返回文档片段 |
cloneContents() | 复制文档片段 |
extractContents() | 返回文档片段 |
collapse() | 折叠范围,true折叠到起点,false折叠到终点 |
collapse | 是否折叠 |
compareBoundaryPoints() | 确定范围是否有公共边界 |
cloneRange() | 复制范围 |
detach() | 解除范围,从而设置为null以便垃圾回收 |