shiyangxt
- 浏览: 155099 次
- 性别:
- 来自: 保定
-
文章分类
最新评论
-
hellostory：
高级查询的查询参数放哪里？
SSH超实用分页实现（原创开源）！ -
topbox163：
不错。。。。。。。。。
拥有属于自己的SVN（Google SVN）(更新版) -
shiyangxt：
忧_零 写道不知道这个问题LZ是否解决了啊，今天同样碰到这个问 ...
救助贴？？？关于Mysql插入二进制文件 -
忧_零：
不知道这个问题LZ是否解决了啊，今天同样碰到这个问题了，错误相 ...
救助贴？？？关于Mysql插入二进制文件 -
sornor：
不错！总算对servlet和jsp之间的关系有了了解了！感谢感 ...
JSP与Servlet的关系和实例分析（转帖）
Ajax由四部分组成：JavaScript，css，DOM，xmlHttpRequest。
今天搞了搞DOM模式。
与大家分享笔记和源码，使不了解DOM的读者，通过这篇随笔掌握DOM精华：
*************************************************
DOM模型
DOM模型框架（文档对象模型）
DOM模型中的节点
元素节点
文本节点
属性节点
使用DOM
访问节点：
getElementByTagName（以标签名称获得）
exampl：
<!----><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function searchDOM(){
//放在函数内，页面加载完成后才用<body>的onload加载
var oLi=document.getElementsByTagName("li");
//输入长度，标签名称以及某项的文本节点值
alert(oLi.length+" "+oLi[0].tagName+" "+oLi[3].childNodes[0].nodeValue);
var oUl=document.getElementByTagName("ul");
var oLi2=oUl[1].getElementByTagName("li");
alert(oLi2.length+" "+oLi2[0].tagName+" "+oLi2[1].childNodes[0].nodeValue);
}
</script>
</head>
<body onload="searchDOM()">
<ul>客户端语言
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
<ul>服务器端语言
<li>ASP.NET</li>
<li>Java</li>
<li>PHP</li>
</ul>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function searchDOM(){
//放在函数内，页面加载完成后才用<body>的onload加载
var oLi=document.getElementsByTagName("li");
//输入长度，标签名称以及某项的文本节点值
alert(oLi.length+" "+oLi[0].tagName+" "+oLi[3].childNodes[0].nodeValue);
var oUl=document.getElementByTagName("ul");
var oLi2=oUl[1].getElementByTagName("li");
alert(oLi2.length+" "+oLi2[0].tagName+" "+oLi2[1].childNodes[0].nodeValue);
}
</script>
</head>
<body onload="searchDOM()">
<ul>客户端语言
<li>HTML</li>
<li>JavaScript</li>
<li>CSS</li>
</ul>
<ul>服务器端语言
<li>ASP.NET</li>
<li>Java</li>
<li>PHP</li>
</ul>
</body>
</html>
getElementById
example：
<!----><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function searchDOM(){
var oLi=document.getElementById("cssLi");
//输入标签名称以及文本节点值
alert(oLi.tagName+" "+oLi.childNodes[0].nodeValue);
}
</script>
</head>
<body onload="searchDOM()">
<ul>客户端语言
<li>HTML</li>
<li>JavaScript</li>
<li id="cssLi">CSS</li>
</ul>
<ul>服务器端语言
<li>ASP.NET</li>
<li>Java</li>
<li>PHP</li>
</ul>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function searchDOM(){
var oLi=document.getElementById("cssLi");
//输入标签名称以及文本节点值
alert(oLi.tagName+" "+oLi.childNodes[0].nodeValue);
}
</script>
</head>
<body onload="searchDOM()">
<ul>客户端语言
<li>HTML</li>
<li>JavaScript</li>
<li id="cssLi">CSS</li>
</ul>
<ul>服务器端语言
<li>ASP.NET</li>
<li>Java</li>
<li>PHP</li>
</ul>
</body>
</html>
父子关系：
<!----><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function myDOMInspector(){
var oUl=document.getElementById("myList"); //获取<ul>标记
var DOMString="";
if(oUl.hasChildNodes()){ //判断是否有子节点
var oCh=oUl.childNodes;
for(var i=0;i<oCh.length;i++) //逐一查找
DOMString+=oCh[i].nodeName+""n";
}
alert(DOMString);
}
</script>
</head>
<body onload="myDOMInspector()">
<ul id="myList">
<li>施杨</li>
<li>嘿嘿</li>
<li>嘻嘻</li>
<li>呵呵</li>
<li>哈哈</li>
</ul>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function myDOMInspector(){
var oUl=document.getElementById("myList"); //获取<ul>标记
var DOMString="";
if(oUl.hasChildNodes()){ //判断是否有子节点
var oCh=oUl.childNodes;
for(var i=0;i<oCh.length;i++) //逐一查找
DOMString+=oCh[i].nodeName+""n";
}
alert(DOMString);
}
</script>
</head>
<body onload="myDOMInspector()">
<ul id="myList">
<li>施杨</li>
<li>嘿嘿</li>
<li>嘻嘻</li>
<li>呵呵</li>
<li>哈哈</li>
</ul>
</body>
</html>
节点的属性：
<!----><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function myDOMInspector(){
//获取图片
var myImg=document.getElementsByTagName("img")[0];
//获取图片title属性
alert(myImg.getAttribute("title"));
}
</script>
</head>
<body onload="myDOMInspector()">
<img src="01.jpg" title="施杨"/>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function myDOMInspector(){
//获取图片
var myImg=document.getElementsByTagName("img")[0];
//获取图片title属性
alert(myImg.getAttribute("title"));
}
</script>
</head>
<body onload="myDOMInspector()">
<img src="01.jpg" title="施杨"/>
</body>
</html>
创建新节点
<!----><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function createP(){
var oP=document.createElement("p");
var oText=document.createTextNode("这是一段感人的故事");
oP.appendChild(oText);
document.body.appendChild(oP);
}
</script>
</head>
<body onload="createP()">
<p>实现写一行文字在这里，测试appendChild()方法的添加位置</p>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GET VS POST</title>
<script language="javascript">
function createP(){
var oP=document.createElement("p");
var oText=document.createTextNode("这是一段感人的故事");
oP.appendChild(oText);
document.body.appendChild(oP);
}
</script>
</head>
<body onload="createP()">
<p>实现写一行文字在这里，测试appendChild()方法的添加位置</p>
</body>
</html>
innerHTML
该属性表示某个标记之间的所有内容，包括代码本身。
该属性可以读取，同时还可以设置。
<!----><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
<script language="javascript">
function myDOMInnerHTML(){
var myDiv=document.getElementById("myTest");
alert(myDiv.innerHTML); //直接显示innerHTML的内容
//修改innerHTML，可直接添加代码
myDiv.innerHTML="<img src='01.jpg' title='施杨'>";
}
</script>
</head>
<body onload="myDOMInnerHTML()">
<div id="myTest">
<span>图库</span>
<p>这是一行用于测试的文字</p>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
<script language="javascript">
function myDOMInnerHTML(){
var myDiv=document.getElementById("myTest");
alert(myDiv.innerHTML); //直接显示innerHTML的内容
//修改innerHTML，可直接添加代码
myDiv.innerHTML="<img src='01.jpg' title='施杨'>";
}
</script>
</head>
<body onload="myDOMInnerHTML()">
<div id="myTest">
<span>图库</span>
<p>这是一行用于测试的文字</p>
</div>
</body>
</html>
施杨教程！！！转载注明出处：www.cnblogs.com/shiyangxt
分享到：
发表评论
-
欢迎访问我的主博（http://shiyangxt.cnblogs.com）
2008-12-31 11:26 1257JavaEye的朋友，大家好。我是一名大二的 ... -
DOS下命令大全！
2008-06-27 21:00 1252最近一直忙期末考试，时间比较紧，所以好几天，没有新帖子。现在整 ... -
Windows XP远程桌面连接图解（转载）
2008-07-09 22:15 3094... -
Tomcat中Context元素详解（转）
2008-07-31 10:09 1117Context元素代表一个web应用，运行在某个特定的虚拟主机 ... -
Proxool建立数据库连接池（源码）
2008-08-02 22:24 1240最近搞数据库连接池，着实很让我郁闷，首先是 ... -
超赞！的装机软件（我的推荐）
2008-08-05 12:03 717现在的应用软件非常多，花样也很繁杂，功能各异，但 ... -
正则表达式在mysql中的一些应用
2008-08-09 13:31 923正则表达式是定义复杂查询的一个强有力的工具。 正则表达式定 ... -
郁闷的两天（Windows系统两个问题解决方案汇总）
2008-08-15 15:06 1187这两天我的笔记本电脑总是出一些很莫名奇妙的问题。 前天出现 ... -
救助贴？？？关于Mysql插入二进制文件
2008-08-17 01:04 1635尝试把图片文件转化成二进制存入Mysql数据库的blob类型的 ... -
精品文章导读！！！（不断更新中......）
2008-08-24 13:48 944... -
C++学习第一天！
2008-09-02 21:28 767新的学 ... -
SVN协同开发配置方案！
2008-09-27 19:41 1047现在很多公司都是使用SVN来实现，多线协同开发的，我们中心 ... -
轻松Ghost XP系统！
2008-09-29 00:28 870今天和一个哥们学习了ghost系统备份。一般装系统总会为驱 ... -
XML语法结构总结！
2008-10-04 17:46 885XML作为可扩展的标记语言，应用范围非常之广泛。XML所关注的 ... -
键盘快捷键大全！（转载）
2008-10-05 15:53 1326******************键盘快捷 ... -
拥有属于自己的SVN（Google SVN）(更新版)
2008-10-06 15:52 15881今天中午抽时间搞了一下Google的SVN，感觉非常好使！所以 ... -
cookie 和session 的区别详解
2008-10-07 14:16 717这些都是基础知识，不 ... -
超赞！的装机软件推荐！（第二季）
2008-10-11 16:10 752... -
jQuery插件积累（转载）
2008-10-17 12:15 4349概述 jQuery 是继 prototype 之后又一个优秀的 ... -
从零开始学jQuery：jQuery与Ajax入门
2008-10-25 22:40 1121jQuery这个开源js ...
相关推荐
《深入浅出JavaScript》这本书致力于帮助读者掌握JavaScript的核心概念，通过配合提供的源码，学习过程将更具实践性和洞察力。 首先，我们要了解JavaScript的基础。JavaScript是一种解释型的、弱类型的、基于原型的...
在“XML DOM深入浅出之基础”这个主题中，我们将探讨DOM的核心概念、主要功能以及如何在实际编程中应用。 首先，DOM将XML文档视为一个树形结构，其中每个元素、属性、文本节点等都有其对应的对象，这些对象组成了一...
《深入浅出JavaScript源代码》是一本旨在帮助开发者深入理解JavaScript核心机制的书籍，通过源代码分析来提升对语言本质的理解。这个压缩包包含了这本书籍中的源代码示例，为学习者提供了实际操作和研究的素材。 在...
"深入浅出ExtJS随书源码--EXTJS2.0"是针对ExtJS 2.0版本的学习资源，通常与一本相关书籍配套，帮助读者通过实际代码加深对ExtJS的理解。 源码分析： 1. **组件系统**：ExtJS的核心是其组件模型，其中包括各种可...
总的来说，《JavaScript DOM编程艺术 第2版》是一本深入浅出的JavaScript DOM教程，适合所有想要提升网页动态交互能力的开发者。通过学习这本书，你不仅可以掌握DOM的基本操作，还能了解到如何利用JavaScript和DOM来...
### WebKit和Chromium源码及原理剖析 #### 第1篇 Web开发须知的浏览器内幕：缓存与存储篇（2） **3. HTTP Cache综述** - **HTTP Cache概念**： - HTTP缓存机制遵循IETF规范设计，最新的标准文档为[RFC 7234]...
这本书以其深入浅出的讲解方式，为读者揭示了JavaScript这门语言的精髓，提供了丰富的实例来帮助理解各种概念。通过分析和实践这些源码，读者可以深化对JavaScript语言的理解，提升编程技能。 源码中包含的文件名以...
马士兵是一位知名的IT教育专家，他的课程深入浅出，适合初学者和有一定基础的学习者。这个“马士兵 html css js源码”压缩包很可能包含了他在教学过程中用到的各种实例和特效代码，是学习和实践这些技术的宝贵资源。...
李刚老师的《疯狂Ajax》一书深入浅出地介绍了这项技术，书中附带的源码是理解并实践Ajax的重要辅助材料。 **一、Ajax的基本原理** Ajax的核心在于创建XMLHttpRequest对象，它是JavaScript与服务器进行异步数据交换...
《锋利的jQuery》是一本深受开发者欢迎的jQuery技术书籍，它深入浅出地介绍了jQuery这一强大JavaScript库的使用方法和技巧。这本书的高清扫描PDF版本不仅提供了清晰的文字和图片，还带有书签和目录，方便读者快速...
1. **源码分析**：EXT源码提供了深入学习EXT框架的机会。通过阅读源码，开发者可以了解EXT内部的工作机制，例如事件处理、组件创建、布局管理等。这对于调试、优化和扩展EXT应用至关重要。 2. **API文档**：EXT的...
标题 "Source Link" 提到的...综上所述，"Source Link" 可能是一篇深入浅出的教程，涵盖了使用jQuery创建动态菜单的全过程，包括理论知识和实践技巧。对于想学习或提升这方面技能的开发者来说，这样的资源非常有价值。
《JavaScript权威指南第五版》是JavaScript编程领域里一本广受好评的经典著作，它深入浅出地介绍了这门语言的核心概念和语法。这本书的英文版本搭配的源码是学习过程中非常宝贵的资源，它可以帮助读者更直观地理解书...
源码的分析可以帮助开发者了解ExtJS内部的工作机制，例如事件处理、组件生命周期、数据模型和视图之间的交互等。通过阅读源码，你可以学习到如何优化性能，减少不必要的DOM操作，以及如何利用ExtJS的架构来编写更...
标题“JQuery扫描图书”和描述中提到的“锋利的JQUERY”指的是《锋利的jQuery》这本书，这本书深入浅出地讲解了jQuery的使用和应用，包括其基本概念、核心API以及实际开发中的实践技巧。 **jQuery的核心概念** 1. ...
陈会安著的《javascript网页制作彻底研究》一书，深入浅出地介绍了JavaScript的核心概念和技术，为读者提供了全面的学习资源。该书的源代码包含了书中示例和练习的实现，帮助读者更好地理解和实践JavaScript编程。 ...
XMLBeans 是 Apache 软件基金会提供的一种 Java 技术，用于处理 XML 文档。它允许开发者将 XML 文档...博客文章深入浅出地介绍了如何利用 XMLBeans 进行 XML 的解析、操作和序列化，是学习 XMLBeans 的一个很好的资源。
vc++动态链接库(dll)编程深入浅出 内含开发文档。主要是对动态链接库的教程。 vc++动态链接库编程之DLL典型实例源代码下载 VC++仿Dreamweaver取色器源代码 VC++挂机锁屏系统源程序 VC++建立桌面或开始菜单快捷方式 ...
vc++动态链接库(dll)编程深入浅出 内含开发文档。主要是对动态链接库的教程。 vc++动态链接库编程之DLL典型实例源代码下载 VC++仿Dreamweaver取色器源代码 VC++挂机锁屏系统源程序 VC++建立桌面或开始菜单快捷方式 ...
vc++动态链接库(dll)编程深入浅出 内含开发文档。主要是对动态链接库的教程。 vc++动态链接库编程之DLL典型实例源代码下载 VC++仿Dreamweaver取色器源代码 VC++挂机锁屏系统源程序 VC++建立桌面或开始菜单快捷方式 ...