DOM


表单事件是指在form元素的开始标记内声明的事件
【例4-15】演示利用onmouseover事件控制和显示区域热点。
2016年9月24日星期六
12
2016年9月24日星期六
7
Document对象
Document对象的常用方法
var x= document.getElementsByTagName("p");//返回标记名为p的子元素列表(数组) var x=document.createElement("div") ;//创建一个div元素节点 var txt=document.createTextNode("这是动态创建的内容");//创建一段文本
2016年9月24日星期六
9
客户端事件
在HTML元素的开始标记内,可以定义与用户交互的客户端事件。 可以利用JavaScript或者jQuery实现事件被触发时执行的代码。 鼠标事件
2016年9月24日星期六
10
客户端事件
键盘事件
窗体事件
2016年9月24日星期六
11
客户端事件
表单事件
2016年9月24日星期六
5
计时器
计时器提供了一个可以异步延时执行JavaScript代码片段的
能力。
注意JavaScript本身是单线程的(在一定时间范围内仅一部
分脚本能运行),利用计时器则可以突破这种限制,从而规 划一些在指定时间后自动执行的代码。
【例4-13】演示利用JavaScript函数开始和停止计时。
浏览器对象和客户端事件
DOM
DOM(Document Object Model for HTML,文档对象模型)是W3C制定的一 种与客户端浏览器、平台和语言无关的HTML编程接口,它提供了对HTML文档 的结构表述,定义了访问和操作HTML文档的标准方法,而且可被其他编程语言 或脚本使用。例如: <html> <head> <title>文档标题</title> Element:head </head> Element:title <body> <h1>标题1</h1> Text:"文档标题" <a href=”” id=”myLink”>我的链接</a> </body> </html>
2016年9月24日星期六
3
Windows对象
பைடு நூலகம்利用浏览器提供的window对象,可以控制浏览器窗口。
2016年9月24日星期六
4
获取浏览器窗口信息 //浏览器窗口大小 var windowWidth = window.outerWidth; var windowHeight = window.outerHeight; //浏览器窗口相对于屏幕左上角的位置 var windowX = window.screenX; var windowY = window.screenY; //浏览器工作区(不包括工具条、菜单条、状态条) var viewportWidth = window.innerWidth; var viewportHeight = window.innerHeight; 【例4-12】演示获取浏览器窗口信息的基本用法
2016年9月24日星期六
8
Document对象——node对象 调用Node对象的属性及方法来查询、设置或者删除一个节点的相关属性:
(1)childNodes属性: 返回指定节点的所有子节点,并将其保存在数组中 (2)nodeName属性: 返回指定节点的HTML标记名称 (3)innerHTML属性: 设置或返回该标签元素开始和结束标记之间包含的HTML (4) appendChild方法: 向当前节点对象追加节点,一般用于给页面动态添加内容的场合。 (5)removeChild方法: 移除当前节点的子节点,并返回被移除的节点对象。
2016年9月24日星期六
document Element:html Element:body Element:a Attribute:"id" Text:"标题1" Attribute:"href" Text:"我的链接"
Element:h1
2
客户端浏览器公开的DOM树中html元素对象的层次结构。
2016年9月24日星期六
6
screen对象 screen对象用于获取客户端屏幕和渲染能力等信息。属性: (1)availHeight:获取屏幕的工作区高度,不包括Windows 任务栏可用高度。 (2)availWidth:获取屏幕的工作区宽度,不包括Windows 任务栏可用宽度。 (3)width:屏幕宽度。 (4)height:屏幕高度。 (5)colorDepth:颜色深度,即可用的颜色数量。 【例4-14】利用Screen对象返回客户端屏幕的高度和宽度等信 息。
合集下载

DOM基础

DOM基础

