Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础

最新推荐文章于 2023-05-30 22:07:42 发布
最新推荐文章于 2023-05-30 22:07:42 发布
阅读量385 收藏 1
点赞数 2
分类专栏： Web前端 文章标签： html javascript css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45118229/article/details/109497576
版权

系列文章目录

Web前端 学习知识点总结（一）HTML基本标签.
Web前端 学习知识点总结（二）之Form和Css选择器.
Web前端 学习知识点总结（三）Css字体、文本样式以及盒子模型.
Web前端 学习知识点总结（四）之display 和 float.
Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白.
Web前端 学习知识点总结（六）定位position.
Web前端 学习知识点总结（七）Css3动画animation.
Web前端 学习知识点总结（八）JavaScript的常用基础.
Web前端 学习知识点总结（九）JavaScript的BOM和DOM基础.
Web前端 学习知识点总结（十）jQuery基础 获取文本和选择器.
Web前端 学习知识点总结（十一）jQuery进阶 动画和节点操作.
Web前端 学习知识点总结（十二）jQuery进阶 表单验证和简单正则表达式.
Web前端 学习知识点总结（十三）学生管理系统案例.

文章目录

前言

在掌握了基础的JS语句后，接下来的重要模型BOM和DOM。它们进一步，可以帮助我们解决大部分的页面问题，BOM是浏览器的对象模型，主要的功能和作用是提供了浏览器的交互，且提高了用户的体验。DOM是页面对象模型，可以找到页面中所有的HTML标签和CSS的样式，方便添加动态的效果，完成需要的功能和设计。

一、BOM

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

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一

1.1 Window方法

location和window内部的一些基本方法：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--window 属性 
			location 
			location.pathname //可以返回url的路径
			location.href="" //可以跳转到指定的地址
			方法
				也可以不加window直接使用
				window.open() 打开新的界面
				window.close() 关闭界面
				alert() 提醒
				prompt() 输入信息
				confirm() 点确定返回true 点取消返回false
			-->
			<!--<input type="button" name="" id="" value="打开" οnclick="javascript:window.open
			('http://www.baidu.com')"/>-->
			<input type="button" name="" id="" value="打开" onclick="doOpen()"/>
			<input type="button" name="" id="" value="关闭" onclick="doClose()"/>
			<input type="button" name="" id="" value="alert" onclick="doalert()"/>
			<input type="button" name="" id="" value="prompt" onclick="doPrompt()"/>
			<input type="button" name="" id="" value="Confirm" onclick="doConfirm()"/>
			<script>
				function doOpen(){
					window.open("http://www.baidu.com");
					window.location.href="http://www.baidu.com";
				}
				function doClose(){
					window.close();
				}
				
				function doalert(){
					window.alert("kanba");
				}
//				输入框
				function doPrompt(){
					var result=window.prompt("请输入你的名字");
					alert(result);
				}
//				提示框
				function doConfirm(){
					window.confirm("确定要删除吗？")
				}
			</script>
	</body>
</html>

1.2 history方法

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

    和浏览器中点击后退按钮的作用相同。

  2. Window history.forward() ;
    history forward() 方法加载历史列表中的下一个 URL。
    和浏览器中点击前进按钮的作用相同。

  3. go(1) 正值前进 负值后退。

1.3 document方法

  1. getElementById() 通过id标签找到html标签的位置。
  2. getElementsByName() 通过name标签找到html标签的位置。
  3. getElementsByTagName() 通过html的标签名字,找到html标签的位置。

可以使用组合标签:
如：
getElementById().getElementsByTagName();可以找打id 下面的指定标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
			<!--document 文档
				属性
					referrer 前置页面的url
				方法
					write()
					getElementById() 找到标签  唯一的id
					.innerHTML 可以获取标签内的内容 且是双标签
					.value 是表单元素标签中的内容 （单标签）
					
					下两者返回的是一个集合
					getElementsByName() 按照name属性 形成一个数组 拿出一系列的值
					
					getElementsByTagName() 按照标签名  
			-->
		<p id="t">当幸福来敲门</p>
		<input type="text"  id="username" /><br />
		<div>
			<span name="season">春</span>
			<span name="season">夏</span>
			<span name="season">秋</span>
			<span name="season">冬</span>
		</div>
		<!--用于测试-->
		<input type="button" onclick="changeSeason_02()" value="换名" />
		<script>
