最新javascript语言与ajax应用第04章 文档对象模型（dom(共39张ppt课件).pptx

《最新javascript语言与ajax应用第04章 文档对象模型（dom(共39张ppt课件).pptx》由会员分享，可在线阅读，更多相关《最新javascript语言与ajax应用第04章 文档对象模型（dom(共39张ppt课件).pptx（39页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、主编(zhbin) 董宁 陈丹中国水利水电出版社第一页，共三十九页。第4章 文档对象(duxing)模型（DOM）第二页，共三十九页。目 录第4章 文档对象(duxing)模型（DOM） 4.1 DOM基础(jch) 4.2 在DOM元素间移动 4.3 处理元素属性4.4 通过CSS类名获取DOM元素 4.5 修改DOM中的元素第三页，共三十九页。4.1 DOM基础(jch) 第4章 文档对象(duxing)模型（DOM）通过JavaScript，我们可以重构整个HTML文档，可以添加、移除、改变或重排页面上的项目。要改变页面的某个部分，JavaScript就需要对HTML文档中所有元素设置进

2、行访问的接口。通过这个接口，可以提供对HTML元素进行添加、移动、改变或移除的方法和属性，这些都由文档对象(duxing)模型（DOM）来实现。 第四页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM）4.1.1 DOM简介 DOM的全称是Document Object Model，即文档对象模型。在浏览器中，基于DOM的HTML分析器将一个页面转换成一个对象模型的集合（通常称DOM树），浏览器正是通过对这个对象模型的操作，来实现对HTML页面的显示。通过DOM接口(ji ku)，JavaScript可以在任何时候访问HTML文档中的任何一部分数据，因此，

3、利用DOM接口可以无限制的操作HTML页面。 第五页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM） DOM接口提供了一种通过分层对象模型来访问HTML页面的方式，这些分层对象模型依据HTML的文档结构形成了一棵节点树。也就是说，DOM强制(qingzh)使用树模型来访问HTML页面中的元素。由于HTML本质上就是一种分层结构，所以这种描述方法是相当有效的。 对于HTML页面开发来说，DOM就是一个对象化的HTML数据接口，一个与语言无关、与平台无关的标准接口规范。它定义了HTML文档的逻辑结构，给出了一种访问和处理HTML文档的方法。利用DOM，程序开

4、发人员可以动态地创建文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等等。可以这样说，HTML文档代表的是页面，而DOM则代表了如何去操作页面。无论是在浏览器里还是在浏览器外，无论是在服务器上还是在客户端，只要有用到HTML的地方，就会碰到对DOM的应用 第六页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM）4.1.2 DOM树的结构 前面我们讲过，DOM为我们提供的访问文档信息的媒介是一种分层对象模型，而这个层次的结构，则是一棵根据(gnj)文档生成的节点树。在对文档进行分析之后，不管这个文档有多简单或者多复杂，其中的信息都会被转化成一

5、棵对象节点树。在这棵节点树中，有一个根节点即Document节点，所有其他的节点都是根节点的后代节点。节点树生成之后，就可以通过DOM接口访问、修改、添加、删除、创建树中的节点和内容。第七页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM） DOM中的节点有Document、Element、Comment、Type等不同类型，其中每一个DOM树必须有一个Document节点，并且为节点树的根节点。它可以(ky)有子节点如Text节点、Comment节点等。 具体来讲， DOM 节点树中的节点有元素节点、文本节点和属性节点等三种不同的类型， 第八页，共三十九

6、页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM）1元素节点(element node ) 在 HTML 文档中，各 HTML 元素如、等构成文档结构模型的一个元素对象。在节点树中，每个元素对象又构成了一个节点。元素可以包含(bohn)其它的元素，例如在下面的“购物清单”代码中： Beans Cheese Milk 所有的列表项元素都包含在无序清单元素内部。其中节点树中元素是节点树的根节点。 第九页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM）2文本节点(text node) 在节点树中，元素节点构成树的枝条，而文本则构成树

