JavaScript语言与Ajax应用第04章 文档对象模型（DOM）

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Click to edit title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,第,4,章 文档对象模型（,DOM,）,*,Click to edit title style,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,“,”,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,JavaScript语言与Ajax应用第二版,主编 董宁 陈丹,中国水利水电出版社,第4章 文档对象模型DOM,目 录,第4章 文档对象模型DOM,4.1 DOM根底,4.2 在DOM元素间移动,4.3 处理元素属性,4.4 通过CSS类名获取DOM元素,4.5 修改DOM中的元素,4.1 DOM根底,第4章 文档对象模型DOM,通过JavaScript，我们可以重构整个HTML文档，可以添加、移除、改变或重排页面上的工程。要改变页面的某个局部，JavaScript就需要对HTML文档中所有元素设置进行访问的接口。通过这个接口，可以提供对HTML元素进行添加、移动、改变或移除的方法和属性，这些都由文档对象模型DOM来实现。,4.1 DOM根底,第4章 文档对象模型DOM,4.1.1 DOM简介,DOM的全称是Document Object Model，即文档对象模型。在浏览器中，基于DOM的HTML分析器将一个页面转换成一个对象模型的集合通常称DOM树，浏览器正是通过对这个对象模型的操作，来实现对HTML页面的显示。通过DOM接口，JavaScript可以在任何时候访问HTML文档中的任何一局部数据，因此，利用DOM接口可以无限制的操作HTML页面。,4.1 DOM根底,第4章 文档对象模型DOM,DOM接口提供了一种通过分层对象模型来访问HTML页面的方式，这些分层对象模型依据HTML的文档结构形成了一棵节点树。也就是说，DOM强制使用树模型来访问HTML页面中的元素。由于HTML本质上就是一种分层结构，所以这种描述方法是相当有效的。,对于HTML页面开发来说，DOM就是一个对象化的HTML数据接口，一个与语言无关、与平台无关的标准接口标准。它定义了HTML文档的逻辑结构，给出了一种访问和处理HTML文档的方法。利用DOM，程序开发人员可以动态地创立文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等等。可以这样说，HTML文档代表的是页面，而DOM那么代表了如何去操作页面。无论是在浏览器里还是在浏览器外，无论是在效劳器上还是在客户端，只要有用到HTML的地方，就会碰到对DOM的应用,4.1 DOM根底,第4章 文档对象模型DOM,4.1.2 DOM树的结构,前面我们讲过，DOM为我们提供的访问文档信息的媒介是一种分层对象模型，而这个层次的结构，那么是一棵根据文档生成的节点树。在对文档进行分析之后，不管这个文档有多简单或者多复杂，其中的信息都会被转化成一棵对象节点树。在这棵节点树中，有一个根节点即Document节点，所有其他的节点都是根节点的后代节点。节点树生成之后，就可以通过DOM接口访问、修改、添加、删除、创立树中的节点和内容。,4.1 DOM根底,第4章 文档对象模型DOM,DOM,中的节点有,Document,、,Element,、,Comment,、,Type,等不同类型，其中每一个,DOM,树必须有一个,Document,节点，并且为节点树的根节点。它可以有子节点如,Text,节点、,Comment,节点等。,具体来讲，,DOM,节点树中的节点有元素节点、文本节点和属性节点等三种不同的类型，,4.1 DOM根底,第4章 文档对象模型DOM,1元素节点(element node ),在 HTML 文档中，各 HTML 元素如、等构成文档结构模型的一个元素对象。在节点树中，每个元素对象又构成了一个节点。元素可以包含其它的元素，例如在下面的“购物清单代码中：,Beans,Cheese,Milk,所有的列表项元素都包含在无序清单元素内部。其中节点树中元素是节点树的根节点。,4.1 DOM根底,第4章 文档对象模型DOM,2文本节点(text node),在节点树中，元素节点构成树的枝条，而文本那么构成树的叶子。如果一份文档完全由空白元素构成，它将只有一个框架，本身并不包含什么内容。没有内容的文档是没有价值的，而绝大多数内容由文本提供。在下面语句中：,Welcome to DOM World! ,包含“Welcome to 、“DOM 、 “World!三个文本节点。在 HTML中，文本节点总是包含在元素节点的内部，但并非所有的元素节点都包含或直接包含文本节点，如“购物清单中，元素节点并不包含任何文本节点，而是包含着另外的元素节点，后者包含着文本节点，所以说，有的元素节点只是间接包含文本节点。,3属性节点(attribute node),HTML 文档中的元素或多或少都有一些属性，便于准确、具体地描述相应的元素，便于进行进一步的操作，例如：,Welcome to DOM World！,这里 class=Sample、id=purchases都属于属性节点。因为所有的属性都是放在元素标签里，所以属性节点总是包含在元素节点中。,4.1 DOM根底,第4章 文档对象模型DOM,4.1.3 document对象,每个载入浏览器的 HTML页面都会成为 document 对象即该HTML页面对应的DOM。document 对象使我们可以通过JavaScript对 HTML 页面中的所有元素进行访问。document 对象是 window 对象的一局部，可通过 window.document 属性对其进行访问。,document对象代表一个浏览器窗口或框架中显示的HTML文件。浏览器在加载HTML文档时，为每一个HTML文档创立相应的document对象。document对象是window对象的一个属性，引用它时，可以省略window前缀。document拥有大量的属性和方法，结合了大量子对象，如图像对象、超链接对象、表单对象等。这些子对象可以控制HTML文档中的对应元素，使我们可以通过JavaScript对 HTML 页面中的所有元素进行访问。,通过document对象可以使用页面中的任何元素，也可以添加新元素、删除存在的元素。下面来看看document的属性，见表4-1。,4.1 DOM根底,第4章 文档对象模型DOM,4.1.4,获取,DOM,中的元素,DOM,中定义了多种获取元素节点的方法，如,getElementById(),、,getElementsByName(),和,getElementsByTagName(),。,如果需要获取文档中的一个特定的元素节点，最有效的方法是,getElementById(),。,4.1 DOM根底,第4章 文档对象模型DOM,1document.getElementById(),该方法通过元素节点的ID，可以准确获得需要的元素节点，是比较简单快捷的方法。,如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是元素节点的id。这个方法可以看作是document.getElementById()的另外一种写法。在后面的章节中将详细介绍这些JavaScript库。,需要操作HTML文档中的某个特定的元素时，最好给该元素添加一个id属性，为它指定一个在文档中唯一的名称，然后就可以用该id 属性的值查找想要的元素节点。,4.1 DOM根底,第4章 文档对象模型DOM,2getElementsByName(),document.getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。因为一个文档中的 name 属性可能不唯一如 HTML 表单中的单项选择按钮通常具有相同的 name 属性，所以 getElementsByName() 方法返回的是元素节点的数组，而不是一个元素节点。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。,4.1 DOM根底,第4章 文档对象模型DOM,【,例,4-4】getElementById(),方法的使用。,4-4,function getValue() ,var x = document.getElementById(myHeader),alert(x.innerHTML),这是标题,点击标题，会提示出它的值。,4.1 DOM根底,第4章 文档对象模型DOM,3.document.getElementsByTagName()：该方法是通过元素的标记名获取节点，同样该方法也是返回一个数组。在获取元素节点之前，一般都是知道元素的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。它不是document对象的专有方法，还可以应用到其它的节点对象。其语法为：,document.getElementsByTagName(标签名称);,或document.getElementById(ID).getElementsByTagName(标签名称);,获取节点数组时，通常要把此数组保存在一个变量中，就像这样：,var x=document.getElementsByTagName(p);,变量 x 就是包含着页面中所有 p 元素节点的数组，可通过它们的索引号来访问这些 p元素节点，索引号从 0 开始，可以使用数组的 length 属性来循环遍历节点列表。,4.1 DOM根底,第4章 文档对象模型DOM,var x=document.getElementsByTagName(p);,for (var i=0;ix.length;i+),/,这里可以操作相应的元素,要访问第三个,p,元素节点，可以这么写：,var y=x2;,4.2,在,DOM,元素间移动,第4章 文档对象模型DOM,获取一个元素节点以后，常常需要以该元素节点为基点上下左右地移动获取其它的元素节点，childNodes前面已经介绍过了，下面我们介绍其他的几种方式。,1通过父节点获取,parentObj.firstChild：如果节点为节点parentObj的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild.的形式。,parentObj.lastChild：这个属性是获取节点parentObj的最后一个子节点。与firstChild一样，它也可以递归使用。,parentObj.childNodes：获取节点的子节点数组，然后可以通过循环或者索引找到需要的节点。,注意：在IE上获取的是直接子节点的数组，而在Firefox上获取的是所有子节点即包括子节点的子节点。,parentObj.children：获取节点的直接子节点数组。,4.2,在,DOM,元素间移动,第4章 文档对象模型DOM,下面的这个函数就是用来处理这类情况的：,function getElement(node),while(node & node.nodeType !=1),node = node.nextSibling;,return node;,如果处理的是元素节点，那么跳过while循环，否那么就执行循环体直到找到一个元素节点为止，如果最后也找不到就退出并返回null。,4.2,在,DOM,元素间移动,第4章 文档对象模型DOM,2通过兄弟节点获取,neighbourNode.previousSibling：获取节点neighbourNode同一级别的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。,neighbourNode.nextSibling：获取节点neighbourNode同一级别的下一个节点，同样支持递归。,4.2,在,DOM,元素间移动,第4章 文档对象模型DOM,3通过子节点获取,childNode.parentNode：获取节点的父节点。,例如下面的这个例子：,John,Doe,Alaska,在上面的HTML代码中，第一个 td是tr元素的首个子元素firstChild，而最后一个td是tr元素的最后一个子元素lastChild。此外，tr是每个td元素的父节点parentNode。对 firstChild 最普遍的用法是访问某个元素的文本：,var text=x.firstChild.nodeValue; /x为某个包含子元素的节点,parentNode 属性常被用来改变文档的结构。如从文档中删除带有 id 为maindiv的节点：,var x=document.getElementById(maindiv); /x为某个需要删除的节点,x.parentNode.removeChild(x);,4.3,处理元素属性,第4章 文档对象模型DOM,除了获取元素内容，获取和设置元素的属性值也是经常进行的操作。一般来说，浏览器在解析,HTML,页面时元素具有的属性列表是与收集自元素本身表示的信息一起预载入的，并存储在一个关联数组中供稍后访问。,4.3,处理元素属性,第4章 文档对象模型DOM,比方下面的HTML片段：,.,一旦它被解析为DOM，HTML表单元素变量formElem将拥有一个关联数组，可以从中获取或“名称/值对。这一结果类似于以下形式：,formElem.attributes = ,name: myForm,action: /test.cgi,method: POST,;,处理属性有很多的方法，其中元素有两个访问和设置属性的方法：getAttribute()和setAttribute()。,4.3,处理元素属性,第4章 文档对象模型DOM,4.3.1 style属性,DOM中每个元素都有一个style属性，用来实时改变元素的样式。所有的css样式都可以使用style属性来调整，包括用来设置背景边框和边距、布局 、列表、定位、打印、滚动条、表格、文本。下面的代码可以设置元素的属性：,element.style.height = 100px; / 高度为 100像素,element.style.display = none; / 将元素隐藏起来,JavaScript不允许在方法和属性名中使用“-所以去掉了css中的连字号，并将首字母大写。代码如下：,element.style.backgroundColor = #FF0000; /背景为红色,element.style.borderWidth = 2px; / 边框为2px,4.3,处理元素属性,第4章 文档对象模型DOM,4.3.2 class属性,在属性中还有一些例外的情况，最常碰到的是访问类名属性的问题。在所有的浏览器中，为了一致地操作类名，必须使用className属性访问类名属性，以代替本应更适宜的getAttribute(class)。这一问题同样也出现在HTML标记中的属性for上，它被重命名为htmlFor。另外，这种情况还见于两个CSS属性：cssFloat和cssText。这种特殊的命名方式的出现是因为class，for，float，和text这些单词是JavaScript中的保存字。,当样式比较多的时候，通过style来修改会很麻烦，为了解决这个问题可以在样式表定义选择符，然后添加新元素时，只需设置className就能得到相应的结果。,4.4,通过,CSS,类名获取,DOM,元素,第4章 文档对象模型DOM,在一个HTML文档中查找元素的方式与其他的文档有很大的不同，对JavaScript/HTML开发者来说，最重要的两个优势是CSS类的使用和CSS选择符的知识。记住这些，我们就可以创立一些强大的函数用来使得DOM中元素的选择更加简单和可理解。,4.4,通过,CSS,类名获取,DOM,元素,第4章 文档对象模型DOM,HTML,元素可以指定,id,属性值和,class,属性值，通过,id,可以使用,getElementById(),这个函数很方便获取元素，但没有任何预定好的函数可以通过类名获取元素。不过我们可以自定义函数实现通过类名来获取元素。我们首先通过下面的一个例子来看一下如何通过类名来获取元素。,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,我们之前已经了解到一些获取DOM节点的函数，例如getElementById和getElementsByTagName。但是我们不仅可以访问DOM节点，更可以改变它们，甚至改变整个节点树的结构。访问文档中的节点仅仅是使用DOM所能实现的功能中的很小局部，添加、删除、替换DOM中的节点才能对DOM进行操作实现对HTML页面的修改。下面我们就来看看改变DOM的方法。,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,4.5.1 标准DOM元素修改方法,修改DOM有3个步骤：首先要知道怎么创立一个新元素，然后要知道如何把它插入DOM中，最后要学习如何删除它。,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,1 创立新节点,DOM中有一些方法用于创立不同类型的节点。下面的表格列出了包含在DOM Level 1中的方法。,createAttribute(name)：用给定名称name创立属性节点；,createCDATASection(text)：用包含文本text的文本子节点创立一个CDATA Section；,createComment(text)：创立包含文本text的注释节点；,createDocumentFragment()：创立文档碎片节点；,createElement(tagname)：创立标签名为tagname的元素；,createEntityReference(name)：创立给定名称的实体引用节点 ；,createProcessingInstruction(target,data)：创立包含给定target和data的PI节点；,createTextNode(text)：创立包含文本text的文本节点。,最常用到的几个方法是：createDocumentFragment()、createElement()和createTextNode()。,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,2 添加节点appendChild(),createElement()实例,function createMsg() ,/创立元素,var oP = document.createElement(p);,/创立文本节点,var oText = document.createTextNode(我的第一个创立节点实例);,/将文本节点追加到元素中,oP.appendChild(oText);,/将元素附加到文档的body中以显示出来,document.body.appendChild(oP);,4.5,修改,DOM,中的元素,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,3, 删除节点：,removeChild(),利用,DOM,除了可以添加元素，也可以删除元素，,removeChild(),就是完成对元素的删除。这个函数的参数为要删除的元素，然后将这个元素作为函数的返回值返回。,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,4, 替换节点：,replaceChild(),如果例,4-10,中我们并不想删除节点，只是想替换成新的节点，那我们就需要使用,replaceChild(),。这个函数有两个参数：被添加的节点和被替换的节点。,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,5, 在特定节点之前插入：,insertBefore(),在例,4-12,中新文本节点只能出现在原始文本节点之后，如果想让新文本节点出现在原始文本节点之前，就必须使用,insertBefore(),方法，将新节点插入到原始节点之前。这个方法接受两个参数：要添加的节点和插在哪个节点之前,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,6 创立一个文档碎片createDocumentFragment(),一旦把节点添加到document.body或者它的后代节点后，页面就会更新并反映这个变化。对于少量的更新，这是很好的，就像在前面的例子中那样。然而，当要向document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。,为解决这个问题，可以创立一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,4.5.2 innerHTML,属性,对于节点的插入除了有,appendChild(),、,insertBefore(),和,replaceChild(),函数之外，还可以利用,innerHTML,属性向文档添加内容。,每一个元素节点都可以使用,innerHTML,属性，写入到,innerHTML,属性的字符串会被解析并以,HTML,代码的形式插入到对应元素节点中并替换原有的内容。,4.5,修改,DOM,中的元素,第4章 文档对象模型DOM,4.5.3 创立与修改table元素,在HTML 页面中，表格的使用频率非常高，而且经常要对表格进行创立和修改，所以本节将重点讨论如何利用DOM在HTML页面中创立与控制表格。,本章小结,第4章 文档对象模型DOM,本章介绍了文档对象模型DOM，了解到DOM如何将HTML页面文档组织成由节点组成的层次树。着重介绍了DOM中的核心对象document对象，还学习了利用DOM获取节点和如何处理、添加、删除DOM树中的节点；如何处理元素的属性。同时了解了如何利用处理HTML标记中的一些重要属性，包括style属性和class属性。这一章还讲述了针对HTML DOM的辅助功能，比方表格的处理，这些功能与传统的DOM方式相比更加简单。,