`

DOM模型

    博客分类：
  • XML
BBSHTMLXMLBlog 
阅读更多

转自:

http://www.scriptwebs.com/blog/post/287.html

DOM模型(Document Object Module,即文档对象模型)

结点的类型

   在XML（HTML）文档中，不仅每个闭合的标记是一个结点，而且闭合标记中的文本、标记内的属性也都是结点，分别称为元素结点、文本结点和属性结点

  <span >何永</span>,整个内容构成了标记为span的元素结点，id="a"组成了一个属性结点，而"何永"这段文本构成了一个文本结点。这里的属性和文本结点都可以看作是元素结点的子节点。

处理DOM中的结点

   在DOM模型中引用一个结点的方式

   1、document.getElementById();  //引用指定ID的结点

   2、document.getEleMentsByTagName()  //引用指定标记名称的结点

间接引用结点

  1、引用子结点：每个结点都有一个childNodes集合属性，类型是数组对象，表示该结点的所有子结点的集合

  document.childNodes[0];  //引用HTML文档的根结点

  document.childNodes[0].childNodes[0]  //引用<head>结点

  document.childNodes[0].childNodes[1]  //引用<body>结点

  2、引用父结点

  element.parentNode

 

  3、引用兄弟结点

  element.nextSibling;  //引用上一个兄弟结点

  element.previousSibling  //引用下一个兄弟结点

获取结点信息

 

  1、使用ndeName属性获取结点的名称

  Node.nodeName;

  元素结点：返回标记的名称，如<span></span>;返回"span"

  属性结点：返回属性名称，如id="a",返回"id"

  文本结点：返回文本的内容

 

  2、使用nodeType属性获取结点类型

  Node.nodeType;

  元素结点：返回1

  属性结点：返回2

  文本结点：返回3

 

  3、使用nodeValue属性获取结点的值

  Node.nodeValue;

  文本结点：返回文本内容（仅适用于文本结点）

  4、使用hasChildNodes()方法判断给定结点是否有子结点

  Node.hasChildNodes();

  有子结点：返回True

  没子结点:返回false

  处理属性结点：属性结点作为一个特殊的结点，是依赖元素结点而存在

  1、获取和设置属性结点的值

  事实上每个属性结点都是元素结点的一个属性

  元素结点.属性名称

  如<img src="bg.gif" alt="" />

  <!--

  var imgNode = document.getElementById("a");

  imgNode.src="back.gif";

  -->

  2、使用setAttribute()方法添加一个属性

  elementNode.setAttribute(attributeName,attributeValue);

  elementNode:要添加属性的结点

  attributeName:要添加的属性名称

  attributeValue:要添加的属性值

  3、使用getAttribute()方法获取一个属性值

  elementNode.getAttribute(attributeName)



改变文档的层次结构

 

  使用document.createElement方法创建元素结点

  document.createElement(elementName);

  创建一个<div>结点

  var divElement = document.createElement("div");

  使用document.createTextNode方法创建文本结点（同上）

使用appendChild方法添加结点

  创建结点后，可以用appendChild方法将其添加到文档层次结构中

  parentElement.appendChild(childEleMent);

  例：<dl >

        <dt>dt1</dt>

        <dd>dd1</dd>

      </dl>

 

      <!--

      var dla = document.getElementById("dla");

      var dd = document.createElement("dd");

      var tn = document.createTextNode("dd2");

      dd.appendChild(tn);  //将创建的文本结点作为<dd>的子结点

      dla.appendChild(dd);

      //--

您要是对此篇日志感兴趣，其实在http://www.51wsc.com/bbs上可以查看到更多的信息。

分享到：
| MyEclipse8.5如何安装svn
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    BOM和DOM模型图

    ### BOM和DOM模型 #### 一、BOM与DOM概览 在Web开发中，BOM（Browser Object Model）和DOM（Document Object Model）是非常重要的两个概念，它们构成了前端JavaScript操作网页的基础。 ##### BOM：浏览器对象模型...

    W3C DOM模型参考手册

    ### W3C DOM模型参考手册知识点详解 #### 一、前言 本手册是一份针对W3C DOM（文档对象模型）模型的详尽参考指南，重点介绍了Gecko引擎所支持的DOM API特性。这份资料最初来自Mozilla开发网站，但由于各种原因，...

    W3C 标准文档,介绍dom模型对象等标准

    **W3C标准文档——DOM模型对象详解** 在Web开发领域，W3C（World Wide Web Consortium）是一个至关重要的组织，它制定了一系列的开放标准，包括HTML、CSS、XML以及我们今天要讨论的DOM（Document Object Model）。...

    DOM 模型和 Prototype

    总结一下，DOM模型是描述HTML或XML文档结构的数据模型，而Prototype是一个JavaScript库，它提供了一套强大的工具来操作DOM，并实现了面向对象编程的特性。通过学习Prototype，开发者可以更高效地进行前端开发，提升...

    JavaScriptDOM模型VirtualDOM.zip

    Virtual DOM 是一个 JavaScript DOM 模型，支持元素创建，区别计算和分支操作，提供高效的渲染。代码示例var h = require('virtual-dom/h'); var diff = require('virtual-dom/diff'); var patch = require...

    javaScript中DOM模型使用详解+XMLHttpRequest异步请求使用

    DOM模型的诞生源于90年代末期的浏览器大战，当时NetScape的网景浏览器与微软的IE浏览器竞争激烈，两者都在努力提升其浏览器的动态内容处理能力。JS-DOM模型就是在这种背景下发展起来的一种技术，尽管网景公司最终因...

    完整版Java web开发教程PPT课件 Java开发进阶教程 第02章 Dom模型,控制客户端元素（共15页）.pptx

    1. **DOM模型**： - **DOM**（Document Object Model）是HTML和XML文档的标准化表示，它将文档结构转化为一个可编程的树形结构。 - DOM允许开发者通过JavaScript等脚本语言来访问和操作文档的各个部分，如添加、...

    j2ee04:js02，dom模型，三种找对象的方法，两种设置样式的方法，隐藏显示，全选，qq列表，计算器

    在JavaScript中，DOM模型提供了三种主要的方法来查找页面上的对象： 1. `getElementById()`：这是最常用的方法，通过指定的ID值来获取单个元素。ID在页面上应具有唯一性。 2. `getElementsByClassName()`：这个方法...

    javascript Dom 模型

    这是一个FLV视屏文件，介绍了JavaScript中dom的知识以及相关应用。

    js操作htmlDom模型

    JavaScript 操作 HTML DOM（文档对象模型）是网页动态交互的核心技术。DOM 是一种标准，它允许编程语言（如JavaScript）来访问和修改HTML或XML文档的结构、样式和内容。以下是一些关于JavaScript操作DOM的基本知识点...

    DOM模型创建XML文档

    利用JAXP提供的LSSerializer工具来序列化DOM树，生成XML文档。

    js DOM模型操作

    JavaScript DOM模型操作主要涉及对网页文档的结构进行动态修改，它是Web开发中不可或缺的一部分。DOM全称为Document Object Model，它是一种标准，允许程序和脚本动态更新、添加、删除和改变HTML或XML文档的结构。...

    Dom文档对象模型-2010

    Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。 Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。 Dom文档对象模型-2010版，对各种Dom 模型进行介绍，转载自 web圈。

    Dom文档对象模型-2010版chm

    DOM模型将网页内容视为一个树形结构，每个节点代表文档的一部分，如元素、属性、文本等。这种模型使得开发者可以通过JavaScript或其他支持DOM的脚本语言来动态地改变、添加或删除页面内容。 在"Dom文档对象模型-...

    ch8 XML Dom编程模型.ppt

    DOM模型将XML文档视为一棵树形结构，其中每个节点代表XML文档的一部分，如元素、属性、文本等。理解DOM的概念是开发XML相关应用程序的基础。 DOM解析器是解析XML文档的关键组件，它能够读取XML文件，将其转换为内存...

    dom4j-2.1.3.zip

    首先，DOM4J的核心在于其对DOM模型的优化，使得在处理大型XML文件时性能更优，内存占用更低。在"dom4j-2.1.3.jar"文件中，包含了DOM4J库的所有类和方法，可以用于构建、解析和操作XML文档。这个版本的DOM4J在前一...

    使用STL构建简单的DOM模型及其脚本编制方案

    在这个DOM模型中，我们可能需要用到vector或list来存储XML文档的节点，用map来建立节点之间的关系，因为它们可以方便地进行查找和修改操作。 1. **容器**： - `std::vector`：适合用来存储顺序的数据，如XML文档的...

Magicbox
Global site tag (gtag.js) - Google Analytics