Javascript s05

DOM

操作文档的对象 Document  Object  Model

(XML DOM 与  HTML DOM)

 

1.什么是DOM?能做什么?

增删改查

 

2.XML DOM - Node 对象

 

         都是一个对象,三个重要属性

                  

         a.nodeType 节点类型

                   元素节点(标签节点)(element)   1  例如(div img...)

                   属性节点()                         2  例如(a标签的href属性)

                   文本节点()                         3  例如(<div>Hello</div>)//hello属于div的子节点

                   注释节点                            8  例如(<!--->)

                   文档节点                            9  整个文档document

         b.nodeValue     节点的值

                   元素节点             null

                   文本节点                   文本本身

                   属性节点                   属性的值

                  

         c.nodeName  节点名称

                   标签节点         就是标签名  如"div";

                   属性节点         是属性名

                   文本节点         #text 值就是中间的值

                   文档节点         #document

                  

                  <a href="http://www.baidu.com" style="color:red">百度</a>

 

3.DOM节点树

        

                            关系 parent children sibling

                           

                           

4.Node节点对象            

 

         在Firefox里,标签与标签之间的空白,也是一个节点(文本节点),IE8没有

 

        

         属性         上面已有3个

         firstChild                    第一个儿子(长子)

         childNodes      

         lastChild                     最后一个子节点

         parentNode                        父节点

         nextSibling                          弟弟

         previousSibling        哥哥

        

        

         方法

         a.object.cloneNode(true);  把他的子节点一起克隆了

         默认参数为true,如果传一个false,则不克隆子节点

        

         b.object.appendChild(对象); 将一个对象添加一个儿子

        

         c.object.removeChild(对象); 通过他爸爸来删除对象

        

         d.object.replaceChild(对象);  替换它的子节点

        

         e.hasChildNodes()   判断是否有子节点  遍历用

        

         f.hasAttributes                  判断是否有属性

        

        

5.XML DOM - Element 对象

 

         节点类型是1  nodeType

         由于元素对象也是一种节点，因此它可继承 Node 对象的属性和方法。

        

         方法

         insertBefore    在已有的子节点之前插入一个新的子节点。

         getAttribute

         setAttribute(a,b)    

         removeAttribute()

        

6.XML DOM HTMLElement 对象

 

                   属性

                   a.classname

                  

                   b.*currentStyle        //IE特有

                   如何得到通过CSS样式设置的属性

                   Window.getComputedStyle()  //其他浏览器

                  

                   c.innerHTML

                  

                   d.offsetHeight,offsetWidth

                     只能获取宽高

                     只读

                    

                   e.offsetLeft, offsetTop

                     只读

                  

                   f.scrollTop  元素滚动的高度

                  

                   g.style 只能操作行内样式

                  

                   h.title当鼠标悬停在元素上的时候，很多浏览器在元素的“工具提示”中显示这一属性的值。

 

7.HTML DOM Document 对象

         alert(document.nodeType)  //9

         alert(document.nodeName)  //#document          

        

         属性

         all

         links

         images

         forms

 

         方法

         创建一个元素

         createElement

         appendChild()

         getElementById()

         getElementByTagName()

         getElementByName()

 

8.XML DOM Document 对象

        

         //document.body相当于

         document.documentElement

        

         document.doctype