`
kuaile863
  • 浏览: 115970 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Dom小结

XMLHTML编程D语言 
阅读更多

DOM总结；

DOM： DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言.

•    D：文档 – html 文档 或 xml 文档

•    O：对象 – document 对象的属性和方法

•    M：模型

•    DOM 是针对xml(html)的基于树的API。

•    DOM树:节点（node）的层次。

•    DOM 把一个文档表示为一棵家谱树（父，子，兄弟）

•    DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

DOM的结构：

        

 

节点：

根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：

•    整个文档是一个文档节点

•    每个 HTML 标签是一个元素节点

•    包含在 HTML 元素中的文本是文本节点

•    每一个 HTML 属性是一个属性节点

•    注释属于注释节点

 

Node 层次：

节点彼此都有等级关系。

HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。



 

 

节点及其类型：

节点：

   *  由结构图中我们可以看到，整个文档就是一个文档节点。

   *  而每一个HMTL标签都是一个元素节点。

   *  标签中的文字则是文本节点。

   *  标签的属性是属性节点。

   *  一切都是节点……

节点树：

     节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……

NODE接口的特性和方法：

特性/方法

类型/返回类型

说    明

nodeName

String

节点的名字；根据节点的类型而定义

nodeValue

String

节点的值；根据节点的类型而定义

nodeType

Number

节点的类型常量值之一

ownerDocument

Document

指向这个节点所属的文档

firstChild

Node

指向在childNodes列表中的第一个节点

lastChild

Node

指向在childNodes列表中的最后一个节点

childNodes

NodeList

所有子节点的列表

previousSibling

Node

指向前一个兄弟节点；如果这个节点就是第一个兄弟节

点，那么该值为null

nextSibling

Node

指向后一个兄弟节点；如果这个节点就是最后一个兄弟节

点，那么该值为null

hasChildNodes()

Boolean

当childNodes包含一个或多个节点时，返回真

attributes

NamedNodeMap

包含了代表一个元素的特性的Attr对象；仅用于Element

节点

appendChild(node)

Node

将node添加到childNodes的末尾

removeChild(node)

Node

从childNodes中删除node

replaceChild
(newnode, oldnode)

Node

将childNodes中的oldnode替换成newnode

insertBefore
(newnode, refnode)

Node

在childNodes中的refnode之前插入newnode

查找并访问节点：

你可通过若干种方法来查找您希望操作的元素：

•    通过使用 getElementById() 和 getElementsByTagName() 方法

•    通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性

查找元素节点：

getElementById()寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.

var oElement = document.getElementById ( sID )

        该方法只能用于 document 对象

<input type="text" value="国庆60周年" id="tid">

 function test(){

    var usernameElement=document.getElementById(“tid");

    //获取元素的值

    alert("usernameElement.value: "+usernameElement.value)

    //获取元素的类型

    alert("usernameElement.type: "+usernameElement.type)

}

getElementsByName()寻找有着给定name属性的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。

 <form name="form1">

        <input type="text" name="tname" value="国庆60年_1" /><br>

        <input type="text" name="tname" value="国庆60年_2" /><br>

        <input type="text" name="tname" value="国庆60年_3" /><br>

        <input type="button" name="ok" value="保存" id="ok"  onclick="test();">

 </form> 

function test(){

     var tnameArray=document.getElementsByName("tname");

     alert(tnameArray.length);

     for(var i=0;i<tnameArray.length;i++){

             window.alert(tnameArray[i].value);

      }

  }

getElementsByTagName()寻找有着给定标签名的所有元素，这个方法将返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。

    var elements = document.getElementsByTagName(tagName);

    var elements = element.getElementsByTagName(tagName);

该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。

    var container =   document.getElementById(“sid”);

    var elements = container.getElementsByTagName(“p”);

    alert(elements .length);

查看是否存在子节点：

 hasChildNodes()该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

      var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。

hasChildNodes()例：

var selectElements=document.getElementsByTagName("select");

 alert(selectElements[0].hasChildNodes())

var inputElements=document.getElementsByTagName("input");

for(var i=0;i<inputElements.length;i++){

     alert(inputElements[i].hasChildNodes());

}

根节点：

有两种特殊的文档属性可用来访问根节点：

document.documentElement

document.body

第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。

DOM节点信息：

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

DOM属性---nodeName：

nodeName 属性含有某个节点的名称。

var name = node.nodeName;

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

注释：nodeName 所包含的 XML 元素的标签名称永远是大写的

注:nodeName 是一个只读属性

DOM 属性 – nodeValue：

nodeValue：返回给定节点的当前值（字符串）

 如果给定节点是一个属性节点，返回值是这个属性的值。

如果给定节点是一个文本节点，返回值是这个文本节点的内容。

如果给定节点是一个元素节点，返回值是 null

nodeValue 是一个 读/写 属性，但不能对元素节点的 nodeValue 属性设置值，但可以为文本节点的 nodeValue 属性设置一个值。

                     var li = document.getElementById(“li

  • 大小: 100.4 KB
  • 大小: 7.1 KB
1
顶
2
踩
分享到：
| 用js编写的考试系统倒计时
评论
发表评论

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

相关推荐

    DOM4J小结

    博文链接：https://huxiuliang.iteye.com/blog/234297

    jQuery DOM操作小结与实例

    jQuery 是一个广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作。DOM是HTML和XML文档的结构表示，允许我们通过编程方式访问和修改文档内容。在jQuery中，DOM操作包括创建新元素、复制现有...

    Dom4j对xml的解析小结

    在这个小结中，我们将深入探讨 Dom4j 的核心功能，包括初始化、使用迭代器、XPath 导航以及快速遍历。 1. 初始化： 在 Dom4j 中，解析 XML 文档的第一步是创建一个 `SAXReader` 实例，然后用它来读取 XML 文件。...

    JavaScript DOM编程艺术(中文第2版)

    第1章 JavaScript简史 1.1 JavaScript的起源 1.2 DOM 1.3 浏览器战争 1.3.1 DHTML 1.3.2 浏览器之间的冲突 1.4 制定标准 1.4.1 浏览器以外的考虑 1.4.2 浏览器战争的结局 1.4.3 崭新的起点 1.5 小结 第2章 ...

    JavaScript+DOM编程艺术

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 (由于文件大小的关系，分成三部分上传，请注意下载) 第1章 JavaScript简史 ...　5.6　小结

    [JavaScript.DOM高级程序设计]（加）桑贝斯.扫描版.part1.rar

    第一部分　深入理解DOM脚本编程 　第1章　遵循最佳实践　 　1.1　不唐突和渐进增强　 　1.2　让JavaScript运行起来　 　1.2.1　把行为从结构中分离出来　 　1.2.2　不要版本检测　 ...　12.9　小结

    javascript dom 基本操作小结

    JavaScript DOM 基本操作小结 在网上找到很多 DOM 操作的例子，感觉不全且凌乱。以下是 JavaScript DOM 基本操作小结，总结了 DOM 元素的创建、插入、替换和删除等基本操作。 DOM 元素的创建 在 JavaScript 中，...

    JavaScript+DOM编程艺术(二)

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史 　1.1　JavaScript的起源 　1.2　浏览器之争 ...　5.6　小结

    JavaScript+DOM编程艺术(一)

    本书在简洁明快地讲述JavaScript和DOM的基本 知识之后,通过几个实例演示了大师级的网页开发技术,并透彻阐述了。。。 第1章 JavaScript简史 　1.1　JavaScript的起源 　1.2　浏览器之争 ...　5.6　小结

    jQuery中Dom的基本操作小结

    jquery中各个节点的基本操作 代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...&lt;... charset=gb2312″&gt;&lt;head&gt; &lt;...jquery中的Dom操作&lt;/title&gt; &lt;sc

    JsDom 编程小结

    几乎所有DOM元素都有innerText、innerHTML属性（注意大小写），分别是元素标签内内容的文本表示形式和HTML源代码，这两个属性是可读可写的。 动态创建元素的时候innerHTML可以代替createElement(),属于简单，粗放型...

    DOM下的节点属性和操作小结

    属性： 1 .nodeName 节点名称，相当于tagName.属性节点返回属性名，文本节点返回#text。nodeName，是只读的。 2 .nodeType 值：1，元素节点；2，属性节点；3，文本节点。nodeType是只读的。 3 .nodeValue 返回一个...

    使用jQuery操作DOM的方法小结

    一.DOM操作分为3类 1.DOM Core DOM Core不是Javascript的专属品,任何一种支持DOM的编程语言都可以使用它.它的用途不仅限于处理一种使用标记语言编写出来的文档 2.HTML-DOM 比DOM Core出现的更早,它提供了一些更加...

    jQuery中DOM常见操作实例小结

    ### jQuery中DOM常见操作实例小结知识点 #### DOM属性操作 1. **设置或返回元素属性：** - `attr(name, value|fn)`：可以用来获取或设置属性值。如果提供值，它会设置属性；如果提供函数，那么会在每个匹配元素上...

    javascript DOM 操作基础知识小结

    本篇将总结DOM操作的基础知识，重点讲解如何添加元素以及使用节点属性。 1. DOM基础 DOM树中的节点类型包括： - Document：文档的根节点，所有其他节点都隶属于它。 - DocumentType：用于表示&lt;!DOCTYPE&gt;声明的...

    dom4j-1.6.1及相关使用示例

    ### 小结 DOM4J作为Java处理XML的强大工具，通过简洁的API实现了对XML的全面操作。了解并熟练掌握DOM4J，对于提升XML处理能力大有裨益。同时，`dom4j-1.6.1.jar`库文件则是实际开发中使用DOM4J的依赖包，包含了所有...

    JavaScript学习笔记之DOM基础操作实例小结

    在给定的文件内容中，我们看到了对JavaScript基础操作的介绍，特别是在DOM操作方面的实例小结。 ### 一、子节点 在DOM中，每个节点可以有零个或多个子节点。子节点包括元素节点、文本节点等。通过`childNodes`属性...

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