7、的叶子。如果(rgu)一份文档完全由空白元素构成，它将只有一个框架，本身并不包含什么内容。没有内容的文档是没有价值的，而绝大多数内容由文本提供。在下面语句中： Welcome to DOM World! 包含“Welcome to” 、“DOM” 、 “World!”三个文本节点。在 HTML中，文本节点总是包含在元素节点的内部，但并非所有的元素节点都包含或直接包含文本节点，如“购物清单”中，元素节点并不包含任何文本节点，而是包含着另外的元素节点，后者包含着文本节点，所以说，有的元素节点只是间接包含文本节点。 3属性节点(attribute node) HTML 文档中的元素或多或少都有一些属

8、性，便于准确、具体地描述相应的元素，便于进行进一步的操作，例如： Welcome to DOM World！ 这里 class=Sample、id=purchases都属于属性节点。因为所有的属性都是放在元素标签里，所以属性节点总是包含在元素节点中。 第十页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM）4.1.3 document对象每个载入浏览器的 HTML页面都会成为 document 对象（即该HTML页面对应的DOM）。document 对象使我们可以通过JavaScript对 HTML 页面中的所有元素进行访问。document 对象是 wi

9、ndow 对象的一部分，可通过 window.document 属性对其进行访问。document对象代表一个浏览器窗口或框架中显示的HTML文件。浏览器在加载HTML文档时，为每一个HTML文档创建相应的document对象。document对象是window对象的一个属性，引用它时，可以省略window前缀。document拥有大量的属性和方法，结合了大量子对象，如图像对象、超链接对象、表单对象等。这些子对象可以控制HTML文档中的对应元素，使我们可以通过JavaScript对 HTML 页面中的所有元素进行访问。通过document对象可以使用页面中的任何元素，也可以添加新元素、删除存在

10、(cnzi)的元素。下面来看看document的属性，见表4-1。第十一页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM）4.1.4 获取DOM中的元素DOM中定义了多种获取元素节点的方法，如getElementById()、getElementsByName() 和 getElementsByTagName()。如果(rgu)需要获取文档中的一个特定的元素节点，最有效的方法是 getElementById()。第十二页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM）1document.getElementById

11、()该方法通过元素节点的ID，可以准确获得需要(xyo)的元素节点，是比较简单快捷的方法。如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：$(id)，参数仍然是元素节点的id。这个方法可以看作是document.getElementById()的另外一种写法。在后面的章节中将详细介绍这些JavaScript库。需要操作HTML文档中的某个特定的元素时，最好给该元素添加一个id属性，为它指定一个（在文档中）唯一的名称，然后就可以用该id 属性的值查找想要的元素节点。 第十三页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(d

12、uxing)模型（DOM）2getElementsByName()document.getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同(xin tn)的 name 属性），所以 getElementsByName() 方法返回的是元素节点的数组，而不是一个元素节点。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。 第十四页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxi

13、ng)模型（DOM）【例4-4】getElementById() 方法(fngf)的使用。 4-4 function getValue() var x = document.getElementById(myHeader) alert(x.innerHTML) 这是标题 点击标题，会提示出它的值。 第十五页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM）3.document.getElementsByTagName()：该方法是通过元素的标记名获取节点，同样该方法也是返回一个数组。在获取元素节点之前，一般都是知道元素的类型的，所以使用该方法比较简单。但是

14、缺点也是显而易见，那就是返回的数组可能十分庞大，这样就会浪费很多时间。它不是document对象的专有方法，还可以应用到其它的节点对象。其语法为：document.getElementsByTagName(标签名称); 或document.getElementById(ID).getElementsByTagName(标签名称);获取节点数组时，通常要把此数组保存在一个变量中，就像这样：var x=document.getElementsByTagName(p);变量 x 就是包含(bohn)着页面中所有 p 元素节点的数组，可通过它们的索引号来访问这些 p元素节点，索引号从 0 开始，可以使

