客户端JavaScript（三）--cookie、文档对象模型

cookie

为什么会有cookie
Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。

你可能会有这样的经历，登陆一个网站的时候会提醒你要不要记住账户和密码，这样下次来你就不用再次输入账号密码了。这就是cookie的作用，当我们再次访问的时候，方便服务器直接根据我们的cookie来直接取上一次取过的东西(对于每一个cookie服务器会对这个cookie存储上一次我们拿过的数据，下一次对于同一个cookie的时候，就直接在这里取)

什么是Cookie
Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），（服务器告诉浏览器设置一下cookie），浏览器自动会将Cookie以key/value保存到某个目录下的文本文件内，下次请求同一网站时也会自动发送该Cookie给服务器，即添加在请求头部（前提是浏览器设置为启用cookie）。
Cookie就是一个小型文件（浏览器对cookie的内存大小是有限制的-------用来记录一些信息）

cookie的读取

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value; cookie3=value;

cookie的删除

删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;”;

注意：应该定义 cookie 路径以确保删除正确的 cookie。
如果你不指定路径，一些浏览器不会让你删除 cookie。

<script language=javascript> 
 //设置cookie函数 
function setCookie(name, value)  
{  
   var argv = setCookie.arguments;  
   var argc = setCookie.arguments.length;  
   var expires = (argc > 2) ? argv[2] : null;  
   if(expires!=null){  
       var LargeExpDate = new Date ();  
       LargeExpDate.setTime(LargeExpDate.getTime() + (expires*1000*3600*24));          
   }  
   document.cookie = name + "=" + escape (value)+((expires == null) ? "" : ("; expires=" +LargeExpDate.toGMTString()));  
} 
// 读取cookie函数   
function getCookie(Name) {  
   var search = Name + "="  
   if(document.cookie.length > 0) {  
       offset = document.cookie.indexOf(search)  
       if(offset != -1)  {  
           offset += search.length  
           end = document.cookie.indexOf(";", offset)  
           if(end == -1) end = document.cookie.length  
           return unescape(document.cookie.substring(offset, end))  
       }  
       else return ""  
   }  
}  
                                          | 
// 删除cookie函数                                                 
function deleteCookie(name)  
{  
	var expdate = new Date();  
	expdate.setTime(expdate.getTime() - (111111 * 2222 * 1));  
    setCookie(name, "", expdate);  
}  
</script>

文档对象模型

DOM

什么是DOM
DOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型。也就是说，将整个文档看作是一个对象。而一个文档又是由很多节点组成的， 那么这些节点也可以被看作是一个个的对象。DOM里面的对象属于宿主对象，需要浏览器来作 为宿主。一旦离开了浏览器这个环境，那么该对象将不复存在。同样，上一章我们所介绍的 BOM也是如此，需要浏览器来作为宿主，所以它也是一个宿主对象。

DOM的作用如下：
1.浏览器提供的操纵HTML文档内容的应用程序接口
2.用于对文档进行动态操作，如增加文档内容，删除文档内容，修改文档内容等等

把文档表示为树

节点

—个文档是由大量的节点所构成的。而每一个节点都有一个叫做nodeType的属性，用于表明节 点的类型。不同的节点类型对应了不同的数值

节点类型与节点名称

节点名称	对应数值
兀素P点	Node.ELEMENT_NODE(1)
属性节点	Node.ATTRIBUTE_NODE ⑵
文本节点	Node.TEXT_NODE ⑶
CDATA节点	Node.CDATA_SECTION_NODE ⑷
实体引用名称节点	Node.ENTRY_REFERENCE_NODE(5)
实体名称节点	Node.ENTITY_NODE(6)
处理指令节点	Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点	Node.COMMENT_NODE(8)
文档节点	Node.DOCUMENT_NODE(9)
文档类型节点	Node.DOCUMENT_TYPE_NODE(10)
文档片段节点	Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点	Node.NOTATION_NODE(12)

不同的节点对应了不同的节点类型，我们可以通过nodeType属性来获取 到该节点的节点类型
nodeType属性可以和if配合使用，确保不会在错误的节点类型上执行错误的操作
除了获取节点类型以外，我们还可以通过nodeName属性来获取节点的名称，可以使用nodeValue来获取一个元素节点的文本值

获取节点

document.getElementById
语法：document.getElementById(元素ID)；
功能：通过元素ID获取节点

document.getElementsByName
语法：document.getElementsByName(元素name属性)
功能：通过元素的name属性获取节点

document.getElementsByTagName()
语法：document.getElementsByTagName(元素标签)
功能：通过元素名获取节点

节点操作

1、创建节点

<span style="font-size:18px;">
	<div id="box">  
		<p id="p1">我是P1</p>  
		<p id="p2">我是P2</p>  
	</div>  
	
	window.onload = function () {  
		var textNode = document.createTextNode("<p>我是最新创建的节点</p>");  
		document.getElementById("box").appendChild(textNode);  
	}  
</span>

2、删除节点

<span style="font-size:18px;">
	<div id="box">  
		<p id="p1">我是P1</p>  
		<p id="p2">我是P2</p>  
	</div>  

	window.onload = function () {  
		var div1 = document.getElementById("box");  
		div1.removeChild(document.getElementById("p2"));  
	}  
</span>

3、替换节点：

<span style="font-size:18px;">
	<div id="box">  
		<p id="p1">我是P1</p>  
		<p id="p2">我是P2</p>  
	</div>  

	window.onload = function () {  
		var div1 = document.getElementById("box");  
		var span1 = document.createElement("span");  
		span1.textContent = "我是一个新建的span";  
		div1.replaceChild(span1,document.getElementById("p2"));  
	}  
</span>

4、插入节点：

<span style="font-size:18px;">
	<div id="box">  
		<p id="p1">我是P1</p>  
	</div>  
	window.onload = function () {  
		var pNode1 = document.createElement("p");  
		pNode1.textContent = "insertBefore插入的节点";  
		var pNode2 = document.createElement("p");  
		pNode2.textContent = "appendChild插入的节点";  
		document.getElementById("box").appendChild(pNode2);  
		document.getElementById("box").insertBefore(pNode1,document.getEleme	ntById("p1"));  
	}
</span>

5、操作属性

获取属性getAttribute
语法：元素节点.getAttribute(元素属性名)
功能：获取元素节点中指定属性的属性值

设置属性setAttribute
语法：元素节点.setAttribute(属性名,属性值)
功能：创建或改变元素节点的属性

删除属性
语法：元素节点.removeAttribute(属性名)
功能：删除元素中指定属性

6、文本操作

insertData(offset,String)从offset指定的位置插入string
appendData(string)将string插入到文本节点的末尾处
deleteData(offset,count)从offset起删除count个字符
replaceData(off,count,string)从off将cuont个字符用string替换
splitData(offset)从offset起将文本节点分成两个节点
substring(offset,count)返回由offset起的count个节点