DOM的级别 DOM
Core和DOM DOM Level 1, 分成DOM Level 1 Core DOM Level 1 HTML DOM 2,分成DOM Level 2 Core Core、 DOM Level 2, DOM Views、 DOM Level 2 Views Events、 DOM Level 2 Events Style、 DOM Level 2 Style Specification、 DOM Level 2 Traversal and Range Specification DOM Level 2 HTML DOM Level 3,还没有哪个浏览器可以完全实现DOM Level 3 HTML规范 3, DOM HTML
DOM 冒泡事件流
DOM 捕获事件流
Q&A
Thank You !来自DOM 1 HTML方式的话 ,得到id属性的字符串的值
myElement.id
DOM 节点树
DHTML本质上就是DOM ,DOM DOM树 DOM DOM树可以由HTML DHTML DOM HTML 代码直接构建DOM DOM树,也可以通过js js构建DOM DOM树, DOM js DOM 如果没有脚本语言,DOM DOM树的修改只能通过修改 DOM HTML源代码进行 HTML
DOM CURD
脚本开发人员可以通过文档对象的属性、方法和事 件来掌控、操纵和创建动态的网页元素。每一个网 页元素(一个HTML HTML标签)都对应着一个对象。 HTML
DOM 节点信息
• nodeName • nodeValue • nodeType
元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是 #document 对于文本节点, 属性包含文本。 对于文本节点,nodeValue 属性包含文本。 对于属性节点, 属性包含属性值。 对于属性节点,nodeValue 属性包含属性值。 nodeValue 属性对于文档节点和元素节点是不可用的。 属性对于文档节点和元素节点是不可用的。

什么是DOM及DOM操作?

什么是DOM及DOM操作?

什么是DOM及DOM操作?什么是 DOM ?DOM(⽂档对象模型)是针对于xml但是扩展⽤于html的应⽤程序编程接⼝,定义了访问和操作html的⽂档的标准。

W3C⽂档对象模型是中⽴于平台和语⾔之间的接⼝,它允许程序和脚本动态的访问和更新⽂档的内容、结构、样式。

总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。

DOM 分层节点DOM的分层节点⼀般被称作是DOM树,树中的所有节点都可以通过脚本语⾔例如js进⾏访问,所有HTMlL元素节点都可以被创建、添加或者删除。

在DOM分层节点中,页⾯就是⽤分层节点图表⽰的。

整个⽂档是⼀个⽂档节点,就想是树的根⼀样。

每个HTML元素都是元素节点。

HTML元素内的⽂本就是⽂本节点。

每个HTML属性时属性节点。

当咱们访问⼀个web页⾯时,浏览器会解析每个HTML元素,创建了HTML⽂档的虚拟结构,并将其保存在内存中。

接着,HTML页⾯被转换成树状结构,每个HTML元素成为⼀个叶⼦节点,连接到⽗分⽀。

考虑以下 Html 结构:<!DOCTYPE html><html lang="en"><head><title>A super simple title!</title></head><body><h1>A super simple web page!</h1></body></html>在这个结构的顶部有⼀个document,也称为根元素,它包含另⼀个元素:html。

html元素包含⼀个head,⽽ head ⼜有⼀个title。

然后body 包含⼀个h1。

每个HTML元素都由特定类型(也称为接⼝)表⽰,并且可能包含⽂本或其他嵌套元素:document (HTMLDocument)|| --> html (HTMLHtmlElement)|| --> head (HtmlHeadElement)| || | --> title (HtmlTitleElement)| | --> text: "A super simple title!"|| --> body (HtmlBodyElement)| || | --> h1 (HTMLHeadingElement)| | --> text: "A super simple web page!"每个HTML元素都来⾃Element,但其中很⼤⼀部分都是专⽤的。

dom 分子组成

dom 分子组成

dom 分子组成
DOM,全称为溶解有机物,是水生生态系统中一种重要的化学组成部分。

它是由各种生物过程产生的复杂混合物,主要包括蛋白质、碳水化合物、脂肪酸、氨基酸等有机化合物。

DOM的分子组成相当复杂,且因来源和降解程度的不同而有所差异。

首先,蛋白质是DOM中重要的组成部分。

蛋白质由氨基酸通过肽键连接而成,而氨基酸的结构特点是至少含有一个氨基和一个羧基,并且它们都连接在同一个碳原子上。

这个碳原子还连接一个氢原子和一个侧链基团,这个侧链基团决定了氨基酸的种类。

在DOM中,蛋白质可能经过水解等过程,形成各种大小的肽段和游离的氨基酸。

其次,碳水化合物也是DOM的重要组成部分。

