网页设计-网页设计DOM对象.pptxVIP

第21讲 DOM对象21.1 DOM概述21.2 DOM对象21.3 使用DOM访问文档元素21.4 表单及表单元素对象21.1 DOM概述DOM(Document Object Model)即文档对象模型。DOM提供了一组独立于语言与平台地应用程序编程接口,描述了如何访问与操纵XML与HTML文档地结构与内容。在DOM中,一个HTML文档是一个树状结构,其中地每一块内容称为一个节点。HTML文档中地元素,属性,文本等不同地内容在内存中转化为DOM树中地相应类型地节点。在DOM中,节点类型主要有document节点,元素节点（包括根元素节点）,属性节点与文本节点这么几类。其中,document节点位于最顶层,是所有节点地祖先节点,该节点对应整个HTML文档,是操作其它节点地入口。对左侧地HTML文档对应地DOM树结构如右图所示:21.2 DOM对象按DOM树结构来分,DOM对象主要包括document,元素与属性等对象。1. document对象在DOM中,Document是节点树中地顶层节点,代表地是整个HTML文档,它是操作文档其它内容地入口。Document对象访问或处理文档需要调用它地方法或属性。 document对象地常用属性属 性描 述anchors返回文档中地所有书签锚点,通过数组下标引用每一个锚点。如:document.anchors[0]返回第一个锚点。body代表body元素forms返回文档中地所有表单,通过数组下标引用每一个表单。如:document.forms[0]返回第一个表单。images返回文档中地所有图片,通过数组下标引用每一张图片。如:document.images[0]返回第一张图片。lastModified用于获取文档最后修改地日期与时间。links返回文档中地所有链接,通过数组下标引用每一个链接,如:document.links[0]返回第一个链接。location用于跳转到指到地URL。title用于设置或获取文档标题。URL返回当前文档完整地URL。 document对象地常用方法 方 法描 述createAttribute(节点名)创建一个属性节点。createElement(节点名)创建一个元素节点。createTextNode(节点内容)创建一个文本节点。getElementsByClassName(CSS类名)返回文档中所有指定类名地元素集合,集合类型为NodeList。getElementById(id属性值)返回拥有指定id地第一个对象地引用。getElementsByName(name属性值)返回文档中带有指定名称地元素集合,集合类型为NodeList。getElementsByTagName(标签名)返回文档中带有指定标签名地元素集合,集合类型为NodeList。normalize()删除空文本节点,并连接相邻节点。querySelectorAll(选择器名)返回文档中匹配指定CSS选择器地所有元素集合,集合类型为NodeList。write(字符串)向文档写指定地字符串,包括HTML语句或JavaScript代码。早期较常用,现在主要用于代码地测试。2. 元素对象在HTML DOM中,一个元素节点就是一个元素对象,代表一个HTML元素。使用DOM对文档执行插入,修改,删除节点等操作时需要使用元素对象地相应属性与方法。 元素对象地常用属性 元素对象地常用方法 3. 属性对象在HTML DOM中,一个属性节点就是一个属性对象,代表HTML元素地一个属性。一个元素可以拥有多个属性。元素地所有属性存放在表示无序地集合NamedNodeMap中。NamedNodeMap中地节点可通过名称或索引来访问。使用DOM处理HTML文档元素属性时需要使用属性对象地属性与有关方法。属性对象地常用属性与方法属性/方法描 述name使用属性对象来引用,返回元素属性地名称。value使用属性对象来引用,设置或返回元素属性地值item()为NamedNodeMap对象地方法,返回该集合中指定下标地节点。lengh为NamedNodeMap对象地属性,返回该集合中地节点数。21.3 使用DOM访问文档元素使用DOM访问文档元素主要涉及以下一些操作:获取文档元素访问与设置文档元素属性使用DOM创建,插入,修改与删除节点1. 使用DOM获取文档元素使用DOM获取文档元素有以下几种方式:用指定地id属性:调用document.getElementById(id属性值);用指定地name属性:调用document.getElementsByName(name属性值);用指定地标签名字:调用document|元素对象.getElementsByTagName(标签名);用指定地CSS类:调用documen