Dom节点的获取简析
dom对象是与浏览器和操作系统无关的一些对象的集合（document object model 文档对象模型）！我认为，它是下属bom对象的，而bom（browser object model），是受到浏览器和操作系统影响的！所以，我们应当尽量的避免bom的使用！
首先，我们要树立一个概念，一般在网页中有的标签，就有相应的dom节点对象与之相对应！。
接着，我们了解一下dom节点的基本知识。
文档对象模型，顾名思义，就是将网页中的一个个标签当做一个个的对象！这些网页中的标签（标签中的属性、文本、注释），在js中被称为一个个的节点！而节点又可以有自己的子节点，有自己的属性和方法！以此类推，可以无限制的延伸下去！就像是一个倒立着的大树！而他的根节点只有一个（document）！
将众多的节点归位了一下几种类型：
整个文档是一个文档节点；一个标签是一个元素节点；一个属性是一个属性节点；一个文本是一个文本节点（它是作为元素节点的第一个子节点而存在的！）；注释又是注释节点！
节点本身的属性：
每一个上述的节点都有相关的属性，用来存储相关的信息！
这些属性主要包括以下三个nodeName，nodeValue，nodeType我们来详细讲解以下！
《1nodeName：元素节点的nodeName是标签的名称；属性节点的nodeName是属性名称（不过有一个问题，就是如何访问到属性节点呢？）；文本节点的nodeName永远是#text；文档节点的nodeName永远是#document
《2nodeValue：元素和文档的nodevalue是不可用的；文本节点的nodeValue是文本自身；属性节点的nodeVlaue是属性值！
《3nodeType：属性节点的类型！nodeType是只读属性！元素节点是1，属性节点是2，文本节点是3，注释节点是8，文档节点是9！
在了解到什么是节点以及节点的相关属性后！我们接下来要去学习一下如何访问节点！
一利用dom内在的方法获取节点！
(1）document.documentElement（）;
(2）document.getElementById();
有一点，我们要注意，getElementById()方法只能够用于document这个文档对象！而，getElementsByTagName（）方
法是既可以用于document这个文档对象，也可以用于其他的节点对象！
二利用节点之间的父子，兄弟关系获取节点。
a parentNode当前节点的父节点的引用！
b childNodes 当前节点的所有子节点
c firstChilde当前节点的第一个子节点（一般用来访问文本节点，文本节点默认为，标签节点的第一个子节点）
d lastChild当前节点的最后一个子节点
e previousSibling当前节点的前一个兄弟节点！
f nextSibling当前节点的后一个兄弟节点！
该讲的基本上都讲完了,但是，还是需要给大家提醒一点，我也是最近才认识到的。
( documentElement表示文档的根节点，通常是相对应的标签式HTML。而body标签就是body标签的对象化！它的重要性比documentElement大的多！正因为这样，document 对象具有body对象的直接引用！)
河南魏华压滤机（https://www.wendangku.net/doc/9e947053.html,压滤机、板框式压滤机、厢式压滤机），盾旗压滤机（https://www.wendangku.net/doc/9e947053.html,压滤机、板框式压滤机、厢式压滤机）,，郑州丰和食品添加剂（https://www.wendangku.net/doc/9e947053.html,瓜尔豆胶，海藻酸钠，刺槐豆胶）
jquery中获得jq对象(dom对象集合)的方法
jquery对象访问。 Jq对象（dom对象集合）的Eq方法和jq选择器返回的都是是jquery对象，只能使用jquery 方法；Jq对象（dom集合）的get方法和“jq对象[i]”返回的是dom元素对象，只能使用dom方法。 Jq对象的find（selector |obj|ele）和children用来查找子对象和后代对象 Jq对象的find方法用于查找当前jq对象（dom集合）的后代对象，Jq对象的children方法用于查找当前jq对象（dom集合）的子对象对象。这两个方法都只能使用jq对象（dom对象集合）来调用，并且他们返回的也是jq对象。 Jq手册中的api方法都是js对象（dom集合）对象或者$对象的方法。只能使用jq对象（dom 集合）或者$来调用。如each，attr、val，find，children等等 Jq对象的index方法搜索当前集合中的匹配的元素，并返回相应元素的索引值，从0开始计数 如果不给index方法传递参数，那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。 如果参数是一组DOM元素或者jQuery对象，那么返回值就是传递的元素相对于原先集合的位置。 如果参数是一个选择器，那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素，则返回-1。 Jq选择器 1、个基本选择器： 基本选择器可以拼接一起来选择某组元素，原则： 对同一个元素描述的多个基本选择器中间没有任何间隔。 如div[name=aa]表示name属性等于aa的div元素（元素名选择器div和属性选择器[name=aa]中间没有任何间隔）。 div.cval表示class值等于cval的div元素，表示class值等于cval是div元素（类选择器.cval 和元素名选择器div之间同样没有任何间隔） #id值 .class值 元素名 //属性 [attr]具有aaa属性
HTML DOM简要教程
第一部分HTML DOM简介 1 DOM简介 HTML文档对象模型 HTML文档对象模型（Document Object Model）定义了访问和处理 HTML 文档的标准方法。HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。 什么是 DOM？ 通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3） DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 ?Core DOM 定义了一套标准的针对任何结构化文档的对象 ?XML DOM定义了一套标准的针对XML 文档的对象 ?HTML DOM定义了一套标准的针对HTML 文档的对象 2 DOM节点 节点 根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的： ?整个文档是一个文档节点 ?每个HTML 标签是一个元素节点 ?包含在HTML 元素中的文本是文本节点 ?每一个HTML 属性是一个属性节点 ?注释属于注释节点 Node层次 节点彼此都有等级关系。 HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树（节点树）： 3 DOM节点树 文档树（节点数）
javascript_dom
什么是DOM？ 通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。 所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也几乎难觅踪影了。 DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。 DOM被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）： Core DOM 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对XML文档的对象 HTML DOM 定义了一套标准的针对HTML文档的对象。 HTML DOM 节点 HTML文档中的每个成分都是一个节点。 节点 根据DOM，HTML文档中的每个成分都是一个节点。 DOM是这样规定的： ?整个文档是一个文档节点 ?每个HTML标签是一个元素节点 ?包含在HTML元素中的文本是文本节点 ?每一个HTML属性是一个属性节点
注释属于注释节点 Node 层次 节点彼此都有等级关系。 HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 文档树（节点数） 请看下面这个HTML文档：
DOM Tutorial DOM Lesson one
Hello world! 上面所有的节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。举例， 和的父节点是节点，文本节点"Hello world!"的父节点是节点。 大部分元素节点都有子节点。比方说，节点有一个子节点：
节点。<title>节点也有一个子节点：文本节点"DOM Tutorial"。 当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1>和是同辈，因为它们的父节点均是<body>节点。 节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是<html>节点的后代，而第一个文本节点是<head>节点的后代。 节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把<html>节点作为先辈节点。</p><h2>DOM获取节点的三种常用方法</h2><p>Dom对象的常用方法： (1)getElementById() 查询给定ID属性值的元素，返回该元素的元素节点 1、查询给定ID属性值的元素，返回该元素的元素节点。也称为元素对象。 2、因为在一个html页面中id的值是唯一的，所以返回值也是唯一的。所以方法的名称为getElementById()而不是getElementsById() 3、该方法只能用于document对象，类似与java的static关键字。 (2)getElementsByName()查找给定name属性的所有元素，这个方法将返回一个节点集合，也可以称为对象集合 1、查找给定name属性的所有元素，这个方法将返回一个节点集合，也可以称为对象集合。 2、这个集合可以作为数组来对待，length属性的值表示集合的个数。 3、因为在html页面中，name不能唯一确定一个元素，所以方法的名称为getElementsByName而不是getElementByName (3)getElementsByTagName()查询给定标签名的所有元素 1、查询给定标签名的所有元素 2、因为在html页面中，标签名不是唯一的，所以返回值为节点的集合。 3、这个集合可以当做数组来处理,length属性为集合里所有元素的个数 4、可以有两种形式来执行这个方法： 1、var elements =document.getElementsByTagName(tagName); 2、var elements = element.getElementsByTagName(tagName); 5、从这两种方法可以看出持有这个方法的对象并不一定是整个文档对象(document).也可以是某一个元素节点。 (4)hasChildNodes()该方法用来判断一个元素是否有子节点,返回值为true或者false 1、该方法用来判断一个元素是否有子节点 2、返回值为true或者false 3、文本节点和属性节点不可能再包含子节点，所以对于这两类节点使用ChildNodes()方法返回值永远为false. 4、如果hasChildNodes()返回值为false,则childNodes,firstChild,lastChild 将为空数组或者空字符串。 (5)nodeName 1.如果节点是元素节点，nodeName返回元素的名称 2.如果给定节点为属性节点，nodeName返回属性的名称 3.如果给定节点为文本节点，nodeName返回为#text的字符串 (6)nodeType 1、元素节点类型值为1 2、属性节点类型值为2</p><h2>XML DOM</h2><p>第六教案 课题：文档对象模型DOM 目的要求： ?理解DOM模型 ?解析XML文档，生成文档对象 ?操纵DOM模型的对象、接口、属性、方法、事件 重点难点： ?重点：使用DOM API提供的对象和接口对XML进行操作，主 要包括查询、添加、修改、删除接点等操作 ?难点：如何使用API 教学过程： 如图。 作业布置：</p><p>一、文档对象模型(DOM)概述 下面，我们将说明如何通过程序访问XML文档。其中一种方法是通过文档对象模型（Document Object Model，DOM）。在本章中，我们将介绍文档对象模型，并借助几个程序实例解释它的功能。 1.1什么是文档对象模型(DOM)？ 文档对象模型一词在Web浏览器领域并不陌生。窗口、文档和历史等对象都被认为是浏览器对象模型的一部分。然而，任何做过Web开发的人都知道各种浏览器实现这些对象的方式不尽相同。对于如何通过Web访问和操作文档结构这个问题，为了创建更加标准化的方法，W3C提出了目前的W3C DOM规范。 W3C DOM是一种独立于语言和平台的定义，即：它定义了构成DOM的不同对象的定义，却没有提供特定的实现，实际上，它能够用任何编程语言实现。例如，为了通过DOM访问传统的数据存储，可以将DOM实现为传统数据访问功能之外的一层包装。利用DOM中的对象，开发人员可以对文档进行读取、搜索、修改、添加和删除等操作。DOM为文档导航以及操作HTML和XML文档的内容和结构提供了标准函数。 1.2常见的文档模型 常见的文档模型有三类： 线性模型、树型模型、对象模型。 DOM模型是对象模型。 1.3DOM的工作原理及DOM模型结构 当使用DOM对XML文本文件进行操作时，它首先要解析文件，将文件分解为</p><h2>DOM介绍</h2><p>DOM介绍 DOM是Document Object Model的缩写，即文档对象模型，是W3C组件推荐的处理XML的标准接口，定义了所有文档元素的对象和属性，以及访问它们的方法（接口）。W3C文档对象模型（DOM）定义了访问诸如XML和XHTML文档的标准，是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。 W3C DOM被分为3个不同的部分： ●核心DOM 用于任何结构化文档的标准模型 ●XML DOM 用于XML文档的标准模型 ●HTML DOM 用于HTML文档的标准模型 XML DOM定义了访问和处理XML文档的标准方法。XML DOM是XML D ocument Object Model的缩写，即XML文档对象模型，是用于获取、更改、添加或删除XML元素的标准。HTML DOM定义了所有HTML元素的对象和属性，以及访问它们的方法（接口）。 W3C文件对象模型（DOM）可以看作是一个平台或语言中立的（language-neu tral）界面，它允许程序和脚本动态的访问以及更新文档的内容、结构、脚本程序。在这里DOM仅仅只是一种对某种功能和结构的声明，告诉别的对象，具有什么样的概念定义。简单来看，DOM可以看作是一组API（Application Program Interface 即应用程序接口），它把HTML文档，XML文档等看成一个文档对象，在里面存放的是对这些文档操作的属性和方法的定义。DOM技术并不是首先用于XML文档，对于HTML文档来说，早就可以使用DOM来读取里面的数据了。 W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。若以面向对象的思维来看，我们可以把HTML文档或X ML文档看成是一个对象，一个XML文档对象可以包含其它的对象，如节点对象。对XML文档对象的操作实际是对该对象的节点对象的操作，可以对对象进行修改等操作。在DOM中有相应的对象对应我们的实际上的XML文档的对象，那么也可以这样理解DOM，在DOM规范中提供了一组对象对文档结构的访问。 DOM是独立于程序设计语言的，W3C组织以IDL(Interface Definition Langua ge，接口定义语言)的形式定义了DOM中的接口。某种程序语言要实现DOM，需要将DOM接口转换为本语言中的适当结构，为了保证不同语言的不同的DOM之间实现广泛的兼容，W3C组织在DOM规范的附录部分提供了Java和ECMAScript 两种语言的绑定。在特定语言中使用DOM规范就需要定义DOM规范指定的接口，并给出实现这些接口的类的集合，这一过程称作语言绑定。本章讲述DOM规范的Java语言绑定。Java语言通过把DOM规范中的接口用Java的接口写下来，并给出实现这些接口的类集合来实现DOM规范的Java语言绑定。当然了，我们还可以使</p><h2>HTML DOM树的结构和访问</h2><p>一：概念 DOM是一种与平台和语言无关的接口，它允许程序和脚本动态访问和修改文档的内容、结构和类型。它定义了一系列的对象和方法对Html DOM树的节点进行各种随机操作。 二：Html DOM树 DOM（DocumentObjectModel）解析器将XML文档一次性解析，生成一个位于内存中的对象树用以描述该文档。 ◆Document对象：作为树的最高节点，Document对象是对整个文档进行操作的入口。 ◆Element和Attr对象：这些节点对象都是文档某一部分的映射，节点的定级层次恰好反映了文档的结构。 ◆Text对象：作为Element和Attr对象的子节点，Text对象表达了元素或属性的文本内容。Text节点不再包含任何子节点。 ◆集合索引：DOM提供了几种集合索引方式，可以对节点按指定方式进行遍历。索引参数都是从0开始记数的。 Html DOM树中的所有节点都是从Node对象继承而来的。Node对象定义了一些最基本的属性和方法，利用这些方法可以实现对树的遍历，同时，根据属性还可以得知节点的名称、取值并判断其类型。 利用DOM，开发人员可以动态地创建XML、遍历文档、增加/删除/修改文档内容。DOM 提供的API与编程语言无关，所以对一些DOM标准中没有明确定义的接口，不同解析器的实现方法也可能有所差别。 三：Html DOM树的结构 加载文档大体上分为三步： 1．使用CreateObject方法创建分析器实例； 2．设置async属性为False，禁止异步加载，这样当文档加载完毕，控制权才会返回给调用进程，如果想获取文档加载状态，可以读取readyState属性值； 3．使用load方法加载指定文档。 XMLDOM还提供了一种loadXML的方法可以把XML字符串加载到Html DOM树中，使用时只要把XML字符串直接作为该方法的参数即可。</p><h2>JSP DOM介绍</h2><p>JSP DOM介绍 DOM是Document Object Model的缩写，即文档对象模型，是W3C组件推荐的处理XML的标准接口，定义了所有文档元素的对象和属性，以及访问它们的方法（接口）。W3C文档对象模型（DOM）定义了访问诸如XML和XHTML文档的标准，是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。 W3C DOM被分为3个不同的部分： ●核心DOM 用于任何结构化文档的标准模型。 ●XML DOM 用于XML文档的标准模型。 ●HTML DOM 用于HTML文档的标准模型。 XML DOM定义了访问和处理XML文档的标准方法。XML DOM是XML D ocument Object Model的缩写，即XML文档对象模型，是用于获取、更改、添加或删除XML元素的标准。HTML DOM定义所有HTML元素的对象和属性，以及访问它们的方法（接口）。 W3C文件对象模型（DOM）可以看作是一个平台或语言中立的（language-neu tral）界面，它允许程序和脚本动态的访问以及更新文档的内容、结构、脚本程序。在这里DOM仅仅只是一种对某种功能和结构的声明，告诉别的对象，具有什么样的概念定义。简单来看，DOM可以看作是一组API（Application Program Interface 即应用程序接口），它把HTML文档，XML文档等看成一个文档对象，在里面存放的是对这些文档操作的属性和方法的定义。DOM技术并不是首先用于XML文档，对于HTML文档来说，早就可以使用DOM来读取里面的数据了。 W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。若以面向对象的思维来看，可以把HTML文档或XML 文档看成是一个对象，一个XML文档对象可以包含其它的对象，如节点对象。对XML文档对象的操作实际是对该对象的节点对象的操作，可以对对象进行修改等操作。在DOM中有相应的对象对应实际的XML文档的对象，那么也可以这样理解DOM，在DOM规范中提供了一组对象对文档结构的访问。 DOM独立于程序设计语言，W3C组织以IDL(Interface Definition Language，接口定义语言)的形式定义了DOM中的接口。某种程序语言要实现DOM，需要将DOM接口转换为本语言中的适当结构，为了保证不同语言的不同的DOM之间实现广泛的兼容，W3C组织在DOM规范的附录部分提供了Java和ECMAScript两种语言的绑定。在特定语言中使用DOM规范就需要定义DOM规范指定的接口，并给出实现这些接口的类的集合，这一过程称作语言绑定。本章讲述DOM规范的Java 语言绑定。Java语言通过把DOM规范中的接口用Java的接口写下来，并给出实现这些接口的类集合来实现DOM规范的Java语言绑定。当然了，我们还可以使用C</p><h2>js和DOM的区别</h2><p>JavaScript和HTML DOM的区别与联系区别： javascript JavaScript 是因特网上最流行的浏览器脚本语言。很容易使用！你一定会喜欢它的！ JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。 HTML DOM HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。 HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。 通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。 HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。 联系： 通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。 Javascript主要是利用HTML DOM去获得、改变、创建HTML元素，从而达到美化页面、操作页面元素的目标。因此，在Javascript中最常见的就是各种各样的HTML DOM元素以及它们各自的属性。除了这些DOM元素外，Javascript有自己的对象，例如数组。 简单说，可以认为Javascript主要是操纵HTML DOM。两者是不一样的。Javascript是语言，DOM是可以在各种语言中（不仅js，php也有的）动态修改文档的模型。 下面单独拉出JavaScript与DOM的关系给大家详解</p><h2>html对象属性大全</h2><p><! - - ... - -> 批注 <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scroll>...</marquee>预设卷动 <marquee behavior=alternate>...</marquee>来回卷动 <marquee direction=down>...</marquee>向下卷动 <marquee direction=up>...</marquee>向上卷动 <marquee direction=right></marquee>向右卷动 <marquee direction=left></marquee>向左卷动 <marquee loop=2>...</marquee>卷动次数 <marquee width=180>...</marquee>设定宽度 <marquee height=30>...</marquee>设定高度 <marquee bgcolor=FF0000>...</marquee>设定背景颜色 <marquee scrollamount=30>...</marquee>设定卷动距离 <marquee scrolldelay=300>...</marquee>设定卷动时间 <!>字体效果 <h1>...</h1>标题字(最大) <h6>...</h6>标题字(最小) <b>...</b>粗体字 <strong>...</strong>粗体字(强调) <i>...</i>斜体字 <em>...</em>斜体字(强调) <dfn>...</dfn>斜体字(表示定义) <u>...</u>底线 <ins>...</ins>底线(表示插入文字) <strike>...</strike>横线 <s>...</s>删除线 <del>...</del>删除线(表示删除) <kbd>...</kbd>键盘文字 <tt>...</tt> 打字体 <xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效) <plaintext>...</plaintext>固定宽度字体(不执行标记符号) <listing>...</listing> 固定宽度小字体 <font color=00ff00>...</font>字体颜色 <font size=1>...</font>最小字体 <font style =font-size:100 px>...</font>无限增大 <!>区断标记 <hr>水平线 <hr size=9>水平线(设定大小) <hr width=80%>水平线(设定宽度) <hr color=ff0000>水平线(设定颜色) <br>(换行) <nobr>...</nobr>水域(不换行)</p><h2>第二十一讲 JavaScript HTML DOM 对象(二)</h2><p>第二十一讲 JavaScript HTML DOM 对象(二) 一、HTML DOM 对象概述 HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。通过 JavaScript可以重构整个 HTML 文档。包括添加、移除、改变或重排页面上的项目。 要改变页面的某个东西，JavaScript 就需要对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的。 在 1998 年，W3C 发布了第一级的 DOM 规范。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。目前所有的浏览器都执行了这个标准，因此，DOM 的兼容性问题也几乎难觅踪影了。 1.相关概念 1节点 DOM 是这样规定的：整个文档是一个文档节点；每个 HTML 标签是一个元素节点；包含在 HTML 元素中的文本是文本节点；每一个 HTML 属性是一个属性节点；注释属于注释节点。 因此根据 DOM的规定，我们可以认为在HTML 文档中的每个成分都是一个节点。 2Node 层次 节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。 下面这个图片表示一个文档树（节点树）： 3文档树（节点数） 请看下面这个HTML文档：</p><h2>HTML DOM</h2><p>JavaScript HTML DOM<br>通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。<br>HTML DOM （文档对象模型）<br>当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。<br>HTML DOM 模型被构造为对象的树。<br>HTML DOM 树<br>通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。<br>? ? ? ?<br>JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应<br>查找 HTML 元素 通常，通过 JavaScript，您需要操作 HTML 元素。<br>为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：<br>通过 id 找到 HTML 元素 ? 通过标签名找到 HTML 元素 ? 通过类名找到 HTML 元素<br>?<br>通过 id 查找 HTML 元素<br>在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。<br><br></p><p>实例 本例查找 id="intro" 元素：<br>var x=document.getElementById("intro");<br>亲自试一试<br>如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。 如果未找到该元素，则 x 将包含 null。<br>通过标签名查找 HTML 元素<br>本例查找 id="main" 的元素，然后查找 "main" 中的所有 元素：<br>var x=document.getElementById("main"); var y=x.getElementsByTagName("p");<br>提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。 HTML DOM 教程<br>改变 HTML<br>HTML DOM 允许 JavaScript 改变 HTML 元素的内容。 改变 HTML 输出流<br>JavaScript 能够创建动态的 HTML 内容： 今天的日期是： Wed Nov 19 2014 14:20:21 GMT+0800 (中国标准时间) 在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。 实例<br><!DOCTYPE html> <html> <body><br><br></p><h2>文档对象模型(DOM)</h2><p>文档对象模型（DOM） 文档对象模型（DOM）属于VBScript客户端扩展部分，在文档对象模型中提供了大量的对象，这些对象应用于浏览器上，这些对象在我们编写脚本时发挥着重要的作用。 当用户在浏览器中打开一个页面时，浏览器就会自动创建文档对象模型中的一些对象，这些对象存放了HTML页面的属性和其他的相关信息，因为这些对象在浏览器上运行，所以我们有时也称之为浏览器对象。浏览器对象的层次图如图3-10所示，这个文档对象模型是Navigator的文档对象模型。 图3-10 文档对象模型（DOM） 在这个层次图中，每个对象都是它的父对象的属性。例如，Window对象是Document 对象的父对象，所以在引用Document对象时使用Window.Document。在这里，Document 对象也就是Window对象的属性。 对于每一个页面，浏览器都会自动创建Window对象、Document对象、Location对象、Navigator对象、History对象。而基于这个层次结构，还可以创建其他对象。例如，如果在页面中有一个表单对象（名称为MyForm），那么在引用MyForm对象时，就可以使用Window.Document.MyForm。在这里可以看出，Document对象是Window对象的属性，而如果页面中存在form对象，那么，form对象也是Document对象的属性。 在VBScript中如果要引用某个对象的属性，必须通过整个对象属性的完整路径来进行引用，也就是说，必须指明这个对象的属性的所有父对象。 例如，假如在页面上表单对象的名称为MyForm，而在表单中有—个文本框，名称为MyTextBox，而我们希望能够获取这个文本框中的字符串，那么必须从最高一级对象──Window对象开始引用。引用方式如下所示：Window.Document.MyForm.MyTextBox.value。 3．6．2 Windows对象</p><h2>什么是BOM和DOM以及它们的区别</h2><p>BOM 即浏览器对象模型，是在客户端脚本核心的基础上实现的扩张API，通过该API可以使用脚本访问浏览器窗口及其文档对象的各个方面。 BOM从IE3.0/NS3.0开始引入 Window对象其实时BOM中所有对象的核心所有的对象都源自window对象，它表示整个浏览器窗口 DOM技术最初是针对XML文档的解析与控制而制定的技术规范,但可把HTML文档XML 化成XHTML文档使用DOM技术来访问WEB页面文档中的各类对象 DOM技术与XML技术密切相关，涉及的技术内容庞杂，学习难度较高，但掌握了BOM技术后再学习DOM技术就有一定的帮助。 不仅可以在JavaScript之类的脚本语言中使用DOM技术， 在Java之类的重量级程序设计语言中也广泛使用DOM技术 在BOM API中，把WEB浏览器的各个主要外显特性、WEB页面及其标记，内容等都封装成一个个对象，通过这些对象提供的成员访问窗口，文档，元素对象等，并在此基础上实现了对象的事件支持机制。所有BOM对象之间存在一定的关联关系 学习BOM技术主要就是学习如何利用客户端脚本使用BOM对象，通过这些封装的BOM 对象可实现很多DHTML功效。 BOM技术不是标准化的WEB技术，因浏览器而异。正因为如此大大限制了DHTML技术的应用领域和发展钱景。 不同浏览器实现的BOM技术并不统一，这是造成DHTML技术实现差异的主要原因，由此W3C在BOM技术的基础之上进行扩充与改善、优化，制定了新的统一技术规范标准，即DOM文档对象模型技术。 目前W3C为DOM技术规范制定了三个不同的级别，即DOM Level 1/2/3. IE5/NS6开始全面支持DOM Level1。 有时有人也把BOM技术称为DOM Level 0[W3C官方没有此说法] DOM技术的核心是把XML(包括XHTML)文档结构解析为树状结构，每个标记看作是一个节点Node.各节点之间存在某种关系，并通过这些关系来相互访问。 总而言之，W3C定义了一组与浏览器，编程语言无关的标准对象，利用这些对象方便的做HTML和XML文档。Document对象是window对象的一个属性。 DOM描述了组成文档对象的各种对象: Document[]; Anchors[]; Applets[]; Forms[](Elements[]) Embeds[] Links</p><h2>JS操作DOM元素属性和方法</h2><p>JS操作DOM元素属性和方法 Dom元素基本操作方法API，先记录下，方便以后使用。 W3C DOM和JavaScript很容易混淆不清。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。如果没有DOM，JavaScript根本没有Web页面和构成页面元素的概念。文档中的每个元素都是DOM的一部分，这就使得JavaScript可以访问元素的属性和方法。 DOM独立于具体的编程语言，通常通过JavaScript访问DOM，不过并不严格要求这样。可以使用任何脚本语言来访问DOM，这要归功于其一致的API。表3-1列出了DOM元素的一些有用的属性，表3-2列出了一些有用的方法。 表3-1用于处理XML文档的DOM元素属性 属性名描述 childNodes返回当前元素所有子元素的数组 firstChild返回当前元素的第一个下级子元素 lastChild返回当前元素的最后一个子元素 nextSibling返回紧跟在当前元素后面的元素 nodeValue指定表示元素值的读/写属性 parentNode返回元素的父节点 previousSibling返回紧邻当前元素之前的元素 表3-2用于遍历XML文档的DOM元素方法 方法名描述 getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组hasChildNodes() 返回一个布尔值，指示元素是否有子元素 getAttribute(name) 返回元素的属性值，属性由name指定 有了W3C DOM，就能编写简单的跨浏览器脚本，从而充分利用XML的强大功能和灵活性，将XML作为浏览器和服务器之间的通信介质。 从下面的例子可以看到，使用遵循W3C DOM的JavaScript来读取XML文档是何等简单。代码清单3-3显示了服务器向浏览器返回的XML文档的内容。这是一个简单的美国州名列表，各个州按地区划分。 表3-3 动态创建内容时所用的W3C DOM属性和方法 属性/方法描述 document.createElement(tagName) 文档对象上的createElement方法可以创建由tagName指</p><h2>完整的 HTML DOM 对象参考手册</h2><p>Browser 对象参考手册 点击以下链接，可以获得以下对象的更多信息，包括它们的集合、属性、方法以及事件。其中包含大量实例！ 对象描述 Window JavaScript 层级中的顶层对象，表示浏览器窗口。Navigator包含客户端浏览器的信息。 Screen包含客户端显示屏的信息。 History包含了浏览器窗口访问过的 URL。 Location包含了当前 URL 的信息。 HTML DOM 对象参考手册 请点击下面的链接，学习更多有关对象及其集合、属性、方法和事件的知识。其中包含大量实例！ 对象描述 Document代表整个 HTML 文档，可被用来访问页面中的所有元素Anchor代表 <a> 元素 Area代表图像映射中的 <area> 元素 Base代表 <base> 元素 Body代表 <body> 元素 Button代表 <button> 元素 Event代表某个事件的状态 Form代表 <form> 元素 Frame代表 <frame> 元素 Frameset代表 <frameset> 元素 Iframe代表 <iframe> 元素 Image代表 <img> 元素 Input button代表 HTML 表单中的一个按钮 Input checkbox代表 HTML 表单中的复选框 Input file代表 HTML 表单中的文件上传 Input hidden代表 HTML 表单中的隐藏域 Input password代表 HTML 表单中的密码域 Input radio代表 HTML 表单中的单选按钮 Input reset代表 HTML 表单中的重置按钮</p></div>
</div>
<div>
<div>相关文档</div>
<div class="relatedtopic">
<div id="tabs-section" class="tabs">
<ul class="tab-head">
<li id="10316834"><a href="/topic/10316834/" target="_blank">dom对象</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="category">
<span class="navname">相关文档</span>
<ul class="lista">
<li><a href="/doc/6e13448475.html" target="_blank">JSP DOM介绍</a></li>
<li><a href="/doc/9013941185.html" target="_blank">HTML DOM</a></li>
<li><a href="/doc/da16168759.html" target="_blank">js第九章_dom编程详解篇</a></li>
<li><a href="/doc/0917341591.html" target="_blank">HTML文档对象模型(DOM)</a></li>
<li><a href="/doc/f217165202.html" target="_blank">完整的 HTML DOM 对象参考手册</a></li>
<li><a href="/doc/3f18907441.html" target="_blank">XML DOM</a></li>
<li><a href="/doc/8f9051069.html" target="_blank">html对象属性大全</a></li>
<li><a href="/doc/b43216888.html" target="_blank">文档对象模型(DOM)</a></li>
<li><a href="/doc/e715245239.html" target="_blank">DOM文档对象模型介绍</a></li>
<li><a href="/doc/2114386159.html" target="_blank">javascript_dom</a></li>
<li><a href="/doc/6f7853839.html" target="_blank">HTML DOM树的结构和访问</a></li>
<li><a href="/doc/908548748.html" target="_blank">js获取DOM节点元素</a></li>
<li><a href="/doc/dd1656284.html" target="_blank">DOM动态创建表格</a></li>
<li><a href="/doc/054651599.html" target="_blank">jquery中获得jq对象(dom对象集合)的方法</a></li>
<li><a href="/doc/f79957020.html" target="_blank">JS 里操作 DOM 的几个标准属性与方法</a></li>
<li><a href="/doc/3a17795696.html" target="_blank">第十五章 JavaScript_HTML DOM对象</a></li>
<li><a href="/doc/7917624190.html" target="_blank">第6章 js DOM和事件处理</a></li>
<li><a href="/doc/a518927033.html" target="_blank">DOM文档对象模型</a></li>
<li><a href="/doc/e814220110.html" target="_blank">dom-html-checkbox对象属性和方法</a></li>
<li><a href="/doc/288120520.html" target="_blank">HTML DOM简要教程</a></li>
</ul>
<span class="navname">最新文档</span>
<ul class="lista">
<li><a href="/doc/fb19273140.html" target="_blank">高中化学必修一知识点归纳总结</a></li>
<li><a href="/doc/b719158917.html" target="_blank">高中化学必修一知识点归纳总结</a></li>
<li><a href="/doc/8419195746.html" target="_blank">(完整版)高中化学必修2知识点归纳总结</a></li>
<li><a href="/doc/6f19034981.html" target="_blank">化学必修一知识点归纳笔记</a></li>
<li><a href="/doc/2719396810.html" target="_blank">高中化学必修知识点总结归纳</a></li>
<li><a href="/doc/1319337980.html" target="_blank">高中化学必修知识点总结大全</a></li>
<li><a href="/doc/fb19273138.html" target="_blank">内科常见药物归纳</a></li>
<li><a href="/doc/fc19273139.html" target="_blank">循环系统的药物习题中国医学科学院</a></li>
<li><a href="/doc/db19211757.html" target="_blank">兽用药品分类</a></li>
<li><a href="/doc/b119158916.html" target="_blank">兽医药理学课件：第4章 血液循环系统药物</a></li>
<li><a href="/doc/9519184183.html" target="_blank">第四章 血液循环系统</a></li>
<li><a href="/doc/9719184182.html" target="_blank">循环系统疾病用药与注意事项</a></li>
<li><a href="/doc/7819336816.html" target="_blank">第四章-循环系统药物</a></li>
<li><a href="/doc/6a19034980.html" target="_blank">循环系统疾病治疗药品</a></li>
<li><a href="/doc/2519396809.html" target="_blank">循环水加药系统验收</a></li>
<li><a href="/doc/b119158915.html" target="_blank">校园安全知识</a></li>
<li><a href="/doc/f619273137.html" target="_blank">校园安全小知识</a></li>
<li><a href="/doc/d519211756.html" target="_blank">校园安全知识小常识</a></li>
<li><a href="/doc/ae19240464.html" target="_blank">第九周校园活动安全常识</a></li>
<li><a href="/doc/fe19273136.html" target="_blank">校园安全小常识10条简短</a></li>
</ul>
</div>
</div>
<script>
var sdocid = "90c5de4de45c3b3567ec8bb4";
</script>
<div class="footer">
<p><a href="/tousu.html" target="_blank">侵权投诉</a> © 2013-2023 www.wendangku.net <a href="/sitemap.html">站点地图</a> | <a href="https://m.wendangku.net">手机版</a></p>
<p><a href="https://beian.miit.gov.cn" target="_blank">闽ICP备11023808号-7</a> 本站文档均来自互联网及网友上传分享，本站只负责收集和整理，有任何问题可通过上访投诉通道进行反馈</p>
</div>
<script type="text/javascript">foot();</script>
</div>
</body>
</html>