碳水化合物是由碳、氢、氧三种元素组成的,其中氢氧的比例通常为2:1,与水的比例一致,因此称为碳水化合物。

在DOM中,碳水化合物可能以单糖、寡糖和多糖的形式存在,它们是由糖苷键连接而成的。

此外,DOM中还含有各种脂肪酸和氨基酸等有机化合物。

这些化合物可能来自于生物的代谢过程,也可能来自于外界环境的输入。

它们在DOM中的存在形式和比例,受到许多因素的影响,如温度、pH值、氧化还原条件等。

总的来说,DOM的分子组成非常复杂,包括蛋白质、碳水化合物、脂肪酸、氨基酸等各种有机化合物。

这些化合物在DOM中的存在形式和比例,对于水生生态系统的物质循环和能量流动具有重要的影响。

因此,对DOM的分子组成进行深入的研究,有助于我们更好地理解水生生态系统的功能和过程。

DOM基础讲解

DOM基础讲解

DOM基础学习要点:1.DOM 介绍2.查找元素3.DOM 节点4.节点操作DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口)。

DOM描绘了一个层次化的节点树,运行开发人员添加、移除和修改页面的某一部分。

DOM脱胎于Netscape及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正跨平台、语言中立的方式。

一.DOM介绍DOM 中的三个字母,D(文档)可以理解为整个Web 加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构。

DOM 有三个等级,分别是 DOM1、DOM2、DOM3,并且 DOM1 在 1998 年 10 月成为 W3C 标准。

DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera1.7+。

PS:IE 中的所有 DOM 对象都是以 COM 对象的形式实现的,这意味着 IE 中的 DOM 可能会和其他浏览器有一定的差异。

1.节点加载HTML页面时,Web浏览器生成一个树型结构,用来表示页面内部结构。

DOM将这种树型结构理解为由节点组成。

节点树从上图的树型结构,我们理解几个概念,html标签没有父辈,没有兄弟,所以html标签为根标签。

head标签是html子标签,meta和title标签之间是兄弟关系。

如果把每个标签当作一个节点的话,那么这些节点组合成了一棵节点树。

PS:后面我们经常把标签称作为元素,是一个意思。

2.节点种类:元素节点、文本节点、属性节点。

<div title="属性节点">测试 Div</div>二.查找元素W3C 提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作。

什么是DOM

什么是DOM

什么是DOM???DOM 是Document Object Model的缩写,即文档对象模型!理解为一套浏览器解读和显示的标准!dom提供了很多标签和页面样式标准,一定的接口(方法)规定浏览器需要完成一定的操作,单单javascript只能组成一些算法,实际上没法操作页面!只有通过DOM对HTML 和XML文档进行读取,搜索,修改,添加和删除等操作来间接操作页面样式。

DOM是独立于语言和平台的一套标准接口,定义了构成DOM的不同对象,比恩没有提供特定的实现,可以用任何编程语言实现。

利用DOM中的对象,开发人员可以对HTML和XML文档进行读取,搜索,修改,添加和删除等操作。

W3C DOM提供了一组描述HTML及XML文件的标准对象和一个用来访问和操作这类文件的标准界面。

从面向对象的角度看,可以把HTML文档和XML文档看成是一个对象。

一个XML文档对象可以包含其他的对象,如节点对象。

在DOM中有相应的对象来对应实际XML文档的对象。

DOM规范中提供了一组对象用来实现对文档结构的访问。

各种基于DOM规范的解析器必须按照DOM规范在内存中建立数据模型。

DOM规范的核心是树模型。

解析XML文件的解析器,通过读入XML文件在内存中建立一个树模型,(通过特定算法存储数据,也通过相应的算法操作数据)DOM是一组API接口,接口里面存放的不同类型的未实例化对象对应着XML文档中不同类型的节点和数据。

用编程语言实现这些接口,就可以通过对象来操作相应的XML文档。

