Python全栈开发学习--javascript--（HTML DOM、浏览器BOM）--Day11

最新推荐文章于 2023-10-25 14:59:56 发布

Mnioc

最新推荐文章于 2023-10-25 14:59:56 发布

阅读量275

点赞数 1

分类专栏：记录学习入门文章标签： javascript

本文链接：https://blog.csdn.net/Mnioc/article/details/104646648

版权

记录同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

学习

18 篇文章 0 订阅

订阅专栏

入门

16 篇文章 0 订阅

订阅专栏

一、HTML DOM

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面中其他的标准组件，DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。每个节点都拥有包含着关于节点某些信息的属性。这些属性是nodeName（节点名称）、nodeValue（节点值）、nodeType（节点类型）

根据W3C的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

（1）整个文档是一个文档节点
（2）每个 HTML 元素是元素节点
（3）HTML 元素内的文本是文本节点
（4）每个 HTML 属性是属性节点
（5）注释是注释节点

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树：
在这里插入图片描述

1.1 查找HTML元素

1.1.1 通过 id 找到 HTML 元素

//通过元素设置的id名，找到该元素
var x=document.getElementById("myidname");

<p class="myidname">我是一个P标签</p>

//获取id为main下的所有P元素
document.getElementById("main").getElementsByTagName("p");

1.1.2 通过类名 class 找到 HTML 元素

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

<p class="myclassname">我是一个P标签</p>

1.1.3 通过标签名查找 HTML 元素

//获取p标签
var y=document.getElementsByTagName("p");

//获取id为myidname的div中的p标签
var x=document.getElementById("myidname");
var y=x.getElementsByTagName("p");

<div class="myidname">
	<p class="myclassname1">我是一个P标签</p>
	<p class="myclassname2">我是一个P标签</p>
	<p class="myclassname3">我是一个P标签</p>
</div>

1.1.4 获取元素内容

（1）获取元素内容的最简单方法是使用 innerHTML 属性

//获取id为myidname的内容
var txt=document.getElementById("myidname").innerHTML;

（2）除了 innerHTML 属性，也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。
在这里插入图片描述

1.2 DOM 动作

1.2.1 改变HTML文档

（1）document.write()：直接向 HTML 输出流写内容

document.write("写入html文档的内容");

（2） innerHTML ：更改原HTML文档的内容

document.getElementById("myidname").innerHTML="新更改的内容!";

（3）attribute：改变文档元素的属性值

//更改图片
document.getElementById("myimage").src="landscape.jpg";
<img id="image" src="smiley.gif">

//更改超链接
document.getElementById("myidname").href="www.newxxx.com";
<a href="www.xxx.com"></a>

1.2.2 改变CSS样式

语法

document.getElementById(id).style.property=新样式

<p id="p2">Hello World!</p>

document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";

1.3 DOM 事件

1.3.1 常见事件

（1）onclick：当用户点击鼠标时触发

1）方法1：

//this代表当前的h1元素
//(1)点击后直接更改元素
<h1 onclick="this.innerHTML='点击后显示的内容'">点击前显示的内容</h1>

//(2)点击后触发js函数进行更改
function changetext(param){
    param.innerHTML="点击后显示的内容";
}
<h1 onclick="changetext(this)">点击前显示的内容</h1>

2）方法2：

//不通过this传递当前元素
<script>
	function display(){
		document.getElementById("demo").innerHTML="点击后向p标签显示的内容";
	}
</script>

<button onclick="display()">点击这个按钮能调用函数</button>
<p id="demo"></p>

方法3：

//绑定button与函数的关系
<script>
	document.getElementById("myBtn").onclick=function(){displayDate()};

	function display(){
		document.getElementById("demo").innerHTML="点击后向p标签显示的内容";
	}
</script>

<button id="myBtn">点击这个按钮能调用函数</button>
<p id="demo"></p>

（2）
onload 事件会在用户加载页面后触发
onunload 事件会在用户离开页面时被触发。

//页面加载后会执行functionname()这个js函数
<body onload="functionname()">
</body>

（3）onchange ：当元素内容被改变的时候删除

function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}

输入: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

（4）onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
（5）onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。

