文档对象模型(DOM)

 

w3c提出了文档对象模型DOM(Document Object Mode)。浏览器通过DOM使Javascript可以访问页面上的元素,而DOM是网页上XHTML中正文标题、段落、列表、样式、ID、class以及所有其他出现的数据的一个内部表示。

一、理解DOM

DOM中定义了许多种节点类型:

1、文档节点Document

2、文档类型节点DocumentType

3、文档片段节点DocumentFragment

4、元素节点Element

5、文本节点Text

6、属性节点Attr

7、CDataSection节点

8、注释节点Comment

所有类型的节点有一些共同的属性和方法。

nodeName:节点名字;

nodeValue:节点的值;

nodeType:节点类型;

ownerDocument:指向这个节点所属的文档;

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

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

previousSibling:指向前一个兄弟节点

nextSibling:指向后一个兄弟节点

hasChildNodes():当ChildNodes包含一个或多个节点是,放回true;

attributes:包含了代表一个元素的特性的Attr对象

appendChild(node):将node添加到childNodes的结尾

removeChild(node):从childNodes中删除node

replaceChild(newnode,oldnode):将oldnode替换为newnode

insertBefore(newnode,refnode):在refnode之前插入newnode

二、使用DOM

1、访问相关节点

Document.documentElement访问<htlm/>元素

ChildNodes.length获取子节点数量

Document.body指向<body/>元素

2、处理元素属性

getNamedItem(name)-返回nodeName属性值等于name的节点

removeNamedItem(name)-删除nodeName属性值等于name的节点

setNamedItem(node)-将node添加到列表中,按其nodeName属性进行索引

item(pos)-想NodeList一样,返回在pos的节点

DOM定义了三个元素方法来帮助访问特性:

getAttribute(name)

setAttribute(name,newvalue)

removeAttribute(name)

3、访问指定节点

1)getElementsByTagName()方法

2)getElementsByName()方法

3)getElementById()方法

4、创建和操作节点

createAttribute(name)用给定名称name创建特性节点

createComment(text)创建包含文本text的注释节点

createDocumentFragment()创建文档碎片节点

createElement(tagname)创建标记名为tagname的元素

createTextNode(text)创建包含文本text的文本节点

1)createElement()、createTextNode()、appendChild()

2)removeChild()、replaceChild()、insertBefore()

3)createDocumentFragment()

4)cloneNode(true)把元素以及所有子节点一起复制

cloneNode(false)只复制元素

5、操作文本节点

AppendData(string)将字符串添加在文本节点尾部

DeleteData(offset,count)删除文本节点中从指定位置开始的指定数量的字符

InsertData(offset,string)将指定字符串插入到文本节点指定的位置中

replaceData(offset,count,string)用给定的字符串替换文本节点指定位置指定数量的文本数据

splitText(offset)将指定位置的文本节点分为2个部分,将右边部分返回为一个新的文本节点,左边不变

substringData(offset,count)从文本节点的文本数据中返回指定位置指定数目的字符串

三、table方法

<table/>元素添加了以下内容:

Caption-指向<caption/>元素

tBodies-<tbody/>元素集合

tFoot-指向<tfoot/>元素

tHead-指向<thead/>元素

rows-表格中所有行的集合

createTHead()-创建<thead/>元素并将其放入表格

createTFoot()-创建<tfoot/>元素并将其放入表格

createCaption()-创建<caption/>元素并将其放入表

deletetTHead()-删除<thead/>元素

deletetTFoot()-删除<tfoot/>元素

deletetCaption()-删除<caption/>元素

deleteRow(position)-删除指定位置的行

insertRow(position)-在rows集合中指定位置插入新行

<tbody/>元素添加了以下内容:

Rows-<tbody/>中所有行的集合

deleteRow(position)-删除指定位置的行

insertRow(position)-在rows集合中指定位置插入新行

<tr/>元素中添加了以下内容:

Cells-<tr/>元素中所有单元格的集合

deleteCell(position)-删除指定位置的单元格

insertCell(position)-在cells集合中指定位置插入新单元格

时间: 2024-10-27 13:44:05

文档对象模型(DOM)的相关文章

XML简明教程——文档对象模型——DOM和SAX(一)

