DOM
DOM:Document Object Moidel 文档对象模型
该项技术的出现,将标记性文档封装成了对象,并将该标记文档的内容(标签,属性,文本)
都封装成了对象.
这样我们就可以将对象中封装更多的属性和行为,我们操作的这些对象.
这样就可以实现静态页面具备的动态的效果,比如下来菜单等
DOM 技术不断的升级出现了三级模型.
DOM1: 将html问的封装成了对象.
DOM2: 在DOM1的基础上添加了一些新功能,比如对名称空间解析.
DOM3: 将XML文件封装成了对象.
该项技术本身跨平台,只要具备DOM解析器的应用程序,就可以对标记进行DOM解析
浏览器本身具备了DOM解析器.所以可以标记文本进行Dom解析
日后常用的标记文本还有XML.作为通用的配置文件,需要被其他应用程序所解析获取中的封装配置信息.
比如java 语言如何对该XML文件进行获取的呢?
java语言提供了N多的对象进行XML文档的操作,这些对象都封装到了org.w3c.dom包中.
其实jvm本身就内置了DOM 解析器.
但是,java自带的XML文本的解析工具,使用起来比较麻烦.
所以有些组织就自定义了一些解析工具,比如目前流行针对于java语言解析XML文档工具DOM4J DOM FOR JAVA
DOM的特点:是将标记性文档封装成了DOM树,也就是会将这个标记性文本加载进内存
注意:如果该文档体积过大,会对内存进行消耗,速度会很慢.
就有了民间组织定义了一个解析方式. SAX.,
给予时间驱动的方式来解析数据.
该解析速度快,但是只能对XML文档的数据进行获取并不可以修改.
注意:在3g应用中sax有应用.
-----------------------------------------------------
DHTML(动态的html):他不是一门语言,是多个技术的综合题简称.
这里包含的技术有: html css dom javascript
这四种技术在Dhtml鞭虫中都处于什么样的角色呢?
html:同了标签用于封装数据.他是基础.没标签什么都做不了
css: 提供了样式,可以对标签封装的内容进行演示的操作.
dom:将html文档封装成了对象,并将文档中的内容都封装成了对象,对象中都封装了更多的属性和行为,方便与对象的操作
javascript:提供了逻辑性很强的程序设计语言,负责页面的行为.
如果在假如一个xmlHttpRequest对象.就是AJAX.
-----------------------------------------------------
BOM--window中的对象
演示浏览器对象window中的内容.
为了演示方便.
在页面上定义一个按钮.
通过点击俺就来显示window对象内容的操作的结果.
电议阿牛就会有一些具体的处理方式.
所以使用了时间监听机制.
俺就是事件源.
需要在俺就注册一个时间动作.
那么这个动作要对的处理方式.
助理方式其实就是一个哈数.这个函数可以是已有的.也可以是自定义的.
如果是自定义的函数.就需要javascript来完成.
示例:
<script type="text/javascript">
//定义按钮事件的处理方式
function windowdemo(){
var name = window.navigator.appName;//获取浏览系的信息
var version = window.navigator.appVersion;//获取浏览器运行的系统
var plat = window.navigator.platform;//获取系统的版本号
alert(plat);
}
function windowdemo2(){
//window中的location.href对象的方法.会将地址栏的url设置成
//http://www.baidu.com,并进行地址的链接.
window.location.href = "http://www.baidu.com";
}
</script>
//onclick 是按钮单击下的意思
<input type="button" value="window测试的按钮" οnclick="windowdemo2()" />
------------------------------------------------------------------
BOM--window中的方法:
<script type="text/jscript" >
function windowthod(){
var p = confirm("您真的要点嘛?");
alert(p);
}
function windowthod2(){
//设置偏移量
//moveTo(20,20);
//实现偏移量.组合之后.可以体现出颤抖的样子.好比扣扣的抖动
//while(true){
moveBy(20,0);
moveBy(0,20);
moveBy(-20,0);
moveBy(0,-20);
//}
}
//定义的ID 可以用来关闭
var timeid;
function windowthod3(){
//setTimeout("alert('haha')",2000);
//每隔3秒调用一次windowthod2();
timeid = setTimeout("windowthod2()",3000);
}
function windowthod4(){
//关闭setTimeout的方法.
clearInterval(timeid)
}
function openDemo(){
//弹出一个新窗口open方法
open("tupian.html","_blank","status=no,toolbar=no,menubar=no,location=no");
}
</script>
<input type="button" value="windwo测试按钮" οnclick="openDemo()" />
<input type="button" value="我关" οnclick="windowthod4()" />
---------------------------------------------------------------------------
BOM--window中的事件:
<script type="text/javascript">
window.onload = function(){//在网页加载完打开广告图片
open("tupian.html","_blank","status=no,toolbar=no,menubar=no,location=no");
}
window.onunload = function(){//在网页关闭后触发的事情
alert('run onunload');
}
window.onbeforeunload = function(){//在关闭触发的事情
alert("run onbeforeunload ")
}
</script>
图片;
//新窗口的图片
<img src="file:///C|/Users/acer/Desktop/0.0/1f178a82b9014a90aedad412a9773912b21bb051f919ce85.jpg" width="544" height="415" />
<script type="text/javascript">
//没一秒都让图片顶置一下
setInterval("focus()",1000);
window.onunload = function(){//关闭后出发操作.
open("tupian.html","_blank","status=no,toolbar=no,menubar=no,location=no");
}
-----------------------------------------------------------------------------------
BOM--获取节点
当一个html文本呗dom解析后.加赞进内存,就是一个dom树.
每一个标签都是一个阶段为了操作某一个阶段.前提就是先要获取该节点对象.
最常见的操作无非就是获取页面中的标签.
document对象作为html问的的对象,可以获取页面中任意一个节点.
获取方法如下:
getElementById():通过标签的id属性值来获取该标签的节点对象.该方法的返回值是一个节点的对象因为一般情况下id是唯一的,不是数哦所有的标签都要定义id属性,这样做太慢反.
只有达到区域.获取特殊区域.为了方获取和操作.才定义id属性.
getElementsByName():通过标签的name属性值来获取节点对象.返回值是一个节点数组
getElementsByTagName():通过签名获取节点对象,返回值是一个节点数组.
节点都具备三个属性:
1.节点名称.nodeName
2.节点类型.nodeType
3.节点值. nodeValue
示例:
function document1(){
//获取表格的节点.可以来设置属性
var getTable = document.getElementById("table");
//获取节点ID的名称.
alert(getTable.nodeName);
//设置框线的粗细
getTable.setAttribute("border",1);
}
function document2(){
//因为返回的数数组.所以用的时候要明确角标
var getUser = document.getElementsByName("user");
//可以获取他的value值 type类型. 还有他的名字nodeName
alert(getUser[0].type)
alert(getUser[0].value)
alert(getUser[0].nodeName)
//r如果名字重复的话.可以便利来获取其中的值.示例获取男和女性别
var getSex = document.getElementsByName("sex");
for(var x = 0 ; x<getSex.length ; x++)
{
alert(getSex[x].value)
}
}
function document3(){
//因为返回的是数组.所以要明确角标
var getDiv = document.getElementsByTagName("div")[0];
//获取div中的区域
alert(getDiv.innerText);
//修改div中的区域
getDiv.innerText = "我被修改啦";
}
function document4()
{
//想要获取到页面中所有的但愿个中的数据.
var getTD =document.getElementsByTagName("td");
for (var x = 0 ;x<getTD.length ; x++){
alert(getTD[x].innerText);
}
//获取指定id的table表格中的数
//1.先获取指定的td所在的表格对象.
var getTdId = document.getElementById("tableID");
//2.通过表格对象的getElementsByTagName():获取该标签中的节点.
var getGetTdIdTag = getTdId.getElementsByTagName("td");
for (var x = 0 ;x<getGetTdIdTag.length ; x++){
alert(getGetTdIdTag[x].innerText);
}
}
</script>
用户名:<input type="text" name="user" /><br />
密码: <input type="radio" value="nan" name="sex"/>男<input type="radio" value="nv" name="sex" />女<br />
<input type="button" value="要测试的按钮" οnclick="document4()" />
<div>
div区域
</div>
<span>span区域</span>
<table id="tableID">
<tr>
<td>
表格一
</td>
<td>
表格二
</td>
</tr>
<tr>
<td>
表格三
</td>
<td>
表格四
</td>
</tr>
</table>
<table>
<tr>
<td>
哈哈
</td>
<td>
呵呵
</td>
</tr>
</table>
----------------------------------------------------------------------------
让超链接都具备新窗口打开的功能
示例:
window.onload = function()//在页面加载完就执行
{
var arr = document.links;//获取所有href属性的超链接
for( var x =0 ; x<arr.length ;x++){
arr[x].target = "_blank";//然后每个都添加_blank新窗口打开
}
}
<a href="http://www.baidu.com">百度一下,你就知道</a><br />
<a href="http://www.sina.com">新浪</a>
------------------------------------------------------------------------
DOM通过节点层次获取节点对象.
节点之间都存在着层次关系:
1.父节点.是唯一的节点.parentNode
2.子节点.是可以与多个.childNodes
3.兄弟节点.
上一个兄弟节点.是唯一的检点.previousSibling
下一个兄弟节点.是唯一的及诶单nextSibling
对于兄弟节点或趋势.会出现空白文本节点.所以最好都要跟上对获取到的节点的判断.
所以判断最好加上正则白大师.判断空白或者回车符等.比较麻烦.吗么获取节点是.尽量不要使用兄弟节点
节点类型;
1.标签行节点.类型1.
2.文本型节点.类型3.#text
3.属性节点: 类型2.
4.注释节点 类型:8.#comment
示例:
function getNodeByLevel1()
{
//获取父节点
var tableNade = document.getElementById("tableID");
alert(tableNade.parentNode.nodeName);
}
function getNodeByLevel2(){
//获取子节点
var tableNode = document.getElementById("tableID");
var nodes = tableNode.childNodes;
var trnodes = nodes[0].childNodes;
alert(trnodes[0].nodeName);
}
function getNodeByLevel3()
{
//获取上一个兄弟节点.
var tableNode = document.getElementById("tableID");
var node = tableNode.previousSibling;
alert(node.nodeName);
//获取下一个兄弟节点.
node = tableNode.NextSibling;
while(node.nodeType == 3 &&node.nodeValue==' ')
node = node.nextSibling;
alert(node.nodeName+"...."+node.nodeType+"...."+node.nodeValue+"---");
}
<input type="button" value="要测试的按钮" οnclick="getNodeByLevel3()" /><br />
<div>
div区域
</div>
<span>span区域</span>
<table id="tableID"><tr>
<td>表格一</td>
<td>表格二</td>
</tr>
<tr>
<td>表格三</td>
<td>表格四</td>
</tr>
</table>
--------------------------------------------------------------------------------
DOM--遍历所有节点可是使用递归的方法.和遍历文件夹中的文件时一个道理
示例:
function getAllNodes(){
//弹出对话框.是否.返回值是true 和flase
if(confirm("你真的要遍历所有节点嘛?"))
{
//将窗口传进去 0,是让显示出来的更为好看.有层次
getNodes(document,0);
//创建新的窗口.返回的是一个新的窗口对对象
var winObj = open("","_blank");
//就可以在新的窗口对象中打开info.
winObj.document.write(info);
}
}
var info ="";//要定义变量记录住!!!!!
function getNodes(node,level){
//先将前面加"|--",在获取其名字和类型.还有值.
info+=getLevel(level)+node.nodeName+"::"+node.nodeType+"::"+node.nodeValue+"<br />";
//然后获取所有子节点
var arr = node.childNodes;
level++;
//然后循环判断是否子节点下面是否还有节点.如果有的话.就递归,如果没有了的话.就打印喽.
for(var x = 0 ;x<arr.length ; x++){
if(arr[x].hasChildNodes())
getNodes(arr[x],level);
else
info+=getLevel(level)+arr[x].nodeName+"::"+arr[x].nodeType+"::"+arr[x].nodeValue+"<br />";
}
}
//给前面加上"|--"的方法
function getLevel(level){
var s = "";
for(var x = 0 ; x<level ;x++){
s+="|--"
}
return s;
}
<input type="button" value="要测试的按钮" οnclick="getAllNodes()" /><br />
----------------------------------------------------------------------------------------------
div节点的添加替换克隆操作.
<!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>无标题文档</title>
<style type="text/css">
<!--设置div通过s上啥方法-->
div{
border:#00FF00 1px solid;
height:60px;
width:120px;
margin:20px 0px 20px 20px;
padding:10px 0px 0px 20px;
}
#div_1{
background-color:#99FF00;
}
#div_2{
background-color:#FF0000;
}
#div_3{
background-color:#FFFF00;
}
#div_4{
background-color:#FF0FF0;
}
</style>
<script type="text/javascript">
/*
创建标签节点: document.createElement(tagName);
创建文本节点: document.createElement(msg);
*/
function crtAndadd()
{
//给第一个div添加一个文本节点
/*
1.创建一个问句节点.
2.将文本节点添加到指定div区域中
*/
//创建一个新文本
var textNade = document.createTextNode("div区域一");
//红id判断那个div区域需要添加
var divNode = document.getElementById("div_1");
//根据id将文本添加进去.
//divNode.appendChild(textNade);
//添加一个超链接.
var aNode = document.createElement("a");
aNode.href = "http://www.sina.com.cn";
aNode.innerText = "新浪网站";
//divNode.appendChild(aNode);
//divNode.innerText = "div区域哈哈".fontcolor('red');//直接给div节点设置内部文本.如果内部类文本有html代码也有直接作文纯文本显示.
//divNode.innerHTML = "div区域哈哈".fontcolor('red');//属性可以解析内部的带有html代码的文本.
//添加一个按钮
divNode.innerHTML = "<input type='button' value='我是一个按钮'/>";
}
function rplNode()
{
/*
替换节点.
将div_3区域中的文件节点.替换成一个新的文本节点.
当然对于文本.可以使用innerText innerHTML完成.这里就不演示了
只要针对节点操作.
思路:
1.获取原文本节点.
2.创建一个新的文本节点
3.通过div的方法来完成操作.
*/
//获取指定的ID
var divNode = document.getElementById("div_3");
//获取原文本的文件节点[0]元素.因为返回的是一个数组类型
var oldTextNode = divNode.childNodes[0];
//创建一个新的文本节点
var newTextNode = document.createTextNode("一个新的文本");
//通过div的方法replaceChild来将新节点替换成老节点.
//divNode.replaceChild(newTextNode,oldTextNode);
//需求:用div区域三节点.替换div区域一
var divNode_1= document.getElementById("div_1");
divNode_1.replaceNode(divNode);//相当于将员节点删除.移动鑫的节点到员节点的位置.
}
function copyNode()
{
/*
用div_4替换div_1,但是,还是保留div_4在原位置上.
思路:
1.复制一个div_4节点.
2.通过替换完成div_1呗提单.div_4存在两个.
*/
var divNode_4 = document.getElementById("div_4");
var divNode_1 = document.getElementById("div_1");
//复制出一个div区域节点.
var copy_4 = divNode_4.cloneNode(true);
divNode_1.replaceNode(copy_4);
}
</script>
</head>
<body>
<input type="button" value="创建并添加节点" οnclick="crtAndadd()" />
<input type="button" value="删除节点" οnclick="delNode()" />
<input type="button" value="替换节点" οnclick="rplNode()" />
<input type="button" value="克隆节点" οnclick="copyNode()" />
<div id="div_1">
</div>
<div id="div_2">
div区域2
</div>
<div id="div_3">
div区域3
</div>
<div id="div_4">
div区域4
</div>
</body>
</html>
--------------------------------------------------------------------------------
动态的对文字进行改变
对新闻的文字进行大中小的设置.
方便与浏览.给用户同可以选择操作.增强永和的上网体验.
1.先有新闻数据.并将新闻数据用html标签发封装.
2.对新闻加载一些静态的样式.
3.确定时间员和事件动作.
4.对时间进行处理.
注意:
取消超链接的默认点击效果.
方式一:觥U哦给href属性的值定义个 # .这是借用了定位标记的原理.不指定具体的位置.这样就取消了超链接的默认效果.单是会启动默认的file引擎.不够专业.
方式二:可以定义javascript: void(0);启动javascript引擎运行一个函数void(0):什么都不做.
示例:
<!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>无标题文档</title>
<style type="text/css">
<!--这是超链接的0颜色和取消下划线并设置大家14px-->
a:link,:visited{
color:#FF0000;
text-decoration:none;
font-size:14px;
}
<!--对鼠标放在上面进行设置.-->
a:hover{
color:#00FF00;
}
<!--对div文本区域进行设置.加上边框1的粗细.solid实线,16px大小500长度-->
.newsstyle{
border:#3300FF 1px solid;
font-size:16px;
width:500px;
}
</style>
<script type="text/javascript">
//通过js的方法来动态的设置大小将参数传递进去
function changFont(size)
{
//获取div的id号.然后通过方法进行设置
var divNode = document.getElementById("newsText");
divNode.style.fontSize =size;
}
</script>
</head>
<body>
<!--
对新闻的文字进行大中小的设置.
方便与浏览.给用户同可以选择操作.增强永和的上网体验.
1.先有新闻数据.并将新闻数据用html标签发封装.
2.对新闻加载一些静态的样式.
3.确定时间员和事件动作.
4.对时间进行处理.
注意:
取消超链接的默认点击效果.
方式一:觥U哦给href属性的值定义个 # .这是借用了定位标记的原理.不指定具体的位置.这样就取消了超链接的默认效果.单是会启动默认的file引擎.不够专业.
方式二:可以定义javascript: void(0);启动javascript引擎运行一个函数void(0):什么都不做.
-->
<h2>这是一个新闻</h2>
<a href="javascript:void(0)" οnblur="changFont('30px')">大字体</a>
<a href="javascript:void(0)" οnblur="changFont('10px')">中字体</a>
<a href="javascript:void(0)" οnblur="changFont('5px')">小字体</a><br />
<div id="newsText" class="newsstyle" style="font-size:16px">
爱建股份可见光爱上撒的附件阿瑟i収的双<br />
爱建股份可见光爱上撒的附件阿瑟i収的双<br />
爱建股份可见光爱上撒的附件阿瑟i収的双<br />
</div>
</body>
</html>
-----------------------------------------------------------------------------------
根据上面的题.给字体改变颜色的示例;
可以通过类选择器来定义.穿进去类选择然后进行修改.
.newsstyle{//这里这可以定义类的选择器.不可以定义id的选择器.因为ID的优先级比类的优先级高
background-color:#CCFF00;
color:#FFFF00;
border:#00FF00 1px solid;
font-size:16px;
width:500px;
}
.max{
font-size:18px;
color:#00FFFF;
background-color:#00FF00;
}
.min{
font-size:12px;
colorS:#CC0000;
background-color:#6600FF;
}
function changFont(size,clr)
{
var divNode = document.getElementById("newsText");
//divNode.style.fontSize = size;
//divNode.style.color = clr;
with(divNode.className)//这是第一种方法.优先级最高
{
fontSize = size;
color = clr;
}
}
function changFont(styleName)//这是第二种方法.通过选择器来判断.
{
var divNode = document.getElementById("newsText");
divNode.className = styleName;
}
<a href="javascript:void(0)" οnclick="changFont('max')">大字体</a>
<a href="javascript:void(0)" οnclick="changFont('newsstyle')">中字体</a>
<a href="javascript:void(0)" οnclick="changFont('min')">小字体</a>
------------------------------------------------------------------------------
dom示例=列表示例-oberflow布局属性 超过多少隐藏数据
<title>无标题文档</title>
<style type="text/css">
<!--设置div_1的默认属性值.颜色.超过16px隐藏-->
#div_1{
color:#00FF00;
height:16px;
overflow:hidden;
}
</style>
<script type="text/javascript">
//然后设置方法.获取div_1的id然后进行判断
function list(){
var div_1Node = document.getElementById("div_1");
with(div_1Node.style){
overflow = (overflow=="visible")?"hidden":"visible";
}
}
</script>
</head>
<body>
<div id="div_1" οnclick="list()">
第一条数据<br />
第二题数据
</div>
<br />
<!--第一种方式静态的-->
<div id="div_2 "style=" height:16px; overflow:visible">
第一条数据<br />
第二题数据
</div>
-------------------------------------------------------------------------------
dom-列表示例主要介绍
注意的是.这里需要传给list的值应该是自己的本类对象this
<!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>无标题文档</title>
<style type="text/css">
//用css进行设置.他的默认值
dl{
height:16px;
overflow:hidden;
}
//在建立一个打开的
.open{
overflow:hidden;
}
//在建立一个关闭
.close{
overflow:visible;
}
</style>
<script>
//通过方法来开始判断.达到效果
function list2(node){
//var dlNode = node.parentNode;
//alert(node.nodeName);
//node.className = "open";
//动态改变node节点的class属性值.动态加载类选择器
with(node){
if(className == "open"){
className = "close";
}
else{
className = "open";
}
}
}
</script>
</head>
<body>
//建立事件源.传list2的值是自己.
<dl οnclick="list2(this)">
<dt>新闻的标题</dt>
<dd>新闻的详情</dd>
<dd>新闻的详情</dd>
<dd>新闻的详情</dd>
<dd>新闻的详情</dd>
</dl>
<dl οnclick="list2(this)">
<dt>新闻的标题</dt>
<dd>新闻的详情</dd>
<dd>新闻的详情</dd>
<dd>新闻的详情</dd>
<dd>新闻的详情</dd>
</dl>
</body>
</html>
----------------------------------------------------------------------------------------
好友列表示例主要介绍display隐藏因为跨平台
<!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>无标题文档</title>
<style type="text/css">
//对表格进行设置
table{
border:#00FF00 1px solid;
width:100px;
border-collapse:collapse;
}
//对td进行样式设置
td{
border:#00FF00 1px solid;
background-color:#FFFF99;
text-align:center;
}
//对表格中的td中的div进行设置
table td div{
background-color:#CCFFCC;
}
//对最里面的超链接进进行点击后和点击前行设置
table td div a:link,table td div a:visited{
color:#FF0000;;
text-decoration:none;
}
//对最里面的超链接进行鼠标停留样式
table td div a:hover{
color:#00FF00;
}
//对列表的超链接进行设置
table td a:link,table td a:visited{
color:#00FF00;
text-decoration:none;
}
//这个也是.
table td a:hover{
color:#0000FF;
}
//通过display方法.让div中的区域隐藏
table td div{
display:none;
}
//显示
.open{
display:block;
}
//隐藏
.close{
display:none;
}
</style>
<script type="text/javascript">
//将本类对象传进去.然后获取父类节点.在通过父类节点获取下面子节点然后进行判断
function list3(anode){
var tdNode =anode.parentNode;
var divNode = tdNode.getElementsByTagName("div")[0];
with(divNode){
if(className =="open"){
className = "close";
}else{
className = "open";
}
}
}
</script>
</head>
<body>
<!--
1.对数据进行标签的封装
2.对数据进行css样式的定义.
3.明确事件源和事件
4.时间的处理方式.
-->
<table>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list3(this)">好友列表</a>
<div>
<a href="http://bbs.itheima.com/forum-146-1.html">大土豆</a><br />
<a href="http://www.baidu.com">大土豆</a><br />
<a href="http://www.baidu.com">大土豆</a><br />
<a href="http://www.baidu.com">大土豆</a><br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list3(this)">好友列表</a>
<div>
<a href="http://www.baidu.com">小辣椒</a><br />
<a href="http://www.baidu.com">小辣椒</a><br />
<a href="http://www.baidu.com">小辣椒</a><br />
<a href="http://www.baidu.com">小辣椒</a><br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list3(this)">好友列表</a>
<div>
<a href="http://www.baidu.com">西红柿</a><br />
<a href="http://www.baidu.com">西红柿</a><br />
<a href="http://www.baidu.com">西红柿</a><br />
<a href="http://www.baidu.com">西红柿</a><br />
</div>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" οnclick="list3(this)">好友列表</a>
<div>
<a href="http://www.baidu.com">大香蕉</a><br />
<a href="http://www.baidu.com">大香蕉</a><br />
<a href="http://www.baidu.com">大香蕉</a><br />
<a href="http://www.baidu.com">大香蕉</a><br />
</div>
</td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------------------------
DOM--事例,动态的创建表格和删除表格.
知识点有:
tabNode.setAttribute("id","tabid");//给表格对象添加了一个id属性
<!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>无标题文档</title>
<style type="text/css">
table{
border:#00FF00 1px solid;
border-collapse:collapse;
width:100%;
}
td{
border:#00FF00 1px solid;
padding:10px;
}
</style>
<script type="text/javascript">
function crtTable()
{
/*
这是最通用的方式。是使用document中的方法完成的
虽然通用但是麻烦。还有更简单的。
思路是。现建立标签。然后再建立字节点。
var tbNode = document.createElement("tbody");
var trNode = document.createElement("tr");
var tdNode = document.createElement("td");
trNode.appendChild(tdNode);
tbNode.appendChild(trNode);
*/
//创建一个表格对象
var tabNode = document.createElement("table");
//通过表格对象的insertRow方法创建行。
var trNode = tabNode.insertRow();
//创建单元格。通过行对象的insertCell方法创建。
var tdNode = trNode.insertCell();
//给单元格添加一些内容
tdNode.innerHTML = "一个单元格";
var divNode = document.getElementById("div_1");
divNode.appendChild(tabNode);
}
function crtTable()
{
//现创建table表格
var tabNode = document.createElement("table");
tabNode.setAttribute("id","tabid");//给表格对象添加了一个id属性
//获取文本区域中的行数和列数获取value值，然后作为循环条件传递进取
var rowNodeName = document.getElementsByName("row")[0].value;
var colNodeName = document.getElementsByName("col")[0].value;
for(var x = 1 ; x<=rowNodeName ; x++)
{
//创建行数和列数
var trNode = tabNode.insertRow();
for(var y = 1 ; y<=colNodeName ; y++)
{
var tdNode = trNode.insertCell();
tdNode.innerHTML = x+"--"+y;
}
}
//将表格放到div区域中
var div_1Node = document.getElementById("div_1");
div_1Node.appendChild(tabNode);
//让按钮按进取出不来的方法。通过disable
document.getElementsByName("crtBut")[0].disabled = true;
}
function delRow()
{
var tabNode = document.getElementById("tabid");
if(tabNode==null)
{
alert("对不起，没有表格");
return;
}
var delrow = document.getElementsByName("delrow")[0].value;
if(delrow>=1 && delrow<=tabNode.rows.length)
{
//通过表格对象的deleteRow方法来删除表格的行，-1是因为脚标的缘故。
tabNode.deleteRow(delrow-1);
}
else
{
alert("对不起，您要删的表格不存在");
}
}
function delCol()
{
var tabNode = document.getElementById("tabid");
if(tabNode==null)
{
alert("表格不存在");
}
var delcol = document.getElementsByName("delcol")[0].value;
var trs = tabNode.rows;//获取所有的行数。
//健壮性的判断。 trs[0].cells.length是脚标的列数。
if(delcol>=1 && delcol<=trs[0].cells.length)
{
for(var x =0 ; x<trs.length ; x++)
{
trs[x].deleteCell(delcol-1);
}
}
else
{
alert("您要删除的列数不存在");
}
}
function crtNode(name)
{
return document.createElement(name);
}
</script>
</head>
<body>
<!--
在页面中创建一个表格。5行6列。
-->
行数:<input type="text" name="row" /><br />
列数:<input type="text" name="col" /><br />
<input type="button" name="crtBut" value="创建表格" οnclick="crtTable()" /><br />
<hr />
<input type="text" name="delrow" /><input type="button" value="删除行" οnclick="delRow()" /><br />
<input type="text" name="delcol" /><input type="button" value="删除列" οnclick="delCol()" /><br />
<div id="div_1">
</div>
</body>
</html>
-------------------------------------------------------------------------------\
dom--示例:表格排序
思路:
建立表格.
通过css进行美化.
通过javascript进行内部处理
现获取表格id.然后建立临时容器进行存储.然后定义一个函数容器内容进行排序.最后添加会表格
<!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>无标题文档</title>
<style type="text/css">
table{
border:#00FF00 1px solid;
border-collapse:collapse;
width:500px;
}
table td,table th{
border:#00FF00 1px solid;
padding:10px;
}
#age{
border:#0000FF;
text-decoration:none;
}
</style>
<script type="text/javascript">
var a =true;
function sortAge()
{
/*
需求：对表格zhogn的行的年龄按照从小到大的排序
思路：
1要定义个临时容器
2对临时数组进行指定数据的排序。
3将排序后的数据中的行对象。从新添加回表格中。
*/
var tabNode = document.getElementsByTagName("table")[0];
var arr = [];
var trs = tabNode.rows;
for(var x = 1 ; x<trs.length ; x++)
{
arr[x-1] = trs[x];
}
sortArr(arr);
if(a)
{
for(var x= 0 ;x<arr.length ; x++)
{
arr[x].parentNode.appendChild(arr[x]);
}
a = false;
}
else
{
for(var x=arr.length-1 ;x>=0 ; x--)
{
arr[x].parentNode.appendChild(arr[x]);
}
a = true;
}
}
function sortArr(arr)
{
for(var x = 0 ;x<arr.length -1;x++)
{
for(var y = x+1 ;y<arr.length ; y++)
{
if(parseInt(arr[x].cells[1].innerHTML) >parseInt(arr[y].cells[1].innerHTML))
{
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>
姓名
</th>
<th>
<a href="javascript:void" id="age" οnclick="sortAge()">年龄</a>
</th>
<th>
地址
</th>
</tr>
<tr>
<td>
张三
</td>
<td>
20
</td>
<td>
大连
</td>
</tr>
<tr>
<td>
李四
</td>
<td>
4
</td>
<td>
青岛
</td>
</tr>
<tr>
<td>
王武
</td>
<td>
26
</td>
<td>
沈阳
</td>
</tr>
<tr>
<td>
曹六
</td>
<td>
33
</td>
<td>
河南
</td>
</tr>
<tr>
<td>
周期
</td>
<td>
21
</td>
<td>
北京
</td>
</tr>
<tr>
<td>
孙八
</td>
<td>
25
</td>
<td>
武汉
</td>
</tr>
<tr>
<td>
刘九
</td>
<td>
29
</td>
<td>
广州
</td>
</tr>
<tr>
<td>
麻十
</td>
<td>
23
</td>
<td>
天津
</td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------------------------------
DOM--示例:单选按钮事例按钮
主要是单选操作.点是就出来.点否就收起来.
<!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>无标题文档</title>
<style>
#infoid{
display:none;
}
</style>
<script type="text/javascript">
function showForm(node)
{
var infoNode = document.getElementById("infoid");
if(node.value=="yes")
infoNode.style.display = "block";
else
infoNode.style.display = "none";
}
</script>
</head>
<body>
<div id="newinfoarea">
<div>
您是否接受我们的最新资讯？
<input type="radio" name="info" value="yes" οnclick="showForm(this)"/>是
<input type="radio" name="info" value="no" checked="checked" οnclick="showForm(this)"/>否
</div>
<div id="infoid">
<form>
真实姓名:<input type="text" name="usea" /><br />
邮箱地址:<input type="text" name="mail" /><br />
<input type="submit" value="提交个人信息" />
</form>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------
dom--下拉菜单事例:
<!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>无标题文档</title>
<style type="text/css">
#div_1{
background-color:#33FFFF;
width:300px;
height:80px
}
#div_2{
background-color:#CCCCCC;
width:300px;
}
#selid{
margin-top:12px;
margin-bottom:12px;
}
</style>
<script type="text/javascript">
function selStyle()
{
var div_1Node = document.getElementById("div_1");
var div_2Node = document.getElementById("div_2");
var selNode = document.getElementById("selid");
with(selNode)
{
var val = options[selectedIndex].value;
div_1Node.style.textTransform = val;
div_2Node.innerHTML = "text-transform : "+val+";";
}
}
</script>
</head>
<body>
<div id="div_1">
Every man dies , Not every man really liver .
</div>
<select id="selid" οnchange="selStyle()">
<option value="none">--text-transform--</option>
<option value="uppercase">UPPERCASE</option>
<option value="lowercase">lowercase</option>
</select>
<div id="div_2">
text-transform : none;
</div>
</body>
</html>
动态改变文字样式2:
<!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>无标题文档</title>
<script type="text/javascript">
function selColor()
{
var selNode = document.getElementById("selid");
var val = selNode.options[selNode.selectedIndex].value;
document.getElementById("div_textid").style.color = val;
}
</script>
</head>
<body>
<select id="selid" οnchange="selColor()">
<option>--请选择颜色--</option>
<option style="background-color:#00FF00" value="#00FF00"></option>
<option style="background-color:#660000" value="#660000"></option>
<option style="background-color:#FF0000" value="#FF0000"></option>
<option style="background-color:#CC00FF" value="#CC00FF"></option>
</select>
<div id="div_textid">
我爱琼姐!我会乱说?<br />
我爱琼姐!我会乱说?<br />
我爱琼姐!我会乱说?<br />
我爱琼姐!我会乱说?<br />
</div>
</body>
</html>
--------------------------------------------------------------------------------
dom--二级联动下拉菜单事例:
<!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>无标题文档</title>
<style type="text/css">
#selid2{
width:100px;
}
</style>
<script type="text/javascript">
function selcity()
{
//思路:定义数据对应关系
//城市有很多.所有通过数组存储,每一个省对应一个城市数组,怎么建立对应关系呢?
//每一个省都有自己的脚表。通过脚标和数组建立对应关系，这就是一个二维维数组。
var arr = [['--选择城市--']
,['海锭区','潮阳区','东城区','西城区']
,['沈阳','大连','鞍山','抚顺']
,['济南','青岛','烟台','威海']
,['石家庄','廊坊','唐山','秦皇岛']];
//获取ID并取得脚标和数组相对应。
var selNode = document.getElementById("selid");
var index = selNode.selectedIndex;
var cities = arr[index];
var selNode2 = document.getElementById("selid2");
//清空的操作
selNode2.options.length = 0;
//添加紧二级下拉菜单中
for(var x = 0 ; x<cities.length; x++)
{
//创建届节点
var optNode = document.createElement("option");
optNode.innerHTML = cities[x];
selNode2.appendChild(optNode);
}
}
</script>
</head>
<body>
<select id="selid" οnchange="selcity()">
<option>--选择城市--</option>
<option>北京市</option>
<option>辽宁省</option>
<option>山省东</option>
<option>河北省</option>
</select>
<select id="selid2">
<option>--选择城市--</option>
</select>
</body>
</html>
-----------------------------------------------------------------------------
dom---添加和删除邮件示例:
<!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>无标题文档</title>
<style>
table{
border:#33FF00 1px solid;
width:350px;
border-collapse:collapse;
}
table td a:link,table td a:visited{
color:#FF6600;
text-decoration:none;
}
td{
border:#33FF00 1px solid;
}
</style>
<script type="text/javascript">
function addFile()
{
var tabNode = document.getElementById("fileid");
var trNode = tabNode.insertRow();
var tdNode_File = trNode.insertCell();
var tdNode_del = trNode.insertCell();
tdNode_File.innerHTML = "<input type='file' />";
tdNode_del.innerHTML = "<a href='javascript:void(0)' οnclick='delFile(this)'>删除附件</a>";
}
function delFile(node)
{
var trNode = node.parentNode.parentNode;
trNode.removeNode(true);//自杀
trNode.parentNode.removeChild(trNode);//他杀
}
</script>
</head>
<body>
<table id="fileid">
<tr>
<a href="javascript:void(0)" οnclick="addFile()">添加附件</a>
</td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------------------------
DOM-整体事例。邮件列表
<!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>无标题文档</title>
<style type="text/css">
table{
border:#3300FF 1px solid;
width:60%;
}
table td,table th{
border:#6600FF 1px solid;
}
table th{
background-color:#669999;
}
.one{
background-color:#00FFFF;
}
.tow{
background-color:#66FF66;
}
.over{
background-color:#0033FF;
}
</style>
<script type="text/javascript">
var name;
function trColor()
{
var tabNode = document.getElementById("tabid");
var trs = tabNode.rows;
for(var x = 1 ; x<trs.length-1 ;x++)
{
if(x%2==1)
trs[x].className = "one";
else
trs[x].className = "tow";
trs[x].onmouseover = function()
{
name = this.className;
this.className = "over";
};
trs[x].onmouseout = function()
{
this.className = name;
}
}
}
window.onload = function()
{
trColor();
}
//完成checkbox的全选动作
function checkAll(index)
{
var allNode = document.getElementsByName("all")[index];
var mails = document.getElementsByName("mail");
for(var x = 0 ; x<mails.length; x++)
{
mails[x].checked = allNode.checked;
}
}
//完成按钮的操作
function checkByBut(num)
{
var mails = document.getElementsByName("mail");
for(var x =0 ; x<mails.length ; x++)
{
if(num>1)
mails[x].checked = !mails[x].checked;
else
mails[x].checked = num;
}
}
//删除所选邮件造成
function delMail()
{
if(!window.confirm("你真的要删除所选邮件吗？"))
return;
var mails = document.getElementsByName("mail");
var arr = new Array();
var pos = 0;
for(var x = 0; x<mails.length; x++)
{
if(mails[x].checked)
{
var trNode = mails[x].parentNode.parentNode;
arr[pos++] = trNode;
}
}
for(var x = 0;x<arr.length; x++)
{
var trNode = arr[x];
trNode.parentNode.removeChild(trNode);
}
trColor();
}
</script>
</head>
<body>
<table id="tabid">
<tr>
<th><input type="checkbox" name="all" οnclick="checkAll(0)"/>全选</th>
<th>发件人</th>
<th>邮件名称</th>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三111</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三222</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三333</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三444</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三555</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三666</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三777</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三888</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三999</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三000</td>
<td>新的邮件</td>
</tr>
<tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三aaa</td>
<td>新的邮件</td>
</tr><tr>
<td><input type="checkbox" name="mail" /></td>
<td>张三bbb</td>
<td>新的邮件</td>
</tr>
<tr>
<th><input type="checkbox" name="all" />全选</th>
<th colspan="2">
<input type="button" value="全选" οnclick="checkByBut(1)" />
<input type="button" value="取消全选" οnclick="checkByBut(0)" />
<input type="button" value="反选" οnclick="checkByBut(2)" />
<input type="button" value="删除所选邮件" οnclick="delMail()" />
</th>
</tr>
</table>
</body>
</html>
----------------------------------------------------------------------------------
872
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