1）首先当点击鼠标按钮时，会触发 onmousedown 事件，鼠标按着不松开
2）当释放鼠标按钮时，会触发 onmouseup 事件，  鼠标松开
3）最后，当完成鼠标点击时，会触发 onclick 事件。

1.3.2 事件表

在这里插入图片描述

1.3.3 `addEventListener()`：事件监听

使用 addEventListener() 方法, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

使用该方法，可以给页面元素添加一个监听事件，当监听的动作被触发时，执行绑定的函数。

语法

element.addEventListener(event, function, useCapture);

（1）第一个参数是事件的类型 (如 “click” 或 “mousedown”).

（2）第二个参数是事件触发后调用的函数。

（3）第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

//给id为 myBtn 的页面元素添加监听事件，当该元素绑定的动作执行的时候就触发函数
<script>
	document.getElementById("myBtn").addEventListener("click", displayDate);
	
	function displayDate() {
    	document.getElementById("demo").innerHTML = Date();
}
</script>

<button id="myBtn">点击</button>
<p id="demo"></p>

注意：不要使用 “on” 前缀。例如，使用 “click” ,而不是使用 “onclick”

//设置监听的时候绑定两个或者多个函数
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

事件冒泡和捕获
ddEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

（1）事件冒泡：，内部元素的事件会先被触发，然后再触发外部元素，即： p 元素的点击事件先触发，然后会触发 div 元素的点击事件。

document.getElementById("myDiv").addEventListener("click", myFunction, false);

（2）事件捕获：外部元素的事件会先被触发，然后才会触发内部元素的事件，即： div元素的点击事件先触发，然后再触发 p 元素的点击事件。

document.getElementById("myDiv").addEventListener("click", myFunction, true);

什么意思呢，就是说当p标签位于div内，当我们p标签的监听动作被触发，使用冒泡就先执行p绑定的动作，再执行div绑定的动作。而使用捕获方式的话，就是先执行div再执行p

1.3.4`removeEventListener()` 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件

element.removeEventListener("mousemove", myFunction);

1.4 DOM 元素

在这里插入图片描述

1.4.1 创造

（1）document.createElement("元素类型")：创建元素节点
（2）appendChild()：元素添加
（3） document.createTextNode(）：创建文本节点

实例：

//使用该方法需要获取一个已经存在的元素
//创建p元素
var para = document.createElement("p");

//创建文本
var node = document.createTextNode("这是一个新的段落。");

//将文本添加到p元素中去
para.appendChild(node);

//获取存在的元素div1
var element = document.getElementById("div1");

将p元素添加到div中去
element.appendChild(para);

1.4.2 移除

要移除一个元素removeChild()，你需要知道该元素的父元素

//查找 id="div1" 的元素:
var parent = document.getElementById("div1");

//查找 id="p1" 的 <p> 元素
var child = document.getElementById("p1");

//从父元素中移除子节点：
parent.removeChild(child);

1.4.3 替换

replaceChild()方法进行替换

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");

//新创建的p元素替换p1元素
parent.replaceChild(para, child);

1.5 DOM 集合

当我们通过js获取页面元素的时候，可能会一次性获取到多个页面元素，例如：

var x = document.getElementsByTagName("p");

上面的实例将会获取到文档中所有的p元素，p元素可能有多个，那么我们入伙获取某一个呢？

//访问到第一个p元素
y = x[0];

//访问到第二个p元素
y = x[1];

//元素的数量
x.length

实例：

//遍历所有p元素，替换其颜色
var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}

二、浏览器 BOM

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

2.1 Window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

（1）window.innerHeight ：浏览器窗口的内部高度(包括滚动条)
（2）window.innerWidth ：浏览器窗口的内部宽度(包括滚动条)
在这里插入图片描述
window.open(url) - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

2.2 window.screen

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

（1）screen.availWidth：可用的屏幕宽度
（2）screen.availHeight：可用的屏幕高度
（3）screen.colorDepth：色彩深度
（4）screen.pixelDepth：分辨率

2.3 window.location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面，window.location 对象在编写时可不使用 window 这个前缀

