dom2和dom3

第十二章 DOM2和DOM3

一.DOM变化

1.针对XML命名空间的变化

2.其他方面的变化

二.样式

1.访问元素的样式

            .style

            1)DOM样式属性方法

                cssText:访问style特性中的CSS代码

                length:应用给元素的CSS属性数量

                parentRule:表示CSSRule对象

                getPropertyCSSValue(propertyName):返回包含给定属性值的CSSValue对象

                getPropertyPriority(propertyName):如果给定的属性使用了！important设置，则返回"important";否则，返回空字符串

                getPropertyVlue(propertyName):返回给定属性的字符串值

                item(index):返回给定位置的CSS属性的名称

                removeProperty（propertyName）:从样式中删除给定属性

                setProperty(propertyName,value,priority):将给定属性设置哦为相应的值，并加上有限标志（“important”或者一个空字符串）

                -cssText:

                    myDiv.style.cssText="width:25px;height:100px;background-color:green";

                    alert(myDiv.style.cssText);

                    //为元素应用多项变化的快捷方式

                -length:

                    for( var i=0,len=myDiv.style.length;i<len;i++)

                        {

                              alert(myDiv.style[i]);//或者myDiv.style.item(i)  

                         }

                2)计算的样式

                    

2.操作样式表

          CSSStyleSheet类型表示的是样式表

            1）css规则

                CSSStyleRule对象：

                div.box{

                 background-color:blue;

                width:100px;

                height:200px;

               }

                var sheet =docuemnt.styleSheets[0];

                var rules=sheet.cssRules || sheet.rules;//取得规则列表

                var rules = 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"

            2)创建规则

                要向现有样式表中添加新规则，需要使用inserRule()方法：两个参数：规则文本和在哪里插入规则的索引

                sheet.insertRule("body{background-color:silver}",0);//DOM方法

           3)删除规则

                deleteRule(); 一个参数：要删除的位置

                sheet.deleteRule(0);//DOM方法

                sheet.removeRule(0);//仅对IE有效

3.元素大小

            1)偏移量：

                offsetHeight、 offsetTop、 offsetWidth、 offsetlLeft。

            2)客户区大小:元素内容及其内边距所占空间的大小

                clientWidth、 clientHeight。

            3）滚动大小

              

        4）.确定元素大小

            

2. function getElementLeft(element){
3. var actualLeft = element.offsetLeft;
4. var current = element.offsetParent;
6. while (current !== null){
7. actualLeft += current.offsetLeft;
8. current = current.offsetParent;
9. }
11. return actualLeft;
12. }
14. function getElementTop(element){
15. var actualTop = element.offsetTop;
16. var current = element.offsetParent;
18. while (current !== null){
19. actualTop += current. offsetTop;
20. current = current.offsetParent;
21. }
23. return actualTop;
24. }
26. function getBoundingClientRect(element){
28. var scrollTop = document.documentElement.scrollTop;
29. var scrollLeft = document.documentElement.scrollLeft;
31. if (element.getBoundingClientRect){
32. if (typeof arguments.callee.offset != "number"){
33. var temp = document.createElement("div");
34. temp.style.cssText = "position:absolute;left:0;top:0;";
35. document.body.appendChild(temp);
36. arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
37. document.body.removeChild(temp);
38. temp = null;
39. }
41. var rect = element.getBoundingClientRect();
42. var offset = arguments.callee.offset;
44. return {
45. left: rect.left + offset,
46. right: rect.right + offset,
47. top: rect.top + offset,
48. bottom: rect.bottom + offset
50. };
51. } else {
53. var actualLeft = getElementLeft(element);
54. var actualTop = getElementTop(element);
56. return {
57. left: actualLeft - scrollLeft,
58. right: actualLeft + element.offsetWidth - scrollLeft,
59. top: actualTop - scrollTop,
60. bottom: actualTop + element.offsetHeight - scrollTop
61. }
62. }
63. }
66. function getDimensions(){
67. var rect = getBoundingClientRect(document.getElementById("myDiv"));
68. alert("left: " + rect.left + "\nright: " + rect.right + "\ntop: " + rect.top + "\nbottom: " + rect.bottom);
69. }
74. </script>
75. </head>
76. <body style="padding: 10px; margin: 0">
77. <div style="margin: 20px">
78. <div style="padding: 20px">
79. <div id="myDiv" style="width: 100px; height: 50px; background-color: red; border: 1px solid black"></div>
80. </div>
81. </div>
82. <input type="button" value="Get Element Dimensions" onclick="getDimensions()" />
85. </body>

 

 

三.遍历

            ie不支持dom遍历

*深度优先遍历0

