一、修改网页元素
当使用document提供的方法和Element的属性得到网页元素之后，就可以对元素的内容进行修改，如下例所示的“全选／全不选”的实现。
例3-17
<html>
<head>
<title>全选</title>
<script type="text/javascript">
//实现全选函数
function choose(val){
//通过name属性值得到所有复选框
var listCH = document.getElementsByName("kc");
//循环修改复选框属性
for(var i=0;i<listCH.length;i++){
//修改复选框的状态
listCH[i].checked=val;
}
} </script>
</head>
<body>
<center>
<form>
<h3>你希望学习的课程</h3>
<a href="javascript:choose(true);">全选</a> /
<a href="javascript:choose(false);">全不选</a>
<hr size="1" />
<div style="text-align:left; padding-left:140px;">
<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="3" />java web<br>
<input type="checkbox" name="kc" value="4" />SSH<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>
<script type="text/javascript">
function addTxt(){
//创建一个input元素
var txt = document.createElement("input");
//设置元素为文本框
txt.type="text";
txt.value="新添加的文本框";
//将文本框添加到层中
var div = document.getElementById("disDiv");
div.appendChild(txt);
}
</script>
</head>
<body>
<center>
<div id="disDiv" style="text-align:center; border:1px solid blue; width:450px; height:100px;">
</div>
<input type="button" value="添加文本框" onclick="addTxt()" />
</center>
图3-23 添加网页元素
</body>
</html>
运行上例，当单击页面中的按钮的时候，层中将添加一个文本框，每单击一次执行一次addTxt()函数，每执行一次该函数添加一个文本框，效果如图3-23所示。
三、删除网页元素
删除元素主要通过document的removeChild()方法实现。如下例所示，动态删除层中按钮元素。
例3-19
<html>
<head>
<title>删除网页元素</title>
<script type="text/javascript">
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>
<center>
<div id="disDiv" style="text-align:center; border:1px solid blue; width:450px; padding:15px;">
<input type="button" value="button1" />
<input type="button" value="button2" />
<input type="button" value="button3" />
<input type="button" value="button4" />
</div>
<hr size="1" />
<input type="button" value="删除层中的元素" onClick="delEle()" />
</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 了。
作者：狂流
出处：http://www.cnblogs.com/kuangliu/
欢迎转载，分享快乐! 如果觉得这篇文章对你有用，请抖抖小手，推荐一下！