15、用数组的 length 属性来循环遍历节点列表。 第十六页，共三十九页。4.1 DOM基础(jch)第4章 文档对象(duxing)模型（DOM）var x=document.getElementsByTagName(p);for (var i=0;ix.length;i+) / 这里可以(ky)操作相应的元素要访问第三个p元素节点，可以这么写：var y=x2;第十七页，共三十九页。4.2 在DOM元素(yun s)间移动 第4章 文档对象(duxing)模型（DOM）获取一个元素节点以后，常常需要以该元素节点为基点上下左右地移动获取其它的元素节点，childNodes前面已经介绍过了，下面

16、我们介绍其他的几种方式。1通过父节点获取parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild.的形式。 parentObj.lastChild：这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样(yyng)，它也可以递归使用。 parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。 注意：在IE上获取的是直接子节点的数组，

17、而在Firefox上获取的是所有子节点即包括子节点的子节点。 parentObj.children：获取已知节点的直接子节点数组。 第十八页，共三十九页。4.2 在DOM元素(yun s)间移动 第4章 文档对象(duxing)模型（DOM）下面的这个(zh ge)函数就是用来处理这类情况的：function getElement(node) while(node & node.nodeType !=1) node = node.nextSibling; return node;如果处理的是元素节点，则跳过while循环，否则就执行循环体直到找到一个元素节点为止，如果最后也找不到就退出并返回n

18、ull。 第十九页，共三十九页。4.2 在DOM元素(yun s)间移动 第4章 文档对象(duxing)模型（DOM）2通过兄弟节点获取neighbourNode.previousSibling：获取已知节点（neighbourNode）同一级别的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎(s h)可以递归使用的。 neighbourNode.nextSibling：获取已知节点（neighbourNode）同一级别的下一个节点，同样支持递归。 第二十页，共三十九页。4.2 在DOM元素(yun s)间移动 第4章 文档对象(duxing)模型（DOM）3

19、通过子节点获取childNode.parentNode：获取已知节点的父节点。例如下面的这个例子： John Doe Alaska 在上面的HTML代码中，第一个 td是tr元素的首个子元素（firstChild），而最后一个td是tr元素的最后一个子元素（lastChild）。此外，tr是每个td元素的父节点（parentNode）。对 firstChild 最普遍(pbin)的用法是访问某个元素的文本：var text=x.firstChild.nodeValue; /x为某个包含子元素的节点parentNode 属性常被用来改变文档的结构。如从文档中删除带有 id 为maindiv的节点

20、：var x=document.getElementById(maindiv); /x为某个需要删除的节点x.parentNode.removeChild(x);第二十一页，共三十九页。4.3 处理元素(yun s)属性 第4章 文档对象(duxing)模型（DOM） 除了获取元素内容，获取和设置元素的属性值也是经常进行的操作。一般来说，浏览器在解析(ji x)HTML页面时元素具有的属性列表是与收集自元素本身表示的信息一起预载入的，并存储在一个关联数组中供稍后访问。 第二十二页，共三十九页。4.3 处理元素(yun s)属性 第4章 文档对象(duxing)模型（DOM）比如下面的HTML片

21、段： .一旦它被解析为DOM，HTML表单元素（变量(binling)formElem）将拥有一个关联数组，可以从中获取或“名称/值”对。这一结果类似于以下形式： formElem.attributes = name: myForm, action: /test.cgi, method: POST;处理属性有很多的方法，其中元素有两个访问和设置属性的方法：getAttribute()和setAttribute()。第二十三页，共三十九页。4.3 处理(chl)元素属性 第4章 文档对象(duxing)模型（DOM）4.3.1 style属性 DOM中每个元素都有一个style属性，用来实时改变