检测浏览器对DOM2级遍历能力的支持情况

            var supportsTraversals=docuemnt.implementation.hasFeature("Traversal","2.0");

            var supportsNodeIterator=(typeof document.creatNodeIterator=="function");

            var supportsTreeWalker=(typeof docuemnt.creatTreeWalker=="function");

1.NodeIterator

            document.creatNodeIterator()方法创建实例

            接受参数：

                root：想要作为搜索起点的树中的节点

                whatToShow:想要访问哪些节点的数字代码

                filter:是一个NodeFilter对象，或者一个表示应该接受还是拒绝某种特定节点的函数

                entityReferenceExpansion:布尔值，表示是否要扩展实体引用。用这个参数在HTML页面中没有用，因为其中的实体引用不能扩展。

                eg .

                <div id=" div1">

                 <p><b>hello</b>world!</p>

                <ul>

                   <li>1</li>

                    <li>2</li>

                    <li>3</li> 

               </ul>

               </div>

            想要遍历<div>元素中的所有元素：

            var div=document.getElementById("div1");

            var iterator=docuemnt.creatNodeIterator(div,NodeFilter.SHOW_ELEMENT,null,false);

            var node=iterator.nextNode();

            while(node!=null){

                alert(node.tagname);//输出标签名

                node=iterator.nextNode();    

           }

若只想要返回<li>元素：

        

1. <head>
2. <title>NodeIterator Example</title>
3. <script type="text/javascript">
5. function makeList() {
6. var div = document.getElementById("div1");
7. var filter = function(node){
8. return (node.tagName.toLowerCase() == "li") ?
9. NodeFilter.FILTER_ACCEPT :
10. NodeFilter.FILTER_SKIP;
11. };
13. var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false);
14. //For Firefox: iterator = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, filter, false);
16. var output = document.getElementById("text1");
17. var node = iterator.nextNode();
18. while (node !== null) {
19. output.value += node.tagName + "\n";
20. node = iterator.nextNode();
21. }
23. }
25. </script>
26. </head>
27. <body>
28. <p><strong>Note:</strong> The <code>NodeIterator</code> object has only been implemented in Internet Explorer 9, Chrome, Firefox (version 3.5 and higher), Opera (version 7.6 and higher) and Safari (version 1.3 and higher). It has not been implemented in Internet Explorer or Firefox (so this example won't work).</p>
29. <div id="div1">
30. <p><b>Hello</b> world!</p>
31. <ul>
32. <li>List item 1</li>
33. <li>List item 2</li>
34. <li>List item 3</li>
35. </ul>
36. </div>
37. <textarea rows="10" cols="40" id="text1"></textarea><br />
38. <input type="button" value="Make List" onclick="makeList()" />
39. </body>

 

2.TreeWalker

                nextNode()和previousNode()

                parentNode（）遍历到当前节点的父节点

                firstChild():遍历到当前节点的第一个子节点

                lastChild():遍历到当前节点的最后一个子节点

                nextSibling():遍历到当前节点的下一个同辈节点

                previousSibling（）：遍历到当前节点的上一个同辈节点

                创建TreeWalker对象

                    document.createTreeWalker()

                        四个参数：遍历起点（根节点）、要显示的节点类型、过滤器、是否扩展实体引用的布尔值。

                        

1. <script type="text/javascript">
2. function makeList() {
3. var div = document.getElementById("div1");
4. var filter = function(node){
5. return (node.tagName.toLowerCase() == "li") ?
6. NodeFilter.FILTER_ACCEPT :
7. NodeFilter.FILTER_SKIP;
8. };
10. var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, filter, false);
12. var output = document.getElementById("text1");
13. var node = walker.nextNode();
14. while (node !== null) {
15. output.value += node.tagName + "\n";
16. node = walker.nextNode();
17. }
19. }
21. </script>

 

            

四.范围

1.DOM中的范围

                createRange()方法

                     selectNode()选择整个节点，包括子节点

                     selectNodeContents()只选择节点的子节点

                        用DOM范围实现复杂选择

                            setStart() setEnd():参数一个参照节点和一个偏移量

                        deleteContents()

                            <p><b>he</b><b>llo</b>world</p>

                            var p1=document.getElementById("p1");

                                helloNode=p1.firstChlid.firstChild;

                                worldNode=p1.lastChild;

                                range=document.createRange();//创建范围

                                range.setStart(helloNode,2);

                                range.setEnd(worldNode,3);

                                range.deleteContents();

                                结果：

                                    <p><b>he</b>rld!</p>

                                插入DOM范围中的内容：

                                    insertNode（）；

                                清理DOM范围

                                    range.detach();//从文档中分离

                                    range=null;//解除引用

2.IE8及更早版本中的范围