爱网站关键词查询工具,星夜智能建站平台,石家庄房和城乡建设部网站,什么样的公司需要做网站只写一些DOM2和DOM3中我目前能用到的点#xff0c;更多细节会以后补上 一.DOM变化 1.DOM2级为不同的DOM类型引入了一些与XML命名空间有关的方法#xff08;对HTML文档没有实际意义#xff09;。 2.定义了以编程方式创建Document实例的方法 3.支持创建DocumentType对象 二.样…只写一些DOM2和DOM3中我目前能用到的点更多细节会以后补上 一.DOM变化 1.DOM2级为不同的DOM类型引入了一些与XML命名空间有关的方法对HTML文档没有实际意义。 2.定义了以编程方式创建Document实例的方法 3.支持创建DocumentType对象 二.样式 测试浏览器是否支持DOM2级定义的CSS能力 var supportsDOM2CSS2document.implementation.hasFeature(“CSS2”,2.0”); 1.访问元素的内联样式 HTML元素的style特性中的信息分别对应JS中style对象的属性。这个style对象只包含内联样式的信息。使用短划线如background-image的CSS属性名要转换成驼峰大小写形式才能通过JS来访问style.backgroundImage。 有一个特殊的CSS属性float属性要转换成cssFloatdiv idmyDiv stylebackground-color:blue; width:10px; height:20px/div
//取得样式
var myDivdocument.getElementById(myDiv); //首先取得元素的引用
alert(myDiv.style.width); //10px//修改样式
myDiv.style.width20px; (1)style对象的属性和方法 style对象是CSSStyleDeclaration的实例,类似于一个数组 cssText length getPropertyValue() item() [] removeProperty() setProperty(propertyName,value,priority) //设置属性并设置important//cssText在元素有多项变化时使用
myDiv.style.cssTextwidth:20px; height:30px; background-color:red; //getPropertyValue()通过属性名取得属性值
var property,i,len,value
for(i0,lenmyDiv.style.length;ilen;i){propertymyDiv.style[i];valuemyDiv.style.getPropertyValue(property);alert(property:value);
} //移除属性
myDiv.style.removeProperty(border); (2).计算的样式(所有样式信息) document.defaultView.getComputedStyle(元素伪元素的字符串)var computedStyledocument.defaultView.getComputedStyle(myDiv,null);
alert(computedStyle.width); // IE中类似的属性style.currentStyle 注所有计算的样式都是只读的不能修改计算后样式对象中的CSS属性 2.操作样式表 CSSStyleSheet类型表示样式表继承自StyleSheet包括外部样式表和内部样式表。为只读 测试是否支持DOM2级样式表 var supportDOM2StyleSheetsdocument.implementation.hasFeature(“StyleSheets”,2.0”); document.styleSheets表示文档中所有样式表。也可以直接通过linkstyle元素取得CSSStyleSheet对象用sheet或styleSheet属性//取得样式表对象
function getStyleSheet(element){return element.sheet||element.styleSheet;
}//取得第一个link元素引入的样式表
var link document.getElementsByTagName(link)[0];
var sheetgetStylesheet(link); (1)访问和修改CSS样式表 CSSRule对象表示样式表中的每一条规则是一个基类型。CSSStyleRule类型继承自CSSRule表示样式信息。常用属性 cssText:与style.cssText属性类似前者包含选择符文本和花括号后者只包含样式信息。前者为只读后者可重写 selectorText style 影响符合该规则的所有元素div.box{background-color:blue;width:100px;height:200px;
}
//假设这条规则位于页面中第一个样式表中且只有这一条样式规则var sheetdocument.styleSheets[0]; //取得第一个样式表的引用
var rulessheet.cssRules||sheet.rules; //取得表中的每一条规则
var rulereles[0]; //取得第一条规则
alert(rule.style.width); //100pxrule.style.backgroundColorred //修改样式信息 (2)向样式表中添加新规则 insertRule(规则文本插入规则的索引) IEaddRule(“body”,background-color:silver“,0) 夸浏览器向样式表插入规则function insertRule(sheet,selecorText,cssText,position){if(sheet.insertRule){sheet.insertRule(selectorText{cssText},position);}else if(sheet.addRule){sheet.addRule(selectorText,cssText,position);}
}insertRule(document.styleSheet[0],body,background-color:red,0); (3)删除 deleteRule() removeRule() 夸浏览器function deleteRule(sheet,index){if(sheet.deleteRule){sheet.deleteRule(index);}else if(sheet.removeRule){sheet.removeRule(index);}
}deleteRule(document.styleSheets[0],0); //删除第一条规则 3.元素大小 (1)偏移量 偏移量元素在屏幕上占用的所有可见的空间 offsetHeight offsetWidth offsetLeft offsetTop offsetParent 计算绝对位置//左偏移量
function getElementLeft(element){var actualLeftelement.offsetLeft;var currentelement.offsetParent;while(current!null){actualLeftcurrent.offsetLeft;currentcurrent.offsetParent;}return actualLeft;
}//上偏移量
function getElementTop(Top){var actualTopelement.offsetTop;var currentelement.offsetParent;while(current!null){actualTopcurrent.offsetTop;currentcurrent.offsetParent;}return actualTop;
} 一般来说通过getElementLeft()和getElementTop()会返回与offsetLeft和offsetTop相同的值 (2)客户区大小 客户区大小元素内容及其内边距所占据的空间大小 clientWidth clientHeight 多用于确定浏览器视口大小function getViewport(){if(document.compatModeBackCompat){return {width:document.body.clientWidth,width:document.body.clientHeight};}else{return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight};}
} (3)滚动大小 滚动大小包含滚动内容的元素的大小 scrollHeight元素内容的总高度实际大小 scrollWidth元素内容的总宽度 scrollLeft:被隐藏在内容区域左侧的像素数 scrollTop被隐藏在内容区上边的像素数 夸浏览器取得滚动文档的总高度var docHeightMath.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
var docWidthMath.max(document.documentElement.scrollWidth,document.documentElement.clientWidth); 设置元素的滚动位置function scrollToTop(element){if(element.scrollTop!0){element.scrollTop0;}
} (4)确定元素的大小 getBoundingClientRect()方法有4个属性left,top,right,bottom.给出了元素在页面中相对视口的位置 //兼容性问题再看 三.遍历 1.NodeIterator document.createNodeIterator() 4个参数 root搜索起点 whatToShow:NodeFilter对象 filter:可以自定义NodeFilter对象 entityReferenceExpansion:布尔值表示是否要扩展实体引用。div iddiv1pbhello/bworld/pullilist1/lililist2/lililist3/li/ul
/div//遍历div元素中所有元素
var divdocument.getElementById(div1);
var iteratordocument.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);
var nodeiterator.nextNode();
while(node!null){alert(node.tagName);nodeiterator.nextNode();
}//只遍历li元素
var divdocument.getElementById(div1);
var filterfunction(node){return node.tagName.toLowerCase()li?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP;
};
var iteratordocument.createNodeIterator(div,NodeFilter.SHOW_ELEMENT,filter,false);
var nodeiterator.nextNode();
while(node!null){alert(node.tagName);nodeiterator.nextNode();
} (2)TreeWalker 比NodeIterator更高级。NodeIterator值允许以一个节点的步幅前后移动而TreeWalker还支持DOM节后的各个方向上移动包括父节点同辈节点和子节点等方向。//例如上边的只遍历li元素
var divdocument.getElementById(div1);
var walkerdocument.createTreeWalker(div,NodeFilter.SHOW_ELEMENT,null,false);walker.firstChild(); //转到p
walker.nextSibling(); //转到ulvar nodewalker.firstChild(); //转到第一个li
while(node!null){alert(node.tagName);nodewalker.nextSibling();
} 四.范围 范围是选择DOM结构中特定的部分然后执行相应操作的一种手段 使用范围选区可以在删除文档中某些部分的同时保持文档结构的格式良好过着复制文档中的相应部分。 1.DOM中的范围 2.IE8及更早版本中的范围 IE8及更早版本不支持“DOM2级遍历和范围”模块但它提供了一个专有的文本范围对象可以用来完成简单的基于文本的范围操作。IE9完全支持DOM遍历。转载于:https://www.cnblogs.com/liuzhongyi1992/p/3495900.html
