- 浏览: 238198 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
di1984HIT:
写的不错。
使用JDBC进行批处理 -
huyuran:
...
使用JDBC进行批处理 -
chenbo0928:
[url][/url][img][/img][*]引用 ...
Removing a detached instance -
mousepc:
gklovejava 写道Utility method to ...
eclipse中的get/set功能的一个bug -
gklovejava:
Utility method to take a string ...
eclipse中的get/set功能的一个bug
DOM:Document Object Model(文本对象模型)
D: 文档---html文档或xml文档
O:对象---document对象的属性和方法
M:模型
DOM是针对xml(html)的基于树的API
DOM树:节点(node)的层次。
DOM把一个文档表示为一棵家谱树(父、子、兄弟)
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面。
1. 节点及其类型:
1). 元素节点
2). 属性节点
3). 文本节点
节点及其类型
节点(node):来源于网络理论,代表网络中的一个连接点。网络是由节点构成的集合。
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
p是一个element node.元素节点。
title="a gentle reminder"是一个attribute node.属性节点
Don't forget to buy this stuff.是一个text node.文本节点
其中Don't forget to buy this stuff.是节点p的一个子节点。
2. 在html文档的什么位置编写js代码?
0). 直接在html页面中书写代码。
缺点: js和Html耦合性太强,不利于维护。
1). 一般地,不能在body节点之前来直接获取body内的节点,因为此时html文档树还没有加载完成,获取不到指定的节点;除非它在某一个方法内部;这样的话,只有在调用方法的时候,才会去获取节点,这个时候一般文档树加载已经完成。
2). 可以在整个html文档的最后缩写类似代码,但是这不符合习惯。
3). 一般地,在body节点之前编写js代码,但是需要利用window.onload事件。该事件在当前文档完全加载之后被触发,所以其中的代码可以获取到文档的任何节点。
<script type="text/javascript">
window.onload=function(){
var cityNode=document.getElementById("city");
alert(cityNode);
}
</script>
4). 关于为onclick等属性赋值的问题:
在<script type="text/javascript"></script>内部给一个节点添加事件的方法。不需要()。例如:
<script type="text/javascript">
var button=document.getElementById("button");
button.onclick=alert("Hello, World");
</script>
这里就为button添加了一个点击事件。但是页面载入的时候会有一个alert窗口Hello,World,你再去点击button的时候不会有任何作用,这个原因是因为 button.onclick执行的是alert("Hello,World");的执行结果,但是alert并没有任何执行结果。
下一个例子:
<script type="text/javascript">
function helloworld(){
alert("Hello,World");
}
var button=document.getElementById("button");
button.onclick=helloworld;//这里会执行helloworld()方法,括号不要加。因为加括号之后,会直接执行helloworld()方法。所以不要加括号。
var test=helloworld;//方法的引用;
test();//这里会执行helloworld()方法体;
</script>
①. button.onclick = helloWorld();
错误的赋值方式, 以上代码将会导致 helloWorld 函数执行, 而赋给 onclick 属性的是函数的执行结果
②. button.onclick = helloWorld; 正确的赋值方式, 赋给 onclick 属性的是函数的引用
3. 如何来获取元素节点:(关于节点方法可以参考java API文档中的Node,Element等接口中的方法 ,在org.w3c.dom包中 )
1). document.getElementById: 根据 id 属性获取对应的单个节点
2). document.getElementsByTagName: 根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度
3). document.getElementsByName: 根据节点的 name 属性获取符合条件的节点数组, 但 ie 的实现方式和 W3C 标准有差别: 在 html 文档中若某节点(li)没有 name 属性, 则 ie 使用
getElementsByName 不能获取到节点数组, 但火狐可以.
4). 其它的两个方法getElementsByClassName,getElementsByTagNameNS, ie 根本就不支持, 所以不建议使用
以下是代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ //1. 获取 "北京" 对应的 li 节点 //1). var bj = document.getElementById("city"); //alert(bj); //2). ie 和 火狐的实现方式不一样: 若节点本身没有 name 属性, ie 不能正常工作 bj = document.getElementsByName("BeiJing"); //alert(bj.length); var genders = document.getElementsByName("gender"); //alert(genders.length); //3). var uls = document.getElementsByTagName("ul"); alert(uls.length); }; </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body> </html>
4. 获取属性节点:
1). 可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值
2). 通过元素节点的 getAttributeNode 方法来获取属性节点,然后在通过 nodeValue 来读写属性值
代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ var maleNode = document.getElementsByName("gender")[0]; //1. 获取属性节点的值 alert(maleNode.type); //2. 设置节点的值,可以通过查看源码来确定节点的value值已经改变。 maleNode.value = "male^^"; //3. 先获取属性节点, 然后在来操作属性节点(麻烦一点的方法) /* var typeNode = maleNode.getAttributeNode("type"); alert(typeNode.nodeValue); typeNode.nodeValue = "text";//设置节点类型值,设置节点类型,firefox支持,但是IE不支持。 */ }; </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body> </html>
5. 获取元素节点的子节点(只有元素节点才有子节点!!):(元素节点即:<a><p><input><select><div>等等,属性节点id,type,name,value等等。)
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ //1. 获取 #city 节点的所有的 li 子节点(获取全部的子节点: 火狐 和 ie的实现方式有区别) var cityNode = document.getElementById("city"); var liNodes = cityNode.childNodes; alert(liNodes.length); //2. 获取 #city 节点的第一个子节点 var first = cityNode.firstChild; alert(first); //3. 获取 #city 节点的最后一个子节点 var last = cityNode.lastChild; alert(last); }; </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body> </html>
6. 节点的属性:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ //1. 元素节点的属性 var cityNode = document.getElementById("city"); alert(cityNode.nodeName); alert(cityNode.nodeType); //元素节点的 nodeValue 属性返回 null alert(cityNode.nodeValue); //2. 属性节点的属性 var idNode = cityNode.getAttributeNode("id"); alert(idNode.nodeName); alert(idNode.nodeType); alert(idNode.nodeValue); }; </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body> </html>
7. 获取文本节点:
1). 步骤: 元素节点 --> 获取元素节点的子节点
2). 若元素节点只有文本节点一个子节点, 例如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?</p>, 可以先获取到指定的元素节点 eleNode,
然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值
代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <script type="text/javascript"> window.onload = function(){ //1. 获取 #bj 的文本节点 var bjNode = document.getElementById("bj"); var bjTextNode = bjNode.firstChild;//因为只有一个子节点,所以这里用firstChild和lastChild都一样,或者childNodes[0] //2. 获取文本节点的 3 个属性 //alert(bjTextNode.nodeName); //alert(bjTextNode.nodeType); //获取文本节点的值 alert(bjTextNode.nodeValue); //设置文本节点的值 bjTextNode.nodeValue = "^^" + bjTextNode.nodeValue; }; </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body> </html>
发表评论
-
Javascript编程风格
2012-07-28 22:43 704http://www.ruanyifeng.com/blog/ ... -
display:none与visible:hidden的区别
2012-02-27 12:08 1228http://www.cnblogs.com/nicholas ... -
javascript字符串操作
2012-02-09 18:37 873转自:沉积如水 使用 substring()或者sli ... -
用JavaScript隐藏控件的方法
2012-01-05 11:55 558转 http://blog.csdn.net/proglove ... -
令人厌烦的单引号和双引号
2011-11-14 12:14 604有时候我们需要在javascript中添加很多单引号 ... -
常用javascript函数,总结中
2011-11-09 11:01 590//去回车符 function rep ... -
select和option操作
2011-10-28 17:57 839http://www.jb51.net/article/162 ... -
stream.js
2011-10-25 23:57 577http://www.aqee.net/docs/st ... -
css笔记
2011-10-01 15:00 916样式表定义及引用 1 ... -
JavaScript Minifier failed for
2011-09-23 19:32 1511JavaScript Minifier failed f ... -
javascript 正则表达式探索
2012-02-11 15:39 987以下部分内容来自http://www.w3school.com ... -
给struts 的标签s:url加参数
2011-09-05 09:34 832有时候我们需要通过javascript来执行一些action。 ... -
为eclipse安装aptana 插件
2011-09-04 00:01 5011在网上找的links方式安装不成功,试了几次。没办法。只有在线 ... -
checkbox为null
2011-08-31 22:23 1168今天遇到一个小问题,新增操作时,checkbox提交到stru ... -
javascript DOM(五)----插入、删除节点
2011-08-28 17:01 4235插入节点: 1). insertBefore(): ... -
javascript DOM(四)----节点替换
2011-08-28 00:00 1053节点的替换: 1). replaceChild(): ... -
javascript DOM(三)
2011-08-27 23:19 860三个练习: 1. <html> ... -
javascript DOM(二)
2011-08-27 22:52 6618. 创建一个元素节点: 1). createEle ... -
javascript 表单重置的问题 reset
2011-08-22 11:30 3135今天做了一个reset按钮。但是还是有一个问题没有解 ... -
Javascript继承机制的设计思想
2011-06-07 08:33 663原文地址: http://www.ruanyifeng. ...
相关推荐
经典之作《javascript dom编程艺术》源码。通过一个实际案例,讲述了原生的javascript操作dom的使用方法,以及操作dom中应该注意的一些事项。
JavaScript DOM编程艺术 --全
JavaScriptDOM编程艺术(第2版)PDF版本下载
JavascriptDOM基本操作 dom 精品操作
第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编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库...
教程名称:Javascript DOM编程视频教程(17讲) 课程目录:【】1.JavascriptDOM编程_在什么位置编写JS代码【】10.JavascriptDOM编程_删除节点【】11.JavascriptDOM编程_添加删除节点的实验...
JavaScript DOM编程艺术,高清资源,无比经典,值得拥有
javascript_DOM,javascript_DOM,javascript_DOM,javascript_DOM
JavaScriptDom编程艺术,一本很好的前端书籍,有兴趣的可以看看
javascript dom2 源码及pdf
JavaScriptDOM编程艺术.中文版.完整书签 本书讲述了JavaScript和DOM的基础知识,但重点放在DOM编程技术背后的思路和原则:预留退路、循序渐进和以用户为中心等,这些概念对于任何前端Web开发工作都非常重要。本书...
全书分为3个部分:第一部分“深入理解DOM脚本编程”,涉及W3CDOM规范的各方面,包括非标准的浏览器支持和不支持的内容;第二部分“浏览器外部通信”,以Ajax和客户端—服务器端通信为主题;第三部分“部分高级脚本...
JavaScript DOM编程艺术 经典书籍
javascript 用dom模型删除单元格 很简单的javascript
资源名称:JavaScript DOM高级程序设计内容简介:本书注重理论与实践的结合,全面讲述高级的DOM 脚本编程。全书分为3 个部分:第一部分“深入理解DOM 脚本编程”,涉及W3C DOM 规范的各方面,包括非标准的浏览器支持...
javascript DOM 编程艺术源码 很详细 每一课都有
学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了,老老实实看两遍,看完了你就会对JS有一个大概的了解,整本书都围绕着一个网页效果例子展开,你跟着老老实实敲一篇,敲完之后,你会发现这个效果不是常...
JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术JavaScript Dom编程艺术
JavaScript DOM编程艺术