现在的位置: 首页 > 综合 > 正文

JavaScript专题——专题四 JavaScript DOM

2013年10月16日 ⁄ 综合 ⁄ 共 4761字 ⁄ 字号 评论关闭

一、DOM基础

                            1.1DOM概念。

定义:DOM是一组用来描述脚本怎么样与结构化文档进行交互和访问的web标准。DOM定义了一系列对象、方法和属性,用于访问、操纵和创建文档中的内容、结构、样式以及行为。

                            1.2DOM的继承。

                                    
为了实现各种标签的特性。

                            1.3核心Node对象

                                    
每一个Element对象都扩展自Node对象,即使document对象和documentElement对象也是如此,只不过他们有自己独特的属性和方法。

                            1.4节点名称、值和类型。

                                    
对于文档中的Element对象而言,可以使用nodeName属性获得用于区分节点的标签名称。NodeName的值会被转换为大写形式

                                    
对于不基于文档中标签的其他对象来说,nodeName的值取决于引用对象的类型。

                            1.5 nodeType

                                    
它会包含与下面表中某个命名常量对应的一个整型数值。

                            1.6
父节点、子节点和同辈节点。

                                     DOM核心中大多数属性和方法都涉及在树形结构中引用和创建节点。为了方便在树中定位,每个Node对象都有许多预定义属性,分别引用书中的其他相关节点。这些属性中的每个属性引用的都是一个实际的DOM对象,只有一个例外childNodes,它引用的是包含DOM对象的一个NodeList对象。

                                     parentNode引用制定节点的直接父节点。

                                     childNodes属性引用制定节点的所有子节点。

                                    
当使用for迭代childNodesfor循环中的引用需要使用item()方法。

                                     firstNodelastNode分别表示一个子节点和最后一个子节点。当只有一个子节点的情况下两者引用的节点相同。

                                     previousSiblingnextSibling属性分别引用与当前节点前后紧邻的同辈节点。

                   1.7节点的属性。

                            DOM文档中其他节点一样,节点的属性也扩展自Node对象。但是他们却不包含在通常的表示父子关系的属性结构中。

                           
属性节点作为Attr对象的实例,节点的属性被包含在相应节点的attribute成员的一个NamedNodeMap对象中。

                           
很多浏览器中,attribute成员也将包含许多专有的或DHTML属性。与Comment节点类似,Attr节点的值也可以使用nodeValue属性来取得。

                            Attr节点还包含了一个Text节点,这个Text节点中包含与nodeValue中相同的值。

        
二、DOM操作

                   2.1操作DOM节点树

                  
添加节点到开头或中间位置需要使用insertBefore(newChild,refChild)方法。

                  
替换或删除一个节点的操作使用replaceChild(newChild,oldChild)removeChild(oldChild)方法。

                   2.2复制和移动节点

                   Document.getElementById()方法返回的是对Node对象的引用而不是Node对象的副本。

                   2.3核心Element对象

                            2.3.1Element对象的属性。

                                     Node对象的attribute属性的方法。

                                     getAttribute(name)方法用来获取字符串形式的属性名称设置相应属性的值

                                     setAttribute(name,value)方法基于一个字符串形式的属性名称设置相应属性的值。

                                     removeAttribute(name)方法基于一个字符串形式的属性名称删除相应的值。

                                     getAttributeNode(name)方法获取指定的attr节点。

                                     setAttributeNode(newAttr)方法基于新的Attr对象的实例设置属性。

                                     removeAttributeNode(oldAttr)方法删除指定的属性节点,与使用removeChild()方法删除一个子节点方式相同。

                            2.3.2Element对象中查找Element对象

                                    
getElementsbyTagName()方法。此方法返回一个NodeList对象,其中包含与给定标签名称相匹配的所有祖先元素的引用。最终的NodeList对象列表中,所有元素都是按照他们在DOM文档中出现的先后顺序排列的。

                   2.4核心Document对象

                            Document对象中包含更多可以用来创建DOM核心中各种节点类型的新实例的方法。

                            CreateAttribute(name)方法创建节点类型为 Node.ATTRIBUTE_NODE节点。

                            createCDATASection(name)方法创建节点类型为 Node.CDATA_SECTION_NODECDATASection节点。

                   2.5DOMHTML

                            2.5.1HTMLDocument对象

                                    
属性:

                                               Title:包含于<title>标签中的字符串。

                                               Referrer:包含链接到当前页面的前一个页面的URL

                                               Domain:包含在当前站点域名。

                                               URL:包含浏览器在查看当前页面时地址栏中的URL

                                               Body:引用从<body>节点开始的DOM树。

                                               Images:一个包含当前文档中所有<img>标签的数组。

                                               Applets:一个包含与当前文档中所有<applet>标签对应的DOM节点的数组。

                                               Links:一个包含当前文档中所有<link>标签对应的DOM节点数组。

                                               Forms:是一个包含与当前文档中所有<form>标签对应的DOM节点的数组。

                                               Anchors:是一个包含当前文档中所有<a>标签对应的DOM节点的数组。

                                               Cookie:是一个包含当前页面中所有cookie信息的字符串。

                                    
方法:

        
·                                    open()打开一个文档以便接收write()writelen()方法的输出。

                                               Close()关闭当前的文档。

                                               Writedata)输入写入到文档中。

                                               Writelndata)输入写入到文档中同时写入一个换行符。

                            2.5.2THMLElement对象

                                    
属性:

                                                        Id:包含可以供document.getElmentById()使用的id属性。

                                                        Title:用于进一步对元素进行语义化描述和悬停的工具条。

                                                        Dir:表示节点中文本的方向。

                                                        className:包含用作css连接点的class属性。

抱歉!评论已关闭.