文档介绍：北京传智播客教育 —高级软件人才实作培训专家!JavaScript 加强讲师:冯威北京传智播客教育 —高级软件人才实作培训专家! DOM ? DOM : DOM 是 Document Object Model 文档对象模型的缩写。根据 W3C DOM 规范,DOM 是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件 D :文档– html 文档或 xml 文档 O:对象– document 对象的属性和方法 M:模型 DOM 是针对 xml(html) 的基于树的 API 。 DOM 树:节点( node )的层次。 DOM 把一个文档表示为一棵家谱树(父,子,兄弟) DOM 定义了 Node 的接口以及许多种节点类型来表示 XML 节点的多个方面北京传智播客教育 —高级软件人才实作培训专家! DOM 的结构北京传智播客教育 —高级软件人才实作培训专家! 1. navigator 2. Window document (文档对象) frame (框架对象) location (位置对象) history (历史对象) links 链接对象 archors 锚对象 forms 表单对象 images 图片对象北京传智播客教育 —高级软件人才实作培训专家! DOM 的结构北京传智播客教育 —高级软件人才实作培训专家! 节点及其类型节点*由结构图中我们可以看到,整个文档就是一个文档节点。*而每一个 HMTL 标签都是一个元素节点。*标签中的文字则是文本节点。*标签的属性是属性节点。*一切都是节点……节点树节点树的概念从图中一目了然,最上面的就是“树根”了。节点之间有父子关系,祖先与子孙关系,兄妹关系。这些关系从图中也很好看出来,直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……北京传智播客教育 —高级软件人才实作培训专家! 特性/方法 nodeName nodeValue nodeType ownerDocument firstChild lastChild childNodes previousSibling nextSibling hasChildNodes() attributes appendChild( node ) removeChild( node ) replaceChild ( newnode , oldnode ) insertBefore ( newnode , refnode ) 类型/返回类型 String String Number Document Node Node NodeList Node Node Boolean NamedNodeMap Node Node Node Node 说明节点的名字;根据节点的类型而定义节点的值;根据节点的类型而定义节点的类型常量值之一指向这个节点所属的文档指向在 childNodes 列表中的第一个节点指向在 childNodes 列表中的最后一个节点所有子节点的列表指向前一个兄弟节点;如果这个节点就是第一个兄弟节点,那么该值为 null 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点,那么该值为 null 当 childNodes 包含一个或多个节点时,返回真包含了代表一个元素的特性的 Attr 对象;仅用于 Element 节点将node 添加到 childNodes 的末尾从 childNodes 中删除 node 将 childNodes 中的 oldnode 替换成 newnode 在 childNodes 中的 refnode 之前插入 newnode NODE接口的特性和方法北京传智播客教育 —高级软件人才实作培训专家! 查找元素节点?getElementById() 寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null. var oElement = document .getElementById ( sID ) 该方法只能用于 document 对象<input type="text" value=" 国庆 60周年" id="tid"> function test(){ var usernameElement=( “ tid"); // 获取元素的值 alert(": "+) // 获取元素的类型 alert(": "+usernameEle