javascript之document对象

一、修改网页元素

当使用document提供的方法和Element的属性得到网页元素之后，就可以对元素的内容进行修改，如下例所示的“全选／全不选”的实现。

例3-17

<html>

<head>

//实现全选函数

function choose(val){

//通过name属性值得到所有复选框

var listCH = document.getElementsByName("kc");

//循环修改复选框属性

for(var i=0;i<listCH.length;i++){

//修改复选框的状态

listCH[i].checked=val;

}

} </script>

</head>

<body>

<form>

<h3>你希望学习的课程</h3>

<a href="javascript:choose(true);">全选</a> /

<input type="checkbox" name="kc" value="0" />java基础<br>

<input type="checkbox" name="kc" value="1" />HTML + CSS + JavaScript <br>

<input type="checkbox" name="kc" value="2" />java核心<br>

<input type="checkbox" name="kc" value="5" />SqlServer2005<br>

<input type="checkbox" name="kc" value="6" />Oracle10g<br>

</div>

</form>

</center>

</body>

</html>

运行上例，单击【全选】按钮，将看到如图3-21所示的效果。当单击【全不选】按钮的时候，所有复选框的选中都将被去掉，如图3-22所示。

图3-21 全选

图3-22 全不选

二、添加网页元素

添加网页元素主要使用document.createElement()方法和Element.appendChild()方法实现。使用document.createElement()方法用于创建一个元素，新创建的元素是独立的，和HTML文档没有任何关系，所以需要使用Element.appendChild()方法将新创建的网页元素添加到DOM中。如下例所示，在层中动态创建文本框。

例3-18

<html>

<head>

<title>添加网页元素</title>

function addTxt(){

//创建一个input元素

var txt = document.createElement("input");

//设置元素为文本框

txt.type="text";

txt.value="新添加的文本框";

//将文本框添加到层中

var div = document.getElementById("disDiv");

div.appendChild(txt);

}

</script>

</head>

<body>

</div>

</center>

图3-23 添加网页元素

</body>

</html>

运行上例，当单击页面中的按钮的时候，层中将添加一个文本框，每单击一次执行一次addTxt()函数，每执行一次该函数添加一个文本框，效果如图3-23所示。

三、删除网页元素

删除元素主要通过document的removeChild()方法实现。如下例所示，动态删除层中按钮元素。

例3-19

<html>

<head>

<title>删除网页元素</title>

