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

最新推荐文章于 2024-03-12 10:57:55 发布
最新推荐文章于 2024-03-12 10:57:55 发布
阅读量508 收藏 1
点赞数
分类专栏： Javascript
原文链接：https://www.runoob.com/js/js-htmldom.html
版权

 

HTML DOM：https://www.runoob.com/js/js-htmldom.html

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

DOM、DOCUMENT、BOM、WINDOW 有什么区别? ：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 是其的一个对象。

归 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 模型被构造为对象的树：

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

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

 

查找 HTML 元素

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

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

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

 

通过 id 查找 HTML 元素

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

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

<!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> 元素。实例：（ 尝试一下 ）

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

 

 

通过类名找到 HTML 元素

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

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

 

HTML DOM 教程

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

 

 

 

浏览器对象模型 （ BOM ）

 

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

 

浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model (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 方案（涵盖所有浏览器）。实例：（ 尝试一下 ）

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 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

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

<script>
document.write("可用宽度: " + screen.availWidth);
</script>

输出：可用宽度: 1536

 

 

Window Screen 可用高度

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

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

<script>
document.write("可用高度: " + screen.availHeight);
</script>
输出：可用高度: 824

所有 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：

<script>
document.write(location.href);
</script>
以上代码输出为：
https://www.runoob.com/js/js-window-location.html

 

Window Location Pathname

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

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

<script>
document.write(location.pathname);
</script>
以上代码输出为：
/js/js-window-location.html

 

Window Location Assign

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

实例：加载一个新的文档：尝试一下

<!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() 方法来停止执行。以下例子,我们添加了 "停止" 按钮：（ 尝试一下 ）

<!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" （ 尝试一下 ） ：setTimeout(function(){alert("Hello")},3000);

 

 

如何停止执行?

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

语法：window.clearTimeout(timeoutVariable)

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

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

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

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

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

<!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>

 

更多实例

另一个简单的计时

 

 

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 值的函数

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

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

函数解析：

以上的函数参数中，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 天：

function checkCookie()
{
  var username=getCookie("username");
  if (username!="")
  {
    alert("Welcome again " + username);
  }
  else 
  {
    username = prompt("Please enter your name:","");
    if (username!="" && username!=null)
    {
      setCookie("username",username,365);
    }
  }
}

 

 

完整实例

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

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
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 "";
}
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}

 

 

 

 

 

 

擒贼先擒王
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用JavaScript修改浏览器URL地址栏的实现代码
10-26
主要介绍了如何使用JavaScript修改浏览器URL地址栏，需要的朋友可以参考下
【前端开发—JavaScript】——BOM/DOM
m0_70903072的博客
06-25 68
浏览器 对象 模型浏览器对象模型: 浏览器提供的一系列可以操作浏览器API。 Document Object Model 文档对象模型: 浏览器提供的操作页面文档的方法或属性(API) - DOM的顶级对象是 document - DOM操作 本质上就是操作DOM元素的各种内容 + 获取DOM元素 + 操作DOM元素的属性,样式,内容,类名 ..... + DOM操作的第一步都是获取要操作的DOM元素
DOM与BOM详解
libingjiedd的博客
03-12 273
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
JavaScript基础教程(正在更新)
a1578460233的博客
06-23 157
JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts 学习视频 帮助文档（学习手册）菜鸟教程 自己写的教程,后续还会完善 ----->>预览 初版写的比较粗糙，后面还会优化 记录了JavaScript中bom的大多数操作 ...
JavaScript之BOM和DOM及其兼容操作详细总结
Jack, what else can you do besides holding your little darling?
12-07 293
JavaScript之BOM和DOM及其兼容操作详细总结
BOM DOM
Waller_的博客
09-10 181
JavaScript---BOM和DOM BOM和DOM实现与网页交互 BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。 DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。 Window对象是客户端JavaScript最高层对象之一，由于window对...
JS（十四）BOM
jjjh968的博客
09-09 211
一、什么是BOM？ BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。 BOM 的核心是 window 对象，表示浏览器的实例。 二、BOM对象 window 对象，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性； document 对象，文档对象； location 对象
BOM——浏览器对象模型
qq_44700755的博客
11-17 868
BOM 浏览器对象模型 BOM 的概念 • BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM 由多个对象组成，其中代表浏览器窗口的 Window对象是 BOM 的顶层对象，其他对象都是该对象的子对象。 • 我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，比如：刷新浏览器、后退、前进、在浏览器中输入URL等。 window 对象 • window 是浏览器的顶级对象，当调用 window 下的属性和
BOM- 操作浏览器
qq_40832034的博客
07-28 428
需求：5秒钟之后，广告自动消失 分析： ①：设置延时函数 ②：隐藏元素 // 132JS 是单线程 JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果
BOM(浏览器对象模型)
我的博客
05-25 674
JS、BOM
bom浏览器对象模型
09-13
bom浏览器对象模型,bom的一些常用属性跟方法，便于大家学习
ERP中绘制树状BOM图
06-21
ERP中绘制树状BOM图 添加，存储，显示项目资源清单
DOM和BOM的使用
01-08
4.DOM和BOM简介，适合基础前端的快速的记忆使用；很全面；
AngularJS 入门教程之HTML DOM实例详解
01-19
AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。 AngularJS 实例 <!DOCTYPE html> &lt...
javascript bom是什么及bom和dom的区别
10-23
BOM是浏览器对象模型，DOM是文档对象模型，前者是对浏览器本身进行操作，而后者是对浏览器（可看成容器）内的内容进行操作。这篇文章给大家介绍javascript bom是什么及bom和dom的区别，感兴趣的朋友一起学习吧
实现JavaScript的组成—-BOM和DOM详解
01-19
BOM提供了很多对象，用来访问浏览器的功能，这些功能于网页内容无关（这些是DOM的事），目前，BOM已经被W3C搬入了HTML5规范中。 window对象： BOM的core，表示浏览器的一个实例，它既是通过javascript访问浏览器窗口...
springboot(酒店管理系统)
04-25
开发语言：Java JDK版本：JDK1.8（或11） 服务器：tomcat 数据库：mysql 5.6/5.7（或8.0） 数据库工具：Navicat 开发软件：idea 依赖管理包：Maven 代码+数据库保证完整可用，可提供远程调试并指导运行服务（额外付费）～ 如果对系统的中的某些部分感到不合适可提供修改服务，比如题目、界面、功能等等... 声明： 1.项目已经调试过，完美运行 2.需要远程帮忙部署项目，需要额外付费 3.本项目有演示视频，如果需要观看，请联系我 4.调试过程中可帮忙安装IDEA，eclipse，MySQL，JDK，Tomcat等软件 重点： 需要其他Java源码联系我，更多源码任你选，你想要的源码我都有！ 需要加v19306446185
BP神经网络matlab实例.doc
最新发布
04-25
数学模型算法
DOM操作和BOM操作
02-06
DOM（文档对象模型）是一种用于表示HTML和XML文档的标准方式。它将文档的内容组织成一个树形结构，使开发人员可以使用脚本语言（如JavaScript）来操作文档的内容和结构。例如，可以使用DOM操作来添加、删除、修改或...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值