//			函数1 标题进行改变
			function changeTitle(){
//				拿到整个p标签
				var p = document.getElementById("t");
				p.innerHTML="幸福来了";
			}
//			函数2 名字的改变
			function changeName(){
				var inp = document.getElementById("username");
				inp.value="lisi"
			}
//			函数3 通过name 改变季节
			function changeSeason(){
//				span列表
				var spans = document.getElementsByName("season");
				for(var i = 0;i < spans.length; i++){
					alert(spans[i].innerHTML);
				}
			}
					
//			函数4 通过tag标签寻找
			function changeSeason_02(){
//				span列表
				var spans = document.getElementsByTagName("span");
				for(var i = 0;i < spans.length; i++){
					alert(spans[i].innerHTML);
				}
			}
		</script>
	</body>
</html>

1.4 Window的时间函数。

  1. setTimeout(函数名 延迟时间) 延迟多长时间来执行
    一般用来做静态效果。
  2. setInterval(“函数名”，1000) 间隔多长时间执行函数 要搭配
    （1）先让var timer=setInterval(“要执行的函数名称”,1000（设定时间）);
    （2）clearTimeout(timer);清除time。
    可用来做动态效果。

1.5 window综合案例 网页时间倒计时后，跳转到百度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p id="p">2</p>
		<input type="button" value="开始" onclick="star()"/>
		<input type="button" value="取消" onclick="stop()"/>
		<script type="text/javascript">
			function star(){
			//倒计时的函数，用时间来控制，因为是动态的所以选用setInterval()
				time=setInterval("getP()",1000);
			}
			function stop(){
			//清除影响
				clearTimeout(time);
			}
			function getP(){
			//找到网页的p标签，用“get..IP”
				var p = document.getElementById("p");
			//找到之后减一
				p.innerHTML=p.innerHTML-1;
			//如果等于零就跳转
				if(p.innerHTML==0){
					location.href="http://www.baidu.com";
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述
取消可以暂停
在这里插入图片描述
之后跳转到百度页面
在这里插入图片描述

二、DOM

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过DOM可以访问网页内全部的元素(（HTML+CSS）内全部的 标签内容 和属性值）。

HTML DOM 模型被构造为对象的树。
该内容在之前学习HTML基础的时候有提及。

下图的html的文档可以解析成下列的树形结构。
在这里插入图片描述

2.1DOM的操作分类：

  1. DOM_CORE dom内部的指令；
  2. HTML_DOM 控制html的指令；
  3. CSS_DOM 控制CSS的指令。

2.2 Node

标签element
（1）创建节点
document.createElement(“p”)；
（2）删除节点
parent.removeChild(img);
（3）创建父节点
var parent=document.getElementById(“container”)；
（4）给父节点建立个孩子
parent.appendChild§;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="container">
			<img src="img/微信图片_20201012202508.png"/ id="img">		
			<img src="img/微信图片_20201012202508.png"/ id="img">		
			<img src="img/微信图片_20201012202508.png"/ id="img">		
			<img src="img/微信图片_20201012202508.png"/ id="img">		
		</div>
		<script type="text/javascript">
			var p = document.createElement("p");
			p.innerHTML="这就是内容"
			
			var parent=document.getElementById("container")
//			给父节点添加孩子
			parent.appendChild(p);
			var img=document.getElementById("img");
//			将节点放在img的前面 指定位置
			parent.insertBefore(p,img);
			
//			删除
			
//			parent.removeChild(img);
//			到父节点,再找子节点（ 当不确定父节点的时候 ）
			img.parentNode.removeChild(img);
		</script>
	</body>
</html>

2.3 属性的更改

对于CSS的属性进行设置主要有两种方案
(1)元素.setAttribute(属性名，替换），
(2)元素.属性=替换。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--属性
			设置属性
			(1)setAttribute
			(2)元素.属性=
			
			
		-->
		<img src="img/微信图片_20201012202508.png"  id="logo" width="100px"/>
		
		<input type="button" name="" id="" value="换图"  onclick="changeImg()"/><br />
		
		<input type="text" name="" id="name" value="" />
		
		<input type="button" name="" id="kongjian" value="修改该属性"  onclick="changeArr()"/><br />
		<script type="text/javascript">
			function changeImg(){
				var img = document.getElementById("logo");
//				img.src = "img/微信图片_20200928200600.jpg";
//				更规范
				alert(img.getAttribute("src"));
				img.setAttribute("src","img/微信图片_20200928200600.jpg");
			}
			function changeArr(){
				var name = document.getElementById("name");
				var kongjian = document.getElementById("kongjian");
//				name.type="password";
				if(name.type=="text"){
					name.type="password";
				}else{
					name.type="text";
				}
			}
		</script>
	</body>
</html>

2.3案例 用JS更换图片

有了可以更改属性的设置后，很多复杂的CSS或HTML可以用更换属性值的操作轻松的解决，比如更换图片的CSS案例中，需要用到寻找邻接的兄弟节点的方法，对建立html的结构有着严格的要求，必须要建立成兄弟节点才可以找得到。
但是在JS中，可以通过getElement.Ip()，或者其他的get函数找到我们需要修改的html值，很方便。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<p> 
			选择你最喜欢的书：
			<input type="radio"  value="1" onclick="img_01()" name="book" id="first"/>
			<label for="first">我和我的狗狗一起活下来</label>
			<input type="radio"  value="2" onclick="img_02()" name="book" id="second"/>
			<label for="second">灰霾来了怎么办</label>		
		</p>
		<div>
			<img id="img"/>
			<p id="p"></p>
		</div>
	</body>
	
	<script type="text/javascript">
		function img_01(){
			var img=document.getElementById("img");
			var p = document.getElementById("p");
//			img.src="img/图片1.png";
			img.setAttribute("src","img/图片1.png");
			p.innerHTML="我和我的狗狗一起活下来";
			
		}
		
		
		function img_02(){
			var img=document.getElementById("img");
			var p = document.getElementById("p");
//			img.src="img/图片1.png";
			img.setAttribute("src","img/图片2.png");
			p.innerHTML="灰霾来了怎么办";
			
		}
	</script>
</html>

显示结果：
在这里插入图片描述
在这里插入图片描述

2.3 窗口事件

（1） window.onload

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。
（2）Onclick 当是鼠标点击时后面跟着的函数。
（3）鼠标的事件

  • onmouseenter(当鼠标进入时）

  • onmouseleave(当鼠标离开时）

  • onmousemove(当鼠标移动时）

  • onmouseover(当鼠标悬浮时）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<p οnmοuseenter="doEnter()" οnmοuseleave="doLeave()" 
			<!--οnmοusemοve="doMove()"--> 
			οnmοuseοver="doOver()"></p>
	</body>
	<script type="text/javascript">
//		window.οnlοad=function(){
//			alert("ssnfofnidaon");
//		}
		function doEnter(){
			console.log("enter------")
		}
		
		function doLeave(){
			console.log("leave------")
		}
		
//		function doMove(){
//			console.log("move------")
//		}
		function doOver(){
			console.log("Over------")
		}
	</script>
</html>

（4）键盘的事件
（1）οnkeyup="";当键盘摁下的时候，触发的事件；
（2）οnkeydοwn="";当键盘弹起的时候，触发的事件。
一般来说，两个方法可以获取全部的键盘字符。

“13”是回车的数字字符。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--<input type="" name="" id="" value="" οnkeyup="doUp()" />-->
		<input type="" name="" id="" value="" onkeydown="doDown()" />
	</body>
	
	<script type="text/javascript">
		function search(){
			alert("开始搜索")
		}
		
		function doUp(){
//			if(event.keyCode==13)
//			{search()}
			alert(event.keyCode)
		}
		function doDown(){
//			if(event.keyCode==13)
//			{search()}
			alert(event.keyCode)
			}
		
	</script>
</html>
Le`soleil
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web之dom
中國颜值半壁江山的博客
09-27 557
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。 一、查找元素 1、直接查找 document.getElementById('i1') /根据ID获取一个标签 document.getElementsByName('div
运用HTML、CSS、JavaScript基础制作页面
06-10
a.练习创建简单的WEB项目文件结构； b.熟悉DIV＋CSS网页的写法； c.熟悉JavaScript 事件在页面中的运用。 1．Html部分采用form的形式编写。 2．Css部分参考上图，但是不限于上图，可以发挥自己的想象，例如加背景图，对上图的展现形式做优化等等。 3．注册按钮点击后，出来弹出框，弹出框信息为注册成功或者注册失败（注册失败以后，点击弹出框的确定按钮，对应提示框有相应信息，参考第4点）。 4．Js部分需要考虑用户名不能为空，用户名长度4-16个字符，用户名只能由大小写字母、下划线、数字0-9组成。密码不能为空，密码长度4-16个字符。确认密码不能为空并且需要判断与上面的密码是否一致。邮箱不能为空，必须包含@符号、必须包含.符号、@和.符号不能在一起、@符号必须在.之前。如果出现上述问题，点击注册按钮后必须出现相应提示信息。例如，下面提示用户名不能为空。
【Web前端笔记-基础】第十三课，Javascript的DOM和BOM基础部分
嘿嘿嘿的博客
11-21 283
一：基础概念 Web APIs 是W3C组织的标准。 Web APIs 我们主要学DOM和BOM的部分 Web APIs 是JS所独有的 主要学习页面交互的功能 需要使用JS基础部分作基础 二：API和Web API API：是指应用程序编程接口，是一些预定义的函数，目的是提供应用程序与开发人员于某软件或硬件得以访问一组历程的能力，而又无需访问源码或理解内部工作机制的细节。 Web ...
WEB前端基础（HTML+CSS+JavaScript）（中）之JavaScript基础语法BOM
马云
06-25 2816
JavaScript语法BOM部分 浏览器对象模型： 用于管理浏览器窗口及与浏览器出口之间通信功能 一、Window对象 表示运行HTML页面的浏览器窗口 该对象既是允许JavaScript逻辑访问浏览器窗口的唯一对象，也是ECMAScript规范中的Global全局对象 window对象是浏览器窗口中的顶级（全局）对象 window对象的属性和方法在调用时 - 允许省略‘window 其他五个BOM对象都是作为window对象的属性出现 1、浏览器窗口的宽高 innerWidth属性 inn
Web - DOM
weixin_34161032的博客
11-02 163
1. 简介 DOM（Document Object Mode）是一套web标准，地那一了访问HTML文档的一套属性、方法和事件 其本质： 　　网页 与 脚本语言 沟通的桥梁 　　脚本语言通过DOM对象来访问HTML页面，从而改变文档的结构、样式和内容。 　　当浏览器载入HTML文档时，他就会称谓document对象树。 2. DOM对象 （1）文档对象：整个HTML文档 （2...
frontEnd-Interview:前端知识点总结，持续更新
05-24
【前端知识点总结】 在前端开发领域，JavaScript 是不可或缺的核心技术，它为网页提供了动态交互的能力。随着Web技术的发展，前端开发者需要掌握的知识点也日益丰富。"frontEnd-Interview"项目是一个持续更新的前端...
适用于Web开发人员JavaScript：:closed_book:对《 JavaScript高级程序设计》第三版的阅读，整理，理解，总结，总结，延伸而记录的学习笔记
01-30
JavaScript是Web开发中的核心语言，尤其对于前端开发者来说至关重要。《JavaScript高级程序设计》第三版是一本详尽的JavaScript教程，涵盖了从基础到高级的众多主题。以下是对这本书的阅读笔记和相关知识点的综合...
web+笔试+面试汇总+前端优化总结+js+css
12-05
在IT领域，特别是前端开发，面试和学习的过程中，掌握核心知识点是至关重要的。"web+笔试+面试汇总+前端优化总结+js+css"的主题涵盖了前端开发中的关键领域，包括ECMAScript语法、HTML表格与表单处理、浏览器对象...
2021 前端面试笔试题及答案.pdf
12-14
* Web前端开发技术，如HTML、CSS、JavaScript、DOM、BOM等。 * 前端开发框架和库，如React、Angular、Vue.js等。 本文档涵盖了前端面试笔试题及答案的多个知识点，帮助读者快速了解前端开发的基本概念和技术。
2013年腾讯实习招聘web前端三轮面试过程总结
08-26
【腾讯2013年实习招聘Web前端面试总结】 面试是技术人才进入公司的关键环节，尤其是在竞争激烈的IT行业，如腾讯这样的巨头企业。面试过程通常包括技术面、业务面以及HR面，旨在全面评估候选人的专业技能、逻辑思维...
day 02xml解析
h496950806的专栏
03-02 659
JAXP DOM 解析 JAXP SAX 解析 XML PULL 进行 STAX 解析 XML 技术主要企业应用 1、存储和传输数据 2、作为框架的配置文件 使用xml 存储和传输数据 1、通过程序生成xml 2、读取xml 中数据 ---- xml 解析 什么是DOM和SAX ？ DOM Document Object Model ----- 文档对象模型 DOM思想：
web前端DOM
weixin_43887184的博客
04-17 1177
1.2.1 什么是DOM ​ 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 ​ W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 1.2.2. ...
Web基础 ( 十 ) DOM
最新发布
yuanchun的知识整理
05-30 869
这是一个文本域""这是一个文本域
Web第四课(DOM)
qq_42123832的博客
07-28 147
1. DOM简介 DOM document object model(文档对象模型) 在网页中一切皆对象，javascript可以获取这些对象并且操作它们。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
web.dom介绍及其应用.网址
尹烁的博客
05-28 282
http://www.w3school.com.cn/htmldom/dom_methods.asp
Web基础(从零开始)——DOM简介（获取元素的四种方法）
qq_57633498的博客
12-04 1281
文档对象模型（简称DOM）：是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。 DOM树： 1.文档：一个页面就是一个文档，DOM中使用document表示； 2.元素：页面中的所有标签都是元素，DOM中使用element表示； 3.节点：页面中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示； DOM把以上内容都看做是对象。 获取元素 1.根据ID获取 var element=document.getElementById(ID); eleme
WEB入门之十六 操作DOM节点
张晨光老师的播客
02-26 3546
学习内容jQuery插入DOM节点jQuery删除DOM节点jQuery替换DOM节点jQuery筛选DOM节点能力目标能熟练使用jQuery进行节点操作能熟练使用jQuery进行节点筛选本章简介DOM是Document Object Model的缩写，即文档对象模型，它是W3C的标准规范，提供了使用JavaScript操纵页面元素的接口。节点是DOM中最基本的组成单位，每个标签、每
html dom阮一峰,Web Components
weixin_29608135的博客
06-18 216
Shadow DOM所谓 Shadow DOM 指的是，浏览器将模板、样式表、属性、JavaScript 码等，封装成一个独立的 DOM 元素。外部的设置无法影响到其内部，而内部的设置也不会影响到外部，与浏览器处理原生网页元素(比如元素)的方式很像。Shadow DOM 最大的好处有两个，一是可以向用户隐藏细节，直接提供组件，二是可以封装内部样式表，不会影响到外部。Custom Element 内...
web前端入门到实战：html DOM简介
软件开发-前端开发-IT
09-16 447
一　　 DOM是什么 DOM是HTML和XML文档的编程接口。它不同于把html源码在浏览器窗口当做页面或使用文本编辑器当做纯文本展示，它是对文档的另一种结构化的表述。DOM把文档的所有节点都解析为一个对象，并提供了一些属性和方法来描述它们。 DOM是W3C的标准。它被分为3个部分： 核心DOM：针对任何结构化文档的标准模型 XML DOM：针对XML文档的标准模型 HTML DOM：针对HTM...
2023年web前端开发知识点总结.doc
11-07
首先，2023年web前端开发知识点总结.doc记录了当前web前端开发领域的最新知识点和技术趋势。在这份文档中，涵盖了HTML、CSS、JavaScript以及其他相关的技术，对于正在学习或从事web前端开发的人员来说，是一份很好的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Le`soleil

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值