概述 SAX是基于事件解析XML文档的代表性技术.SAX通过扫描XML文档的内容,对元素,属性和文本数据内容等逐一分析和处理. 1.XML基于时间的解析模式 基于事件的解析是指XML处理程序线性描述一个XML文档,当XML处理出鞥许从文档的开头至结尾读取XML文档的过程中,逐一分析和处理遇到的元素.属性和字符数据等. [例子1]奥运金牌榜XML文件: <?xml version = "1.0" encoding = "UTF-8"?> <?xml-

XML简明教程——文档对象模型——DOM和SAX(二)

DOM概述: DOM是一种典型的基于XML文档树状结构的解析技术.从概念上看,DOM的解析方式非常容易理解.DOM首先加载XML文档,并把XML树状结构存放到计算机内存中做进一步处理. 1.DOM与XML基于树状结构的解析模式 1.1XML基于树状结构的解析模式 XML文档中的文档类型描述.元素.属性.处理指令.注释和文本内容都可以视为状态树的节点.虽然从XML文档本身和XPath的角度来看,节点的含义略有不同,但是,一个XML文档能够被看作是按照一定层次结构分布的节点树. 当一个XML文档被以

文档对象模型-DOM

DOM定义 个人关于文档对象模型的理解是我们日常开发的页面的各个基本结构,如HTML,Head,Body,..但是小红书上的解释是针对XML但经过扩展用于HTML的应用程序编程接口(API,Application Programming Interface).DOM可以把页面映射为一个多层节点结构,把HTML或XML页面中的每个组成部分都当成是某种类型的节点,这些节点又包含着不同类型的数据,而通过DOM创建的这个表示文档的树形图,开发人员就能够主动的控制页面内容和结构. DOM级别 DOM1级:

文档对象模型-DOM(一)

首先看一下DOM树结构: 每个节点都是一个对象,拥有方法和属性. 脚本可以访问以及更新DOM树(不是源代码). 针对DOM树的修改都会反映到浏览器. 访问并更新DOM树需要两个步骤:   一.定位到与需要操作的元素所对应的节点 访问元素的相关方法和属性 1.选择单个元素节点方法 (1) getElementById() //使用元素的id属性(在页面中应是唯一) (2) querySelector() //使用css选择器,返回第一个匹配的元素 (3) 通过使用在DOM树中从第一个元素遍历到另一

文档对象模型——DOM

DOM:文档对象模型,核心对象document,对html元素的样式(颜色.属性.位置).内容.属性进行动态的改变和操作 一.document对象 1.属性 title   返回或设置当前文档的标题   //document.title="标题名" URL   返回当前文档的url            //只能获取不能设置 bgColor  设置文档的背景色 fgColor   设置文档的前景色(设置文字颜色) 2.方法(获取元素的方法) document.getElementByI

文档对象模型-DOM(二)

从NodeList中选择元素 方法一:item()方法,用于返回其中的单一节点,需要在方法的参数中指定所需元素的索引编号. 当其中没有任何元素时,执行代码是对资源的浪费.因此程序员会在执行代码之前,先检查一下在NodeList中是否至少包含一个节点. 可以使用length方法来实现.举例如下: 1 var elements = document.getElementsByClassName('hot'); 2 if(elements.length>=0){ 3 var firstItem = e

DOM 文档对象模型+倒计时

DOM 文档对象模型 DOM (document object model) 文档对象模型,它定义了操作文档对象的接口. DOM 把一份html文档表示为一棵家谱树,使用parent(父), child(子), sibling(兄弟)等记号来表明家庭成员之间的关系. 通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML. JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够

JavaScript笔记03——文档对象模型(Document Object Model,简称DOM)

Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强.[1] DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系.可以把DOM认为是页面上数据和结构的一个树形表示,不过页面当然可能并不是以这种树的方式具体实现. 通过 JavaScript,您可以重构整个 HTML 文档.您可以添加.移除.改变或重排页面上的项目. 要改变页面的某个东西,J

JS DOM(文档对象模型)与BOM(浏览器对象模型)

在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理.BOM不要包括浏览器相关的一些属性和方法. DOM知识点1.改变页面的元素和属性a.获取元素的方法:document.getElementById()document.getElementsByTagName()document.getEleme

JavaScript(三、DOM文档对象模型)

一.什么是DOM DOM 是 Document Object Model(文档对象模型)的缩写. DOM 是 W3C(万维网联盟)的标准. DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构和样式." W3C DOM 标准被分为 3 个不同的部分: 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对