DOM为一套规范(包括代码解析标准和代码组织标准)如:DOM文档:interface document{.//有很多方法,每个方法的实现文本也都给出来了}interface Node{}interface NodeList{}interfact NamedNodeMap{}interfact Element{}interfact Text{}通过每个接口的方法的实现来创建对象(这些对象也都已经定义好了)如通过document接口创建document对象,一个document对象其本质就是一个HMTL文档,即为一个htnl标记。

DOM详解——精选推荐

DOM详解——精选推荐

DOM详解⼀、简介DOM即(Document Object Model):⽂档对象模型,⽤来将标记型⽂档封装成对象,并将标记型⽂档中的所有内容(标签、⽂本、属性等)都封装成对象。

即标记型⽂档的⼀种解析⽅式。

因为封装为对象就可以对其中的属性和⾏为进⾏调⽤,以便于对这些⽂档及⽂档中的内容进⾏更⽅便的操作。

DOM解析⽅式:将标记型⽂档解析为⼀颗dom树,⽽树中的内容都封装为节点对象。

按照标签的层次关系体现出标签的所属,形成⼀个树状结构。

所以我们将DOM解析⽂档形成的document对象称为dom树,⽽树中的标签以及⽂本甚⾄属性称为节点。

这个节点也称为对象。

标签通常也称为页⾯中的元素。

注意:这个DOM解析的好处是可以对树中的节点进⾏任意操作,如增删查改。

但也有弊端:这种解析需要将标记型⽂档加载进内存。

意味着如果⽂档体积很⼤时较为浪费空间。

⼆、另⼀种解析⽅式:SAX是由⼀些组织定义的⼀种民间常⽤的解析⽅式,并不是w3c标准,⽽DOM是w3c的标准。

SAX的解析⽅式:基于事件驱动的解析。

好处:获取数据的速度快。

弊端:不遵从增删查改操作。

三、DOM三种模型DOM level 1:将html⽂档封装成对象。

DOM level 2:在level1的基础上加⼊了新功能,⽐如解析名称空间。

DOM level 3:将xml⽂档封装成了对象。

四、DHTML:动态html不是⼀门语⾔,⽽是多项技术综合体的简称,这些技术包括HTML、CSS、DOM、JavaScript。

四种技术(语⾔)在动态html中扮演的⾓⾊:HTML:⽤标签封装数据。

即负责提供标签,对数据进⾏封装,⽬的是便于对该标签中的数据进⾏操作。

CSS:对数据样式进⾏定义。

即负责提供样式属性,对标签中的数据进⾏样式的定义。

DOM:将⽂档和标签等所有内容进⾏解析。

即负责将标记型⽂档及⽂档中的内容进⾏解析。

并封装成对象,在对象中定义了更多的属性和⾏为,便于对对象进⾏操作。

dom基本概念

dom基本概念DOM基本概念DOM(Document Object Model)是一种用于处理HTML和XML文档的编程接口。

它将文档表示为一个树形结构,其中每个节点都是一个对象,每个对象都有其自身的属性和方法。

DOM的基本概念包括节点、元素、属性、文本、注释、文档对象等。

节点节点是DOM中最基本的单位,它可以是元素、属性、文本、注释等。

每个节点都有其自身的类型、名称、值等属性。

节点之间可以存在父子关系、兄弟关系等。

在DOM中,节点可以通过节点类型来进行分类,例如元素节点、属性节点、文本节点等。

元素元素是DOM中的一种节点类型,它表示HTML或XML文档中的标签。

每个元素都有其自身的标签名、属性、子元素等。

在DOM中,元素节点可以通过标签名来进行访问,例如document.getElementsByTagName()方法可以获取文档中指定标签名的所有元素。

属性属性是DOM中的一种节点类型,它表示HTML或XML文档中的属性。

每个属性都有其自身的名称和值。

在DOM中,属性节点可以通过元素节点来进行访问,例如element.getAttribute()方法可以获取元素节点的指定属性值。

文本文本是DOM中的一种节点类型,它表示HTML或XML文档中的文本内容。

每个文本节点都有其自身的文本值。

在DOM中,文本节点可以通过元素节点来进行访问,例如element.firstChild.nodeValue 可以获取元素节点的文本内容。

注释注释是DOM中的一种节点类型,它表示HTML或XML文档中的注释内容。

每个注释节点都有其自身的注释值。

在DOM中,注释节点可以通过元素节点来进行访问,例如element.childNodes可以获取元素节点的所有子节点,其中包括注释节点。

文档对象文档对象是DOM中的一种节点类型,它表示整个HTML或XML文档。

文档对象是DOM树的根节点,它包含了整个文档的所有元素、属性、文本、注释等节点。

什么是DOM

什么是DOM1. 什么是DOM: document object modelDOM: 专门操作⽹页内容的⼀套函数和对象DOM还是⼀个标准,由W3C制定为什么:⼴义JS=ECMAScript + DOM + BOM核⼼语法操作⽹页内容访问浏览器软件要想操作⽹页内容,为页⾯添加交互效果,其实只能⽤DOM函数和对象。

问题: 早起的DOM没有标准解决: W3C制定了统⼀的DOM函数和对象的标准。

⼏乎所有浏览器100%兼容。

特例: IE8何时: 只要操作⽹页内容,为⽹页添加交互⾏为,只能⽤DOM包括: 5件事: 增删改查事件绑定2. DOM树:什么是: 在内存中,集中保存⼀个⽹页中所有内容的树形结构为什么: 树形结构是最直观的保存上下级包含关系的数据结构。

⽽⽹页中的HTML标签,刚好也是⽗⼦嵌套的上下级包含关系。

所以,⽹页中每⼀项内容,在内存中,都是存在⼀棵树形结构上的。

如何:1. 当浏览器读取到⼀个.html⽂件时,会先在内存中创建⼀个document对象,作为整棵树的树根对象2. 开始扫描.html中每个元素,⽂本等内容。

每扫描到⼀项内容,就在document下对应位置创建⼀个节点(node)对象。

3. 查找元素:1. 不需要查找,就可直接获得:document.documentElement <html>document.head <head>document.body <body>2. 按节点间关系查找:树上的每个节点都不是孤⽴存在的。

都和上下左右的节点之间有各种各样的关系,可以互相访问到。

包括:节点树: 包含所有节点内容的完整树结构2⼤类关系:1. ⽗⼦关系:节点.parentNode获得当前节点的⽗节点⽗节点.childNodes 获得当前⽗节点下的所有直接⼦节点的集合。

强调: childNodes返回的是⼀个类数组对象,今后我都简称集合。

⽗节点.firstChild 获得当前⽗节点下的第⼀个直接⼦节点。

什么是Dom?

什么是Dom?Dom:英文全称-Document Object Model 译成中文即是:文档对像模型.听起来很术语,其实就是文档内容的结构关系.文档类型可以是HTML或XMLDom具有对Html文件和XML文件元素的访问控制能力,简单点说利用Dom可以对某个html或xml文件添加,修改,删除元素.更改其现有的结构或内容.如果你未接触过Dom,你会发现Dom太神奇了...不管你是菜鸟还是高手,在这个注重用户体验的web设计时代里,Dom是至关重要的. 如果你是一名有经验的web设计者,你应该看到过或用过以下这些命令或方法getElementById getElementsByTagName offsetParent appendChild getAttribute 不过至今仍有人认为这些都是JavaScript中的东西,其实不然,这些全是Dom中很重要的方法!Dom手册下载地址Dom并非一种编程语言,Dom只是提供了一系列的接口,利用Dom的这些接口可以很方便的读取,修改,删除Html和XML 文件中的标签元素和文本内容.在这里我们侧重于讲解Dom对Html文件的操作.那么Dom是如何读取和管理Html文件的呢?首先你必须要了解html的源码结构.看图如果你有学过或写过Html,那么你会对上图一目了然.我想要说明的就是Html的源码结构是有层次的,而且标签与杯签之间还存在着父子,或相邻的关系.上图不难看出HTML这个标签是最顶级的.最上层的.也可以理解成html文件的根.其次是Head与Body标签.这两个标签是相邻的.也可以理解成兄弟关系.但他们都属于html的子标签或称为子元素.然后Body标签内包含了Table,Div,Div.这三个标签你可以理解为Body的子标签或子元素.Body为父他们为子.Head所含的标签也是同理.另外第一个div内包含了另一个div.第二个div内包含了一些文本内容.他们的关系也是父子关系.Dom正是利用了Html源码的这种关系结构.而巧妙的在你的html源码中行走自如.犹如一位武林高手一般.尽情地施展他的"凌波微步".看下面的代码.代码结构与上图是吻合的.不同的是多了几个按扭来执行一些dom的指令操作.运行以后你便走进了Dom的神秘与精彩世界!!!<html><head><title>这是网页的标题</title><link/><meta/><body><table border="1"><table><div><div></div></div><div>文本内容</div><input type="button"value="弹出html标签"onclick="alert_HTML()"/><input type="button"value="弹出body标签"onclick="alert_Body()"/><input type="button"value="弹出head标签"onclick="alert_Head()"/><input type="button"value="修改网页标题"onclick="up_Title()"/><input type="button"value="更改表格"onclick="up_Table()"/><input type="button"value="获取第一个div和他的子元素"onclick="get_Div()"/><input type="button"value="更改第二个div中的文本内容"onclick="up_div_text()"/> </body></html><script type="text/javascript">function alert_HTML(){ //弹出html标签函数var html = document.documentElement;alert(html.tagName);}function alert_Body(){ //弹出body标签函数var body = document.body;alert(body.tagName);}function alert_Head(){//弹出head标签函数,var html = document.documentElement;//head是html标签中的第一个子元素//childNodes可以获取某一标签内的所有子元素var head = html.childNodes[0].tagName;alert(head);}function up_Title(){//注意title标签内的"这是网页的标题"将被改变.document.title = "Web圈提提供的Dom图解入门教程";}function up_Table(){//为表格添加行,添加列并写入文本内容var Table = document.getElementsByTagName("table")[0];//获取网页内第一个表格var Tr = Table.insertRow(0);//为表格添加一行var Td = Tr.insertCell(0);//为新建的行,添加一列Td.innerHTML = "我是表格中的文本"; //利用innerHTML属性向td写入文本}function get_Div(){//获取第一个div和他的孩子var div = document.getElementsByTagName("div")[0];alert("我是第一个"+div.tagName);var child_div = div.childNodes[0];//虽然是子div,但是按解析顺序他在该页内是第二个出现的div,alert("我是第一个div的子元素.我也是"+child_div.tagName);}function up_div_text(){var div = document.getElementsByTagName("div")[2];//其实如果按解析顺序该div在本页应该是第3个,div.innerHTML = "欢迎阅读web圈提供的Dom图解入门教程. 作者:康董";}</script>上面演示的代码实例.略有繁琐.并非是Dom最优秀的使用方法.但足以让你了解Dom是怎样工作的.下面将演示Dom迅速访问某个标签的方法.可以让你在成千上万个html标签中迅速找到你想的某个标签.比如你可以为你的html标签添加一个ID属性.在Dom中有一个getElementById方法.该方法可以根据html标签的ID属性值,迅速找到这个标签.然后对其进行更改或其他操作.下面的代码我只为table和第一个div添加一个id属性值.利用getElementByid迅速向able和第一个div的子div添加内容<html><head><title>这是网页的标题</title><link/><meta/><body><table id="a"border="1"><table><div id="b"><div></div></div><div>文本内容</div><input type="button"value="更改table"onclick="up_table()"/><input type="button"value="为第一个div的子div写入文本"onclick="up_div()"/></body></html><script type="text/javascript">function up_table(){//更改table函数var Table = document.getElementById("a");//根据id获取标签元素var Tr = Table.insertRow(0);var Td = Tr.insertCell(0);Td.innerHTML = "欢迎光临Web圈,网址:";}function up_div(){//为第一个div的子div添加文本内容var div = document.getElementById("b");div.childNodes[0].innerHTML="我是子div,我被写入文本了";}</script>上面的两个例子中分别使用了Dom的以下方法:document:对当前整个Html网页的引用documentElement:获取html和xml文件中的根元素.在html文件中总是返回Html标签.在xml文件中总是返回最顶层的那个元素getElementsByTagName:根据指定的标签名称,来获取网页中所有相同的标签元素.如:table,或div.则会找出网页中所有table 元素,或所有div元素.以一个类似数组的方式来返回对这些元素的引用.getElementById:根据指定的标签id值.来寻找标签元素.并返回对该标签的引用childNodes:获取某个标签下所有的子标签元素,也就是我所说的孩子元素.并以一个类似数组的方式来返回对所有子元素的引用insertRow:为表格增加一行insertCell:为表格的某行增加一列该入门教程只讲解了Dom中的一部份知识,请了解更多关于Dom的内容Dom可以在网页中做什么?HTML Dom中最常用的几个方法之查找元素1.Dom之引用当前整个网页文档:document2.Dom如何快速在网页中查找某一元素:getElementById3.Dom中查找一组标签,具有相同名称的标签元素:getElementsByTagName4.根据标签的Id属性值或name属性来查找多个元素:getElementsByNameDom中创建,添加,删除,修改,替换,复制,网页中的标签和文本内容的方法如下.1.在网页中的创建一个标签元素:createElement2.创建一段文本内容:createTextNode3.向网页中添加元素:appendChild4.删除元素的Dom方法是:removeChild5.修改网页中标签元素的属性:setAttribute6.替换已存在的标签或元素:replaceChild7.复制克隆已存在的标签或元素:cloneNode8.获取和修改元素内的html标签与文本内容:innerHTML9.获取或修改元素的文本内容,仅支持IE:innerText10.获取或修改元素的文本内容,支持FF:textContentHTML Dom中还专门提供了一组接口用来操作网页中的表格Table元素1.HTML Dom中的insertRow方法可以为表格增加一行2.删除表格中一行的方法是:deleteRow3.HTML Dom中的insertCell方法可以为表格某行中增加一列4.删除行中的一列的方法是:deleteCell5.HTML Dom中的createCaption方法可以为表格创建一个标题6.HTML Dom中的createTHead方法可以为表格创建一个Thead7.HTML Dom中的createTFoot方法可以为表格创建一个TFoot8.引用表格中所有行的属性为:rows9.引用表格中某行的所有列:cells10.移动表格中的行,只支持IE:moveRow Dom中操作父元素,子元素,兄弟元素的相关命令1.获取父元素的指令是:parentNode2.获取元素中第一个子元素:firstChild3.获取元素中最后面的那个子元素:lastChild4.获取元素中所有的子元素:childNodes5.获取前一个兄弟元素:previousSibling6.获取后一个兄弟元素作者:康董2010-10-22。

dom的提取方法

dom的提取方法一、DOM是什么?1.1 DOM的概念。

DOM啊,就是文档对象模型(Document Object Model)的简称。

这就好比是网页的一个大地图,把网页里的各种元素,像文字、图片、链接这些啊,都当作一个个小物件放在这个地图里,每个小物件都能被找到、被操作。

它是一种让我们可以通过脚本语言(像JavaScript)来和网页交互的接口。

比如说,你看到一个网页上有个按钮,你想让这个按钮在被点击的时候变色,那就要靠DOM来找到这个按钮元素,然后对它进行操作。

1.2 DOM的重要性。

这DOM的重要性可大了去了。

它就像一把万能钥匙,能打开网页里各个元素的大门。

没有它,网页就像是一个封闭的城堡,我们只能看,不能做任何改变。

对于开发者来说,DOM就是他们施展魔法的魔杖。

就像“巧妇难为无米之炊”,没有DOM,再厉害的开发者也没法让网页变得更加生动、交互性更强。

二、DOM的提取方法。

2.1 通过标签名提取。

最常见的一种方法就是通过标签名来提取DOM元素。

比如说,网页里有好多段落(<p>标签),你想把这些段落都找出来。

那就可以使用像JavaScript里的document.getElementsByTagName('p')这样的方法。

这就像是在一群人里按照衣服颜色(这里就是标签名)来找人一样。

一下子就能把所有穿同样颜色衣服(相同标签名)的人(元素)都找出来。

不过呢,这种方法有时候可能会找出来太多元素,就像一网下去捞了好多鱼,有些可能不是你想要的。

2.2 通过类名提取。

还有一种办法是通过类名来提取。

如果网页里有些元素被设置了特定的类名,那我们就可以用这个类名来找到它们。

就好比在一个班级里,你要找那些戴眼镜的同学(这里戴眼镜就相当于类名)。

在JavaScript里可以用document.getElementsByClassName('类名')。

但是要注意哦,一个类名可能被多个元素使用,就像可能有好几个同学都戴眼镜,所以得到的结果可能是一个元素集合。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
相关文档
最新文档