- 浏览: 88480 次
- 性别:
文章分类
- 全部博客 (151)
- Spring-MVC学习 (5)
- 偶然间发现 (2)
- easyUi学习 (7)
- web项目相关技术 (4)
- java学习 (26)
- webService (4)
- 一些工具的安装使用 (7)
- js学习 (20)
- Sping学习 (7)
- mybatis学习 (5)
- 定时器 (4)
- oracle (2)
- JSP学习 (6)
- HTML一些标签 (1)
- web服务 (2)
- 偶尔得到的地址 (2)
- 常用的代码记录 (2)
- 设计模式 (1)
- java常使用的开源API (1)
- maven (1)
- Socket (1)
- nginx (2)
- jquery (3)
- poi (2)
- 写过的工具类 (19)
- 微信开发 (2)
- mysql (1)
- freemarker (2)
- ftp (1)
- 用过的软件 (1)
- jconsole (1)
- log4j (1)
- redis的简单入门使用 java调用redis (0)
- redis的使用 (2)
- 生活相关的 (1)
最新评论
-
chokee:
...
easyUi学习之开启行编辑模式增删改操作 -
lijie_insist:
就是有的界面需要显示天气啊!所以你要调用天气的接口啊 因为很多 ...
免费的天气接口的一个demo -
zhglance:
请问这是干什么用的呢?
免费的天气接口的一个demo
HTML DOM访问
坚持接着把w3chool上的实例学完,最近因为上班有点小忙 都没按时的学习了
访问 HTML 元素(节点)
访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素:
·通过使用 getElementById() 方法
·通过使用 getElementsByTagName() 方法
·通过使用 getElementsByClassName() 方法
getElementById()通过ID查找HTML元素
获取 id="intro" 的元素:
getElementsByTagName()通过标签查找所有HTML元素
getElementsByTagName() 返回带有指定标签名的所有元素
getElementByClassName()查找相同类名的所有HTML元素
ps:getElementByClassNameInternet Explorer 5,6,7,8 中无效
HTML DOM - 修改
修改 HTML DOM 意味着许多不同的方面:
·改变 HTML 内容
·改变 CSS 样式
·改变 HTML 属性
·创建新的 HTML 元素
·删除已有的 HTML 元素
·改变事件(处理程序)
创建 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML 属性。
下面的例子改变一个 <p> 元素的 HTML 内容:
改变 HTML 样式
通过 HTML DOM,您能够访问 HTML 元素的样式对象。
下面的例子改变一个段落的 HTML 样式:
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
使用事件
HTML DOM 允许您在事件发生时执行代码。
当 HTML 元素”有事情发生“时,浏览器就会生成事件:
·在元素上点击
·加载页面
·改变输入字段
下面两个例子在按钮被点击时改变 <body> 元素的背景色:
创建新的 HTML 元素 - appendChild()
如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。
创建了一个新的 <p> 元素:
如需向 <p> 元素添加文本,您首先必须创建文本节点。这段代码创建文本节点:
然后必须向 <p> 元素追加文本节点:
最后,必须向已有元素追加这个新元素。这段代码查找到一个已有的元素:
这段代码向这个已存在的元素追加新元素:
创建新的 HTML 元素 - insertBefore()
上一个例子中的 appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此,您可以使用 insertBefore() 方法:
删除已有的 HTML 元素
如需删除 HTML 元素,您必须清楚该元素的父元素:
ps:能否在不引用父元素的情况下删除某个元素?
很抱歉。DOM 需要了解您需要删除的元素,以及它的父元素。
这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:
替换 HTML 元素
如需替换 HTML DOM 中的元素,请使用 replaceChild() 方法:
坚持接着把w3chool上的实例学完,最近因为上班有点小忙 都没按时的学习了
访问 HTML 元素(节点)
访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素:
·通过使用 getElementById() 方法
·通过使用 getElementsByTagName() 方法
·通过使用 getElementsByClassName() 方法
getElementById()通过ID查找HTML元素
获取 id="intro" 的元素:
document.getElementById("intro");
getElementsByTagName()通过标签查找所有HTML元素
getElementsByTagName() 返回带有指定标签名的所有元素
document.getElementsByTagName("p");
getElementByClassName()查找相同类名的所有HTML元素
document.getElementByClassName("intro");范围类名为intro的所有元素列
ps:getElementByClassNameInternet Explorer 5,6,7,8 中无效
HTML DOM - 修改
修改 HTML DOM 意味着许多不同的方面:
·改变 HTML 内容
·改变 CSS 样式
·改变 HTML 属性
·创建新的 HTML 元素
·删除已有的 HTML 元素
·改变事件(处理程序)
创建 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML 属性。
下面的例子改变一个 <p> 元素的 HTML 内容:
<html> <body> <p id="p1">Hello World!</p> <script> document.getElementById("p1").innerHTML="New text!"; </script> </body> </html>
改变 HTML 样式
通过 HTML DOM,您能够访问 HTML 元素的样式对象。
下面的例子改变一个段落的 HTML 样式:
<html> <body> <p id="p2">Hello world!</p> <script> document.getElementById("p2").style.color="blue"; </script> </body> </html>
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
<div id="d1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("d1"); element.appendChild(para); </script>
使用事件
HTML DOM 允许您在事件发生时执行代码。
当 HTML 元素”有事情发生“时,浏览器就会生成事件:
·在元素上点击
·加载页面
·改变输入字段
下面两个例子在按钮被点击时改变 <body> 元素的背景色:
<html> <body> <input type="button" onclick="document.body.style.backgroundColor='lavender';" value="Change background color" /> </body> </html>
创建新的 HTML 元素 - appendChild()
如需向 HTML DOM 添加新元素,您首先必须创建该元素,然后把它追加到已有的元素上。
创建了一个新的 <p> 元素:
var para=document.createElement("p");
如需向 <p> 元素添加文本,您首先必须创建文本节点。这段代码创建文本节点:
var node=document.createTextNode("This is a new paragraph.");
然后必须向 <p> 元素追加文本节点:
para.appendChild(node);
最后,必须向已有元素追加这个新元素。这段代码查找到一个已有的元素:
var element=document.getElementById("div1");
这段代码向这个已存在的元素追加新元素:
element.appendChild(para);
创建新的 HTML 元素 - insertBefore()
上一个例子中的 appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此,您可以使用 insertBefore() 方法:
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("p1"); element.insertBefore(para,child); </script>
删除已有的 HTML 元素
如需删除 HTML 元素,您必须清楚该元素的父元素:
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script>
ps:能否在不引用父元素的情况下删除某个元素?
很抱歉。DOM 需要了解您需要删除的元素,以及它的父元素。
这里提供一个常用的解决方法:找到您需要删除的子元素,然后使用 parentNode 属性来查找其父元素:
var child=document.getElementById("p1"); child.parentNode.removeChild(child);
替换 HTML 元素
如需替换 HTML DOM 中的元素,请使用 replaceChild() 方法:
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node); var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.replaceChild(para,child); </script>
发表评论
-
*.location.href的使用
2015-12-01 11:49 373*.location.href 用法: t ... -
js前端传递时间段来倒计时
2015-11-20 12:14 593上班整合了下这个 需要 ... -
js倒计时
2015-11-03 08:29 248<html xmlns="http://www ... -
纯js发送ajax请求
2015-08-18 19:14 673每次都用jquery,这次要微信开发,用纯js的可能少加载点东 ... -
获取验证码
2015-08-14 17:57 0<!DOCTYPE html PUBLIC " ... -
jquery图片展示代码
2015-03-03 08:55 111一个图片展示的代码 -
js学习之java script使用
2015-03-12 14:21 391总算看完了HTML DOM相关的基础知识了,下面开始整理jav ... -
js学习之HTML DOM事件和导航
2014-12-15 15:45 458这两个内容差不多是w3school对HTML DOM的最后的介 ... -
js学习之字符串中英文判断
2014-12-12 17:45 679之前写js时候要判断中英文,网上找了下,引用这位博友的第三种方 ... -
js学习之HTML DOM的一些基础概念
2014-12-10 10:57 365经过近一个星期,总算把 ... -
js学习之Window对象
2014-12-09 17:50 363Window对象 显示对话框代码来自w3school ... -
js学习之Table,TableHeader,TableRow,TableData对象
2014-12-08 09:49 465Table,TableHeader,TableRow,Tabl ... -
js学习之Option和Select对象以及screen对象
2014-12-08 09:06 370Option和Select对象 禁止并启用下拉框代码来自w ... -
js学习之Location 对象以及 Navigator对象
2014-12-08 08:44 505这两天一直看online小说,感觉太颓废了!作为一个毕业才一年 ... -
js学习之Frame、Frameset 以及 IFrame 对象和image对象
2014-12-05 09:45 478今天上班又不是很忙,接着学习js相关的东西,毕业后就没怎么学习 ... -
js学习之Event对象和Form对象以及Input对象
2014-12-03 14:41 660Event对象 光标的位置代码来自w3school & ... -
js学习之Anchor对象和Document对象
2014-12-03 09:37 410Anchor对象 失去焦点和获取焦点有时候自己总喜欢忘记,而 ... -
javascript/jquery判断是否为undefined或是null
2014-12-03 09:05 444转自:http://blog.csdn.net/dxnn520 ... -
页面一些树的加载库
2014-12-02 15:28 365(dhtmlxTree的demo) http://dhtmlx ... -
js一些有用的demo和网站
2014-12-02 10:06 378http://www.fullavatareditor.com ...
相关推荐
第3章 DOM2核心和DOM2 HTML 3.1 DOM不是JavaScript,它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 ...
在报表软件的JavaScript开发中,我们可以通过访问并处理所有的HTML DOM对象(windows对象、location对象、document对象),动态地修改网页。
DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是用一系列相互关联的对象来表示这些代码,而这些对象可以被修改,而且无需重新解析代码就能直接访问它们。由于DOM的使用上的简便,因此它成为了Web...
DOM 定义了访问 HTML 和 XML 文档的标准: W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 DOM DOM中有很多对象,其中一些是用户可以操纵的,如...
用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素。DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本。 <!DOCTYPE html PUBLIC -//W3...
javascript完全自学手册 目 录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1 1.1 JavaScript概述 1 1.1.1 什么是JavaScript 1 1.1.2 JavaScript的基本特点 2 1.1.3 常用的Web开发语言 3 1.2 JavaScript的应用 4 ...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
ACCP6.0使用javascript增强交互效果第三章课后习题答案
##使用 JavaScript、jQuery 和 DOM:## ###熟悉文档和DOM### 网页是一个文档文档显示在浏览器窗口中或作为 HTML 源代码显示 DOM 是 HTML 和 XML 的编程接口 DOM 代表文档对象模型 它提供了文档的计算表示 它将网页...
二、DOM对象(参考w3school手册HTML_DOM部分与DHTML参考手册) 1.document ·与标签相关的属性: alinkColor linkColor vlinkColor bgColor fgColor ·描述网页文档信息的属性 charset defaultCharset ...
第3章 DOM2核心和DOM2 HTML 3.1 DOM不是JavaScript,它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 ...
第3章 DOM2核心和DOM2 HTML 3.1 DOM不是JavaScript,它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 ...
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的...
6.4.1 访问元素 6.4..2 添加节点 6.4.3 删除节点 6.4.4 对属性进行操作 第3篇 JavaScript高级编程篇 第7章 正则表达式 7.1 正则表达式及其作用 7.2 正则表达式参考语法 7.2.1 限定符 7.2.2 选择匹配...
14.2 DOM模型和HTML文档 446 14.3 访问HTML元素 448 14.4 修改HTML元素 456 14.5 增加HTML元素 458 14.6 删除HTML元素 463 14.7 传统的DHTML模型 467 14.8 使用window对象 469 14.9 navigator和地理定位 479...
示例描述:介绍JavaScript管理cookie和userData。 11.1.html JavaScript写数据到cookie。 11.2.html JavaScript获取cookie信息。 11.3.html JavaScript修改cookie的保存有效期。 11.4.html 保存数据...
Dom具有对Html文件和XML文件元素的访问控制能力,简单点说利用Dom可以对某个html或xml文件添加,修改,删除元素.更改其现有的结构或内容. 如果你未接触过Dom,你会发现Dom太神奇了...不管你是菜鸟还是高手,在...
通过8个真实项目示例,介绍了JavaScript核心语言、BOM、事件处理、DOM、修改CSS样式表以及数据检索等内容。 本书适合具有一定网页开发经验的Web开发人员阅读。 本资料共包含以下附件: ppk谈JavaScript.pdf 和 ppk...
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行...1、DOM访问与修改 访问DOM元素是有代价的(“过桥费”你懂的),修改元素代价更是昂贵,因为它会导致浏览器重新计算页面的几何变化(重排和重绘)。