22、元素的样式。所有的css样式都可以使用style属性来调整，包括用来设置背景边框和边距、布局 、列表、定位、打印、滚动条、表格、文本(wnbn)。下面的代码可以设置元素的属性： element.style.height = 100px; / 高度为 100像素 element.style.display = none; / 将元素隐藏起来 JavaScript不允许在方法和属性名中使用“-”所以去掉了css中的连字号，并将首字母大写。代码如下： element.style.backgroundColor = #FF0000; /背景为红色 element.style.borderWidth =

23、 2px; / 边框为2px 第二十四页，共三十九页。4.3 处理(chl)元素属性 第4章 文档对象(duxing)模型（DOM）4.3.2 class属性 在属性中还有一些例外的情况，最常碰到的是访问类名属性的问题。在所有的浏览器中，为了一致地操作类名，必须使用className属性访问类名属性，以代替本应更合适的getAttribute(class)。这一问题同样也出现在HTML标记中的属性for上，它被重命名为htmlFor。另外，这种情况还见于两个CSS属性：cssFloat和cssText。这种特殊的命名方式的出现是因为class，for，float，和text这些单词是JavaS

24、cript中的保留字。 当样式比较多的时候，通过style来修改会很麻烦，为了解决这个问题可以在样式表定义选择符，然后添加新元素时，只需设置className就能得到相应(xingyng)的结果。 第二十五页，共三十九页。4.4 通过CSS类名获取(huq)DOM元素 第4章 文档对象(duxing)模型（DOM） 在一个HTML文档中查找元素的方式与其他的文档有很大的不同，对JavaScript/HTML开发者来说，最重要的两个(lin )优势是CSS类的使用和CSS选择符的知识。记住这些，我们就可以创建一些强大的函数用来使得DOM中元素的选择更加简单和可理解。第二十六页，共三十九页。4.4

25、 通过CSS类名(li mn)获取DOM元素 第4章 文档对象(duxing)模型（DOM） HTML元素可以指定id属性值和class属性值，通过id可以使用getElementById()这个函数很方便获取(huq)元素，但没有任何预定好的函数可以通过类名获取(huq)元素。不过我们可以自定义函数实现通过类名来获取(huq)元素。我们首先通过下面的一个例子来看一下如何通过类名来获取(huq)元素。第二十七页，共三十九页。4.5 修改(xigi)DOM中的元素 第4章 文档对象(duxing)模型（DOM）我们之前已经了解到一些获取DOM节点的函数，例如getElementById和getE

26、lementsByTagName。但是我们不仅可以访问DOM节点，更可以改变它们，甚至改变整个节点树的结构。访问文档中的节点仅仅是使用DOM所能实现的功能(gngnng)中的很小部分，添加、删除、替换DOM中的节点才能对DOM进行操作实现对HTML页面的修改。下面我们就来看看改变DOM的方法。 第二十八页，共三十九页。4.5 修改(xigi)DOM中的元素 第4章 文档对象(duxing)模型（DOM）4.5.1 标准DOM元素修改方法 修改DOM有3个步骤(bzhu)：首先要知道怎么创建一个新元素，然后要知道如何把它插入DOM中，最后要学习如何删除它。第二十九页，共三十九页。4.5 修改(x

27、igi)DOM中的元素 第4章 文档对象(duxing)模型（DOM）1 创建新节点 DOM中有一些方法用于创建不同类型的节点。下面的表格列出了包含在DOM Level 1中的方法。 createAttribute(name)：用给定名称name创建属性节点； createCDATASection(text)：用包含文本text的文本子节点创建一个CDATA Section； createComment(text)：创建包含文本text的注释节点； createDocumentFragment()：创建文档碎片节点； createElement(tagname)：创建标签名为tagname的元

28、素； createEntityReference(name)：创建给定名称的实体引用(ynyng)节点 ； createProcessingInstruction(target,data)：创建包含给定target和data的PI节点； createTextNode(text)：创建包含文本text的文本节点。 最常用到的几个方法是：createDocumentFragment()、createElement()和createTextNode()。第三十页，共三十九页。4.5 修改(xigi)DOM中的元素 第4章 文档对象(duxing)模型（DOM）2 添加节点appendChild()