（1）location.hostname ：返回 web 主机的域名
（2）location.pathname：返回当前页面的路径和文件名
（3）location.port ：返回 web 主机的端口（80 或 443）
（4）location.protocol ：返回所使用的 web 协议（http: 或 https:）
（5）location.href：返回当前页面的 URL
（6）location.assign("url") ：方法加载新的文档（打开一个新的页面）
（7）location.replace("url")：替换指定的URL,不同于assgin，无法返回
（8）location.reload()：刷新

window.location.assign(url) ：加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url) ：通过加载 URL 指定的文档来替换当前文档，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的

2.4 window.history

对象包含浏览器的历史，window.history对象在编写时可不使用 window 这个前缀。
（1）history.go()：前进或者后退指定的页面数，正为前进，负为后退
（2）history.back() ：后退一页
（3）history.forward() ：前进一页

2.5 window.navigator

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

// 返回用户代理头的字符串
navigator.userAgent

// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"

// 返回是否可以支持cookie
navigator.cookieEnabled

// 返回浏览器名称
navigator.appName // Chrome,IE

// 返回浏览器内核
navigator.appCodeName // Mozilla

2.6 window弹框

（1）警告框 window.alert("sometext")

function myFunction(){
    alert("你好，我是一个警告框！");
}

（2）确认框 window.confirm("sometext")

确认框通常用于验证是否接受用户操作。
1）当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。
2）当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false

function myFunction(){
    var x;
    var r=confirm("按下按钮!");
    if (r==true){
        x="你按下了\"确定\"按钮!";
    }
    else{
        x="你按下了\"取消\"按钮!";
    }

（3）window.prompt("sometext","defaultvalue")、

提示框经常用于提示用户在进入页面前输入某个值。
1）当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
2）如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

<script>
function myFunction(){
	var x;
	var person=prompt("请输入你的名字","Harry Potter");
	if (person!=null && person!=""){
	    x="你好 " + person + "! 今天感觉如何?";
	    document.getElementById("demo").innerHTML=x;
	}
}

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

2.7 计时事件

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

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

语法

window.setInterval("javascript function",milliseconds);
(函数，间隔时间)；

//1000毫秒等于1秒，每隔3秒弹出hello
setInterval(function(){alert("Hello")},3000);

时钟实例：

var myVar=setInterval(function(){myTimer()},1000);
 
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

（2）clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量

实例：

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

（3）setTimeout() ：在指定的毫秒数后执行指定代码。

语法

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

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中

//等待3秒，然后弹出 "Hello"
setTimeout(function(){alert("Hello")},3000);

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

//点击第一个按钮等待3秒后出现"Hello"弹框。
//点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）

var myVar;
 
function myFunction()
{
    myVar=setTimeout(function(){alert("Hello")},3000);
}
 
function myStopFunction()
{
    clearTimeout(myVar);
}

setInterval() 和setTimeout() 的区别：

setInterval()循环执行，每隔几秒执行一次
setTimeout() 执行一次，延迟几秒只执行一次

2.8 cookie

Cookie 用于存储 web 页面的用户信息，Cookie 是一些数据, 存储于你电脑上的文本文件中，简单点来说就是：浏览器缓存

Cookie 以名/值对形式存储，以;分隔如下所示:

username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

2.8.1 创建cookit

document.cookie="username=John Doe";

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

//再添加cookit路径，默认情况下，cookie 属于当前页面
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

2.8.2 读取cookit

var x = document.cookie;

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

2.8.3 修改cookit

//旧的 cookie 将被覆盖
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

2.8.4 删除cookit

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

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

实例

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

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

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

<script>
//设置cookit
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;
}

//获取cookit
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 "";
}

//检测cookit
function checkCookie(){
	var user=getCookie("username");
	if (user!=""){
		alert("欢迎 " + user + " 再次访问");
	}
	else {
		user = prompt("请输入你的名字:","");
  		if (user!="" && user!=null){
    		setCookie("username",user,30);
    	}
	}
}
</script>

<body onload="checkCookie()"></body>

特别鸣谢菜鸟教程

Mnioc

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Python全栈开发学习--javascript--（HTML DOM、浏览器BOM）--Day11

目录HTML DOM 浏览器 BOM 一、HTML DOM DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言无关的接口，使得你可以访问页面中其他的标准组件，DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。在 HTML DOM 中，所有事物都是节点。DOM 是被视为...
复制链接

扫一扫