function delEle(){

//得到层

var div = document.getElementById("disDiv");

//得到层的子元素

var childList = div.childNodes;

//如果层有子元素，就删除第一个子元素

if(childList!=null && childList.length>0){

div.removeChild(childList[0]);

}

else{

alert("层中已经没有可以删除的子元素了！");

}

</script>

</head>

<body>

</div>

</center>

</body>

</html>

运行上例，单击一次按钮，层中的按钮就会减少一个。单击两次按钮之后的效果如图3-24所示。

图3-24 删除网页元素

四、cookie

大家可能知道在document对象中有一个cookie 属性。但是cookie是什么呢？cookie就是所谓的缓存文件，也就是某些Web 站点在您的硬盘上用很小的文本文件存储了一些信息，这些文件就称为cookie。一般来说，cookie是CGI或类似比HTML 高级的文件、程序等创建的，但是JavaScript 也提供了对cookie 的很全面的访问权利。

每个cookie 都是这样的：<cookie名>=<值>。

<cookie名>的限制与JavaScript 的命名限制大同小异，只要你只用字母和数字命名，就完全没有问题了。<值>的要求也是“只能用可以用在URL 编码中的字符”。

每个cookie 都有失效日期，一旦电脑的时钟过了失效日期，这个cookie 就会被删掉。不能直接删掉一个cookie，但是可以用设定失效日期早于现在时刻的方法来间接删掉它。

每个网页或者说每个站点，都有它自己的cookie，这些cookie只能由这个站点下的网页来访问，来自其他站点或同一站点下未经授权的区域的网页，是不能访问的。每一“组”cookie有规定的总大小（大约2KB每“组”），一旦超过最大的总大小，则最早失效的cookie会先被删除，以便让新的cookie“安家”。

现在我们来学习使用document.cookie 属性。

如果直接使用document.cookie 属性，或者说用某种方法（如给变量赋值）来获得document.cookie 的值，就可以知道在现在的文档中有多少个cookie，每个cookie 的名字和它的值。例如，在某文档中添加“document.write(document.cookie)”，结果显示：

name=kevin; email=kevin@kevin.com; lastvisited=index.html

这意味着，文档包含三个cookie：name、email和lastvisited，它们的值分别是kevin、kevin@kevin.com和index.html。可以看到，两个cookie之间是用分号和空格隔开的，于是可以用“cookieString.split('; ')”方法得到每个cookie 分开的一个数组。

先用var cookieString = document.cookie，设定一个cookie 的方法，对document.cookie 赋值。与其他情况下的赋值不同，向document.cookie 赋值不会删除原有的cookie，而只会增添cookie 或更改原有cookie。赋值的格式如下：

document.cookie = 'cookieName=' + escape('cookieValue') + ';expires=' + expirationDateObj.toGMTString();

是不是看得头晕了呢？cookieName 表示cookie 的名称，cookieValue 表示cookie 的值，expirationDateObj 表示存储着失效日期的日期对象名，如果不需要指定失效日期，则不需要第二行。不指定失效日期，则浏览器默认是在关闭浏览器（也就是关闭所有窗口）之后过期。

首先，escape() 方法为什么一定要用？因为cookie 的值的要求是“只能用可以用在URL 编码中的字符”。知道了“escape()”方法是把字符串按URL 编码方法来编码的，那只需要用一个“escape()”方法来处理输出到cookie 的值，用“unescape()”来处理从cookie 接收过来的值就万无一失了。而且这两个方法的最常用途就是处理cookie。其实设定一个cookie 只用“document.cookie = 'cookieName=cookieValue'”这么简单，但是为了避免在cookieValue 中出现URL 里不准出现的字符，还是用一个escape()比较好。

然后，“expires”前面的分号，注意到就行了，是分号而不是其他。

最后，toGMTString() 方法，设定cookie 的失效日期都是用GMT 格式的时间的，其他格式的时间是没有作用的。

下面来实战一下。设定一个“name=rose”的cookie，在三个月后过期。

例3-20

var expires = new Date();

expires.setTime(expires.getTime() + 3 * 30 * 24 * 60 * 60 * 1000);

/* 三个月×一个月当做30天×一天24小时

×一小时60 分×一分60 秒×一秒1000 毫秒*/

document.cookie = 'name=redrose;expires=' + expires.toGMTString();

上面为什么没有用escape() 方法？这是因为知道redrose 是一个合法的URL 编码字符串，也就是说，redrose = escape('redrose')。一般来说，如果设定cookie 时不用escape()，那获取cookie 时也不用unescape()。

下面再编写一个函数，作用是查找指定cookie 的值。

例3-21

function getCookie(cookieName) {

var cookieString = document.cookie;

var start = cookieString.indexOf(cookieName + '=');

// 加上等号的原因是避免在某些cookie 的值里有

// 与cookieName 一样的字符串。

if (start == -1) // 找不到

return null;

start += cookieName.length + 1;

var end = cookieString.indexOf(';', start);

if (end == -1) return unescape(cookieString.substring(start));

return unescape(cookieString.substring(start, end));

}

这个函数用到了字符串对象的一些方法，如果你不记得了，请快去查查。这个函数所有的if 语句都没有带上else，这是因为如果条件成立，程序运行的都是return 语句，在函数里碰上return，就会终止运行，所以不加else 也没问题。该函数在找到cookie 时，就会返回cookie 的值，否则返回“null”。

现在要删除刚才设定的“name=redrose”cookie。

var expires = new Date();

expires.setTime(expires.getTime() - 1);

document.cookie = 'name=redrose;expires=' + expires.toGMTString();

可以看到，只需要把失效日期改成比现在日期早一点（这里是早1 毫秒），再用同样的方法设定cookie，就可以删掉cookie 了。

javascript之document对象的更多相关文章

用JAVA编写浏览器内核之实现javascript的document对象与内置方法
原创文章.转载请注明. 阅读本文之前,您须要对浏览器怎样载入javascript有一定了解. 当然,对java与javascript本身也须要了解. 本文首先介绍浏览器载入并执行javascript的 ...
JavaScript之document对象使用
1.document 对象常用的有三种: A.document.getElementById:通过html元素的Id,来获取html对象.适用于单个的html元素. B.document.getEle ...
Javascript的document对象
对象属性 document.title //设置文档标题等价于HTML的<title>标签 document.bgColor / ...
javascript DOM document对象
document对象代表整个html文档用来访问页面所有元素最复杂的一个dom对象也是window对象的一个子对象. 对于dom编程中,一个html就会当成一个dom树dom会把所有的html元素 ...
JavaScript 之 document对象
对象属性document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)do ...
JavaScript 客户端JavaScript之Document对象中的表单和表单元素
Form对象代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...
JavaScript Window.document对象
一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docunment.getElementById(&qu ...
Javascript之document对象用法（很重要）
一.找到元素 document.getElementById("id"):根据id找层,最多找一个 var a=document.getElementById("id&q ...
javascript中document对象的属性和方法
document.documentElement; document.firstChild;document.childNodes[0];// 取得对<html>的引用document.b ...

随机推荐

sql for xml 嵌套
找很久.原来差一个ELEMENTS 关键字. 想到哪里插入子节点.就直接写一条语句,加一个ELEMENTS. 为什么baidu这么就都找不到.到处都是转来转去的东西.郁闷. select h.*,(s ...
CentOS6下yum下载的包存放路径
http://showerlee.blog.51cto.com/2047005/1169818 yum下载下来的文件保存默认路径是: /var/cache/yum 修改yum配置文件 /etc/yum ...
web设计经验<五>国外设计师总结的7个找灵感实用方法
每个设计师不时会有创意灵感缺失.大脑一片空白的状态.盯着一个空白的屏幕,发愁着“好吧,我现在该做什么呢?该怎么做呢?”有些人喜欢静待,但这不是唯一的一个方法.焦虑的客户或者是你自己的不耐烦,都会让你无 ...
php三维数组变二维数组
<?php $result = Array(0 => Array(0 => Array(bid => 41,brealname => 'we教官',cid => 4 ...
用CSS样式截取字符串，多的用省略号表示
<html><head><meta http-equiv="Content-Type" content="text/html; charse ...
正则的小效果：-------> 过滤敏感词
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
【Todo】秒杀系统材料
秒杀系统:Link <一个经验证可落地的秒杀系统实践思路> 主要依赖于Redis进行处理. http://geek.csdn.net/news/detail/59847 淘宝大秒系统设 ...
转：浅谈C/C++中的指针和数组（一）
再次读的时候实践了一下代码,结果和原文不一致 error C2372: 'p' : redefinition; different types of indirection 不同类型的间接寻址 /// ...
hiho_1061_beautiful_string
题目大意题目连接:beautiful string 写代码之前,考虑清楚流程,以及需要维护的变量.... 实现 #include<iostream> #include<st ...
One Class SVM, SVDD（Support Vector Domain Description）(转)
今天给大家介绍一下one class classification以及用SVDD(support vector domain description)做one class classification ...

javascript之document对象

javascript之document对象的更多相关文章

随机推荐

热门专题