29、createElement()实例(shl) function createMsg() /创建元素 var oP = document.createElement(p); /创建文本节点 var oText = document.createTextNode(我的第一个创建节点实例); /将文本节点追加到元素中 oP.appendChild(oText); /将元素附加到文档的body中以显示出来 document.body.appendChild(oP); 4.5 修改DOM中的元素 第三十一页，共三十九页。4.5 修改(xigi)DOM中的元素 第4章 文档对象(duxing)模型（DOM

30、）3 删除节点：removeChild() 利用DOM除了(ch le)可以添加元素，也可以删除元素，removeChild()就是完成对元素的删除。这个函数的参数为要删除的元素，然后将这个元素作为函数的返回值返回。 第三十二页，共三十九页。4.5 修改(xigi)DOM中的元素 第4章 文档对象(duxing)模型（DOM）4 替换节点：replaceChild() 如果例4-10中我们并不想删除节点，只是想替换成新的节点，那我们就需要(xyo)使用replaceChild()。这个函数有两个参数：被添加的节点和被替换的节点。 第三十三页，共三十九页。4.5 修改(xigi)DOM中的元素

31、第4章 文档对象(duxing)模型（DOM）5 在特定节点之前插入：insertBefore() 在例4-12中新文本节点只能出现在原始文本节点之后，如果想让新文本节点出现在原始文本节点之前，就必须使用(shyng)insertBefore()方法，将新节点插入到原始节点之前。这个方法接受两个参数：要添加的节点和插在哪个节点之前 第三十四页，共三十九页。4.5 修改(xigi)DOM中的元素 第4章 文档对象(duxing)模型（DOM）6 创建一个文档碎片createDocumentFragment()一旦把节点添加到document.body（或者它的后代节点）后，页面就会更新并反映这个

32、变化。对于少量的更新，这是很好的，就像在前面的例子中那样。然而，当要向document添加大量数据时，如果逐个添加这些变动，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有(suyu)的新节点附加其上，然后把文档碎片的内容一次性添加到document中。第三十五页，共三十九页。4.5 修改(xigi)DOM中的元素 第4章 文档对象(duxing)模型（DOM）4.5.2 innerHTML属性对于节点的插入除了有appendChild()、insertBefore()和replaceChild()函数之外，还可以利用innerHTML属性向文档添加内容。每一个元素(yu

33、n s)节点都可以使用innerHTML属性，写入到innerHTML属性的字符串会被解析并以HTML代码的形式插入到对应元素节点中并替换原有的内容。 第三十六页，共三十九页。4.5 修改(xigi)DOM中的元素 第4章 文档对象(duxing)模型（DOM）4.5.3 创建(chungjin)与修改table元素 在HTML 页面中，表格的使用频率非常高，而且经常要对表格进行创建和修改，所以本节将重点讨论如何利用DOM在HTML页面中创建与控制表格。 第三十七页，共三十九页。本章(bn zhn)小结第4章 文档对象(duxing)模型（DOM） 本章介绍了文档对象模型(mxng)（DOM）

34、，了解到DOM如何将HTML页面文档组织成由节点组成的层次树。着重介绍了DOM中的核心对象document对象，还学习了利用DOM获取节点和如何处理、添加、删除DOM树中的节点；如何处理元素的属性。同时了解了如何利用处理HTML标记中的一些重要属性，包括style属性和class属性。这一章还讲述了针对HTML DOM的辅助功能，比如表格的处理，这些功能与传统的DOM方式相比更加简单。 第三十八页，共三十九页。内容(nirng)总结JavaScript语言与Ajax应用（第二版）。DOM的全称是Document Object Model，即文档对象模型。如从文档中删除带有 id 为maindiv的节点：。createAttribute(name)：用给定名称name创建属性节点。createComment(text)：创建包含文本text的注释节点。4.5.3 创建与修改table元素(yun s)。如何处理元素(yun s)的属性第三十九页，共三十九页。