菜鸟教程之 HTML DOM 和浏览器BOM

╰+攻爆jí腚メ 2023-01-07 11:26 218阅读 0赞

HTML DOM：[https://www.runoob.com/js/js-htmldom.html][https_www.runoob.com_js_js-htmldom.html]

浏览器对象模型 (BOM)：[https://www.runoob.com/js/js-window.html][https_www.runoob.com_js_js-window.html]

DOM、DOCUMENT、BOM、WINDOW 有什么区别? ：[https://www.zhihu.com/question/33453164][https_www.zhihu.com_question_33453164]

*  通过 HTML DOM，JavaScript 可访问 HTML 文档的所有元素。
 *  通过 浏览器对象模型 (BOM) ， JavaScript 有能力与浏览器 "对话" 。

document 主要在 js 中指 **document 对象**，为页面 window 下页面文档的主体 如： window.document.body  
Document 主要是 html 中标签声明用 如： <!DOCTYPE html>

**DOM 是为了操作文档出现的 API，document 是其的一个对象；**  
**BOM 是为了操作浏览器出现的 API，window 是其的一个对象。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVraW5nMTAx_size_16_color_FFFFFF_t_70][]

**归 DOM 管的**：

*  **E****区**（ 就是你说的 document 啦。由 web 开发人员呕心沥血写出来的一个文件夹，里面有 index.html，CSS 和 JS 什么鬼的，部署在服务器上，我们可以通过浏览器的地址栏输入URL 然后回车将这个document 加载到本地，浏览，右键查看源代码等）

**归 BOM 管的**：

*  **A****区**（浏览器的标签页，地址栏，搜索栏，书签栏，窗口放大还原关闭按钮，菜单栏等等）
 *  **B****区**（浏览器的右键菜单）
 *  **C****区**（document加载时的状态栏，显示http状态码等）
 *  **D****区**（不知道咋形容=。=哦对，滚动条scroll bar）
 *  ……

暂时把 DOM 粗滥地理解成一套规则（其实就是一个接口，上面记录着HTML文档每个节点对应的名字，以及用JavaScript操控这些节点时一些抽象概念对应的具体定义）

# HTML DOM #

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。 HTML DOM 独立于平台和语言，可被任何编程语言使用，比如 Java、JavaScript 和 VBscript

## HTML DOM (文档对象模型) ##

> 当网页被加载时，浏览器会创建**页面的文档对象模型**（Document Object Model）。

## HTML DOM 树 ##

**HTML DOM** 模型被构造为**对象**的树：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVraW5nMTAx_size_16_color_FFFFFF_t_70 1][]

通过可编程的对象模型，**JavaScript 获得了足够的能力来创建动态的 HTML**。

*  JavaScript 能够改变页面中的所有 HTML 元素
 *  JavaScript 能够改变页面中的所有 HTML 属性
 *  JavaScript 能够改变页面中的所有 CSS 样式
 *  JavaScript 能够对页面中的所有事件做出反应

## 查找 HTML 元素 ##

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

*  通过 id 找到 HTML 元素
 *  通过标签名找到 HTML 元素
 *  通过类名找到 HTML 元素

## 通过 id 查找 HTML 元素 ##

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：（ [尝试一下 ][Link 1]）

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p id="intro">你好世界!</p>
    <p>该实例展示了 <b>getElementById</b> 方法!</p>
    <script>
    x=document.getElementById("intro");
    document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
    </script>
    
    </body>
    </html>

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。如果未找到该元素，则 x 将包含 null。

## 通过标签名查找 HTML 元素 ##

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素。实例：（ [尝试一下 ][Link 2]）

var x=document.getElementById("main");
    var y=x.getElementsByTagName("p");

## 通过类名找到 HTML 元素 ##

本例通过 **[getElementsByClassName][]** 函数来查找 class="intro" 的元素。实例：（ [尝试一下][Link 3] ）

var x=document.getElementsByClassName("intro");

HTML DOM 教程

*  如何改变 HTML 元素的内容 (innerHTML)
 *  如何改变 HTML 元素的样式 (CSS)
 *  如何对 HTML DOM 事件做出反应
 *  如何添加或删除 HTML 元素

# 浏览器对象模型 （ BOM ） #

> 浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器 "对话"。

## 浏览器对象模型 (BOM) ##

浏览器对象模型（**B**rowser **O**bject **M**odel (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

### Window 对象 ###

> 所有浏览器都支持 window 对象。它表示浏览器窗口。
> 
> 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
> 
> 全局变量是 window 对象的属性。
> 
> 全局函数是 window 对象的方法。
> 
> 甚至 HTML DOM 的 document 也是 window 对象的属性之一：  
>         window.document.getElementById("header");  
>         与此相同：  
>         document.getElementById("header");

### Window 尺寸 ###

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

*  window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
 *  window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

*  document.documentElement.clientHeight
 *  document.documentElement.clientWidth

或者

*  document.body.clientHeight
 *  document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）。实例：（ [尝试一下 ][Link 4]）

var w=window.innerWidth
    || document.documentElement.clientWidth
    || document.body.clientWidth;
    
    var h=window.innerHeight
    || document.documentElement.clientHeight
    || document.body.clientHeight;

该例显示浏览器窗口的高度和宽度。

### 其他 Window 方法 ###

一些其他方法：

*  window.open()   - 打开新窗口
 *  window.close()   - 关闭当前窗口
 *  window.moveTo()   - 移动当前窗口
 *  window.resizeTo()   - 调整当前窗口的尺寸

### 笔记： ###

定义全局变量与在 window 对象上直接定义属性差别。

1、全局变量不能通过 delete 操作符删除；而 window 属性上定义的变量可以通过 delete 删除

var num = 123;
    window.str = "string";
    delete num;
    delete str;
    console.log(num); //123
    
    console.log(str); //str is not defined
    //全局变量不能通过 delete 删除，因为通过 var 定义全局变量会有一个名为 [Configurable] 的属性，默认值为 false，
    // 所以这样定义的属性不可以通过 delete 操作符删除

2、访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在。

var newValue = oldValue; // 报错：oldValue is not defined
    var newValue = window.oldValue; // 不会报错
    console.log(newValue); // undefined

3、有些自执行函数里面的变量，想要外部也访问到的话，在 window 对象上直接定义属性。

## Window Screen ##

window.screen 对象包含有关用户屏幕的信息。**window.screen**对象在编写时可以不使用 window 这个前缀。

一些属性：

*  screen.availWidth - 可用的屏幕宽度
 *  screen.availHeight - 可用的屏幕高度

### Window Screen 可用宽度 ###

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

实例：（ 返回您的屏幕的可用宽度： ）[尝试一下][Link 5]

### Window Screen 可用高度 ###

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

实例：返回您的屏幕的可用高度：[尝试一下][Link 6]

[所有 screen 属性实例][screen]

## Window Location ##

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

**window.location** 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

*  location.hostname 返回 web 主机的域名
 *  location.pathname 返回当前页面的路径和文件名
 *  location.port 返回 web 主机的端口 （80 或 443）
 *  location.protocol 返回所使用的 web 协议（http: 或 https:）

### Window Location Href ###

location.href 属性返回当前页面的 URL。

实例：返回（当前页面的）整个 URL：

### Window Location Pathname ###

location.pathname 属性返回 URL 的路径名。

实例：返回当前 URL 的路径名：

### Window Location Assign ###

location.assign() 方法加载新的文档。

实例：加载一个新的文档：[尝试一下][Link 7]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <head>
    <script>
    function newDoc(){
        window.location.assign("https://www.runoob.com")
    }
    </script>
    </head>
    <body>
     
    <input type="button" value="加载新文档" onclick="newDoc()">
     
    </body>
    </html>

## Window History ##

window.history 对象包含浏览器的历史。

**window.history**对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

*  history.back() - 与在浏览器点击后退按钮相同
 *  history.forward() - 与在浏览器中点击向前按钮相同

### Window history.back() ###

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <head>
    <script>
    function goBack()
    {
        window.history.back()
    }
    </script>
    </head>
    <body>
     
    <input type="button" value="Back" onclick="goBack()">
     
    </body>
    </html>

### Window history.forward() ###

history forward() 方法加载历史列表中的下一个 URL。

这与在浏览器中点击前进按钮是相同的：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    function goForward()
    {
        window.history.forward()
    }
    </script>
    </head>
    <body>
     
    <input type="button" value="Forward" onclick="goForward()">
     
    </body>
    </html>

history.go() 这个方法来实现向前，后退的功能。

function a(){
        history.go(1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
    }
    function b(){
        history.go(-1);  // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
    }

刷新的功能

function a(){
        history.go(0);  // go() 里面的参数为0,表示刷新页面
    }

## Window Navigator ##

window.navigator 对象包含有关访问者浏览器的信息。

**window.navigator** 对象在编写时可不使用 window 这个前缀。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    	
    <div id="example"></div>
    <script>
    txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
    </script>
    
    </body>
    </html>

警告!!!

来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

*  navigator 数据可被浏览器使用者更改
 *  一些浏览器对测试站点会识别错误
 *  浏览器无法报告晚于浏览器发布的新操作系统

由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。

例子：if (window.opera) \{...some action...\}

## JavaScript 弹窗 ##

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

## 警告框 ##

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

**语法**：window.alert("*sometext*");

**window.alert()** 方法可以不带上window对象，直接使用 **alert() **方法。

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction()
    {
        alert("你好，我是一个警告框！");
    }
    </script>
    </head>
    <body>
    
    <input type="button" onclick="myFunction()" value="显示警告框">
    
    </body>
    </html>

### 确认框 ###

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false。

**语法**：window.confirm("*sometext*");

**window.confirm()** 方法可以不带上window对象，直接使用**confirm()**方法。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p>点击按钮，显示确认框。</p>
    <button onclick="myFunction()">点我</button>
    <p id="demo"></p>
    <script>
    function myFunction(){
    	var x;
    	var r=confirm("按下按钮!");
    	if (r==true){
    		x="你按下了\"确定\"按钮!";
    	}
    	else{
    		x="你按下了\"取消\"按钮!";
    	}
    	document.getElementById("demo").innerHTML=x;
    }
    </script>
    
    </body>
    </html>

### 提示框 ###

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

**语法**：window.prompt("*sometext*","*defaultvalue*");

**window.prompt()** 方法可以不带上window对象，直接使用**prompt()**方法。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p>点击按钮查看输入的对话框。</p>
    <button onclick="myFunction()">点我</button>
    <p id="demo"></p>
    <script>
    function myFunction(){
    	var x;
    	var person=prompt("请输入你的名字","Harry Potter");
    	if (person!=null && person!=""){
    	    x="你好 " + person + "! 今天感觉如何?";
    	    document.getElementById("demo").innerHTML=x;
    	}
    }
    </script>
    </body>
    </html>

### 换行 ###

弹窗使用 反斜杠 + "n"(\\n) 来设置换行。

实例：alert("Hello\\nHow are you?");

## JavaScript 计时事件 ##

JavaScript 设定一个时间间隔之后，再来执行代码，称之为计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

*  setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
 *  setTimeout() - 在指定的毫秒数后执行指定代码。

**注意:** setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

### setInterval() 方法 ###

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法：window.setInterval("*javascript function*",*milliseconds*);

**window.setInterval()** 方法可以不使用 window 前缀，直接使用函数 **setInterval()**。

> setInterval()   
>         第一个参数是函数（function）。  
>         第二个参数间隔的毫秒数  
>         注意: 1000 毫秒是一秒。

实例：每三秒弹出 "hello" ：***setInterval(function()\{alert("Hello")\},3000);***

实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码，就是手表一样。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p>在页面显示一个时钟</p>
    <p id="demo"></p>
    <script>
    var myVar = setInterval(function(){myTimer()},1000);
    function myTimer(){
    	var d = new Date();
    	var t = d.toLocaleTimeString();
    	document.getElementById("demo").innerHTML=t;
    }
    </script>
    
    </body>
    </html>

### 如何停止执行? ###

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法：window.clearInterval(*intervalVariable*)

**window.clearInterval()** 方法可以不使用window前缀，直接使用函数**clearInterval()**。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

myVar=setInterval("*javascript function*",*milliseconds*);

然后你可以使用 clearInterval() 方法来停止执行。以下例子,我们添加了 "停止" 按钮：（ [尝试一下][Link 8] ）

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p>页面上显示时钟：</p>
    <p id="demo"></p>
    <button onclick="myStopFunction()">停止</button>
    <script>
    var myVar=setInterval(function(){myTimer()},1000);
    function myTimer(){
    	var d=new Date();
    	var t=d.toLocaleTimeString();
    	document.getElementById("demo").innerHTML=t;
    }
    function myStopFunction(){
    	clearInterval(myVar);
    }
    </script>
    
    </body>
    </html>

### setTimeout() 方法 ###

语法：myVar= window.setTimeout("*javascript function*",* milliseconds*);

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

实例：等待3秒，然后弹出 "Hello" （ [尝试一下][Link 9] ） ：***setTimeout(function()\{alert("Hello")\},3000);***

### 如何停止执行? ###

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法：window.clearTimeout(*timeoutVariable*)

**window.clearTimeout()** 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar=setTimeout("*javascript function*",*milliseconds*);

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

实例：以下是同一个实例, 但是添加了 "Stop the alert" 按钮：（ [尝试一下 ][Link 10]）

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
    <p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
    <button onclick="myFunction()">点我</button>
    <button onclick="myStopFunction()">停止弹框</button>
    <script>
    var myVar;
    function myFunction(){
    	myVar=setTimeout(function(){alert("Hello")},3000);
    }
    function myStopFunction(){
    	clearTimeout(myVar);
    }
    </script>
    
    </body>
    </html>

更多实例

[另一个简单的计时][Link 11]

## JavaScript Cookie ##

Cookie 用于存储 web 页面的用户信息。

### 什么是 Cookie？ ###

Cookie 是一些数据, 存储于你电脑上的文本文件中。  
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。  
Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

*  当用户访问 web 页面时，他的名字可以记录在 cookie 中。
 *  在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储，如下所示:  
username=John Doe  
当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

### 使用 JavaScript 创建Cookie ###

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。  
JavaScript 中，创建 cookie 如下所示：  
document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：  
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。  
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

### 使用 JavaScript 读取 Cookie ###

在 JavaScript 中, 可以使用以下代码来读取 cookie：  
***var x = document.cookie;***

> document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

### 使用 JavaScript 修改 Cookie ###

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

### 使用 JavaScript 删除 Cookie ###

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

### Cookie 字符串 ###

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：

cookie1=value; cookie2=value;

### JavaScript Cookie 实例 ###

在以下实例中，我们将创建 cookie 来存储访问者名称。

首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

访问者下一次访问页面时，他会看到一个欢迎的消息。

在这个实例中我们会创建 3 个 JavaScript 函数:

1.  设置 cookie 值的函数
2.  获取 cookie 值的函数
3.  检测 cookie 值的函数

### 设置 cookie 值的函数 ###

首先，我们创建一个函数用于存储访问者的名字：

**函数解析：**

以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。

该函数设置了 cookie 名、cookie 值、cookie过期时间。

### 获取 cookie 值的函数 ###

然后，我们创建一个函数用于返回指定 cookie 的值：

function getCookie(cname)
    {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for(var i=0; i<ca.length; i++) 
      {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
      }
      return "";
    }

**函数解析：**

cookie 名的参数为 cname。

创建一个文本变量用于检索指定 cookie :cname + "="。

使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(';'))。

循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca\[i\].trim())。

如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。

如果没有找到 cookie, 返回 ""。

### 检测 cookie 值的函数 ###

最后，我们可以创建一个检测 cookie 是否创建的函数。

如果设置了 cookie，将显示一个问候信息。

如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：

### 完整实例 ###

实例：以下实例在页面载入时执行 checkCookie() 函数。（ [尝试一下 ][Link 12]）

[https_www.runoob.com_js_js-htmldom.html]: https://www.runoob.com/js/js-htmldom.html
[https_www.runoob.com_js_js-window.html]: https://www.runoob.com/js/js-window.html
[https_www.zhihu.com_question_33453164]: https://www.zhihu.com/question/33453164
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVraW5nMTAx_size_16_color_FFFFFF_t_70]: /images/20221119/d5189d578f6b49349e558fd4f6004e02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVraW5nMTAx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210117175607157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZyZWVraW5nMTAx,size_16,color_FFFFFF,t_70
[Link 1]: https://www.runoob.com/try/try.php?filename=try_dom_getelementbyid
[Link 2]: https://www.runoob.com/try/try.php?filename=try_dom_getelementsbytagname
[getElementsByClassName]: https://www.runoob.com/jsref/met-document-getelementsbyclassname.html
[Link 3]: https://www.runoob.com/try/try.php?filename=try_dom_getelementsbyclassname
[Link 4]: https://www.runoob.com/try/try.php?filename=tryjs_win_inner
[Link 5]: https://www.runoob.com/try/try.php?filename=tryjs_screen_availwidth
[Link 6]: https://www.runoob.com/try/try.php?filename=tryjs_screen_availheight
[screen]: https://www.runoob.com/try/try.php?filename=tryjs_screen_all
[Link 7]: https://www.runoob.com/try/try.php?filename=tryjs_loc_assign
[Link 8]: https://www.runoob.com/try/try.php?filename=tryjs_setinterval3
[Link 9]: https://www.runoob.com/try/try.php?filename=tryjs_timing1
[Link 10]: https://www.runoob.com/try/try.php?filename=tryjs_settimeout2
[Link 11]: https://www.runoob.com/try/try.php?filename=tryjs_timing2
[Link 12]: https://www.runoob.com/try/tryit.php?filename=tryjs_cookie_username