前端（day04）DOM、BOM、Api和内置对象

最新推荐文章于 2024-02-12 08:00:00 发布
翻译 最新推荐文章于 2024-02-12 08:00:00 发布 · 355 阅读 · 0
文章标签：

#前端

本文详细介绍了DOM（文档对象模型）和BOM（浏览器对象模型）的概念及其应用。DOM用于操作HTML和XML文档，包括获取元素、修改内容等；BOM则提供了与浏览器交互的方式，如窗口、地址栏的操作。此外，还探讨了事件处理、内置对象的应用以及简单的面向对象编程。

DOM：

概念：Document Object Model 文档对象模型，作用：操作标记性文档（目前学过的xml，html文档）在这里插入图片描述

Dom分类

  1. 核心Dom(ECMA规范的基本语法)

    核心Dom的api操作xml,html

  2. xml的Dom

    作用：操作xml文档的

  3. html的Dom

    作用：操作html文档的

  4. 总结：

    核心Dom, xml的Dom, html的Dom 大部分api都是通用的

Dom的api 在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 密码：<input type="password" name="psw"  /><br/>
		用户名：<input type="text" name="username" id="uname" class="s" /><br/>
		性别：<input type="radio" name="sex" class="s"  value="man"/>男
				<input type="radio" name="sex"  class="s" value="woman"/>女<br/>
				
		<script type="text/javascript">
			var username_tag=document.getElementById("uname");
			document.write(username_tag.name+"<hr/>"); 
			var input_tag=document.getElementsByTagName("input");
			document.write(input_tag.length+"<hr/>");
			var sex_objects=document.getElementsByName("sex");
			document.write(sex_objects);
			var classname=document.getElementsByClassName("s");
			document.write(classname);
		</script>
	</body>
</html>

Dom操作文本

获取文本：innerhtml

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1">
			我是小鸟
		</div>
		<script type="text/javascript">
			var div_tag=document.getElementById("d1");
			document.write(div_tag.innerHTML);
			div_tag.innerHTML="我是小老虎"
			document.write(div_tag.innerHTML);
		</script>
	</body>
</html>

事件

事件与事件源的绑定

方式一：直接绑定（直接在标签里面定义事件属性，绑定对应的js代码）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="普通按钮1" onclick="top1()"/>
		
		<script type="text/javascript">
			function top1(){
				console.log("11111");
			}
		</script>
	</body>
</html>

方式二：间接绑定（不在标签里面定义事件属性，在使用时在绑定）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">普通按钮2</button>
		<script type="text/javascript">
			var tags=document.getElementsByTagName("button");
			var singalTag=tags[0];
			singalTag.onclick=function(){
				console.log(2222);
			}
		</script>
	</body>
</html>

常用的事件：

onchange: 在内容改变时，触发该事件，常与select一起使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在下拉选择框里面直接绑定内容切换</title>
	</head>
	<body>
		<select onchange="changeContest()">
			<option value="">plase choose</option>
			<option value="">河南省</option>
			<option value="">河北省</option>
		</select>
		<script type="text/javascript">
			num=0;
			function changeContest(){
				console.log(num);
				num++;
			}
		</script>
	</body>
</html>

onload: 等html网页完全加载完毕后，才执行事件里面的js代码，所以把代码可以放在head里面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function t2(){
				var divTag=document.getElementById("p");
				var div_text=divTag.innerHTML;
				console.log(div_text);
			}
		</script>
	</head>
	<body onload="t2()">
		<div id="p">
			互相进步
		</div>
	</body>
</html>

BOM:

概念：

BOM : browser object module,浏览器对象模型(一系列对象,构成模型),操作浏览器的.

BOM里面包含的五个对象

window：表示窗口对象,同时也是bom的顶层对象(可以通过window对象获取其它四个bom对象)

location：表示地址栏对象,操作地址栏的地址(获取地址栏的地址或者改变地址栏的地址)

history：表示用户访问过的前后的历史记录,操作用户访问过的历史记录

screen：表示网页的屏幕带下,操作网页的大小(分辨率,比如1366*768)

navigator：表示浏览器对象, 获取浏览器的相关参数信息(比如:使用的是那个浏览器,版本号是多少)

在这里插入图片描述

 常用API：

window的open（）和close（）

<input type="button" value="开启一个新窗口" onclick="openW();"/>
     <input type="button" value="关闭一个新窗口" onclick="closeW();"/>
    
     <script>
        //1开启一个新窗口
        function openW(){
        	//wid： 表示新的窗口对象
        	window.open("http://www.baidu.com");
        }
        //2.关闭一个新窗口
        function closeW(){
        	//开谁，关闭谁
        	window.close();
        }
    </script>

location使用：location.href

<body>
		    <input type="button" value="获取窗口的地址" onclick="getPath();" />
			<input type="button" value="改变窗口的地址" onclick="changePath();" />
			<script type="text/javascript">
				//1.获取地址
				function getPath(){
					//var loc = window.location;
					//var path = loc.href;
					var path = location.href;
					document.write(path);
				}
				//2.改变地址
				function changePath(){
					//location.href="https://www.baidu.com";
					//location.href="index.html";
					location.href="http://127.0.0.1:8020/javascript_high1/index.html";
				}
				
			</script>
	</body>

练习：省市二级联动：

需求：点击省份数据，显示市区数据       

出现错误：option value=""时，应该把value=""去掉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省:<select id="p">
			<option>请选择</option>
			<option value="1">山西省</option>
			<option value="2">陕西省</option>
		</select>
		市:<select id="c">
			<option>请选择</option>
		</select>
		<script type="text/javascript">
			document.getElementById("p").onchange=function(){
				var province=this.value;
				var city=document.getElementById("c");
				if(province==1){
					var data="<option>请选择</option>"+
					"<option>太原</option>"+
					"<option>大同</option>";
					city.innerHTML=data;
				}else if(province==2){
					var data="<option>请选择</option>"+
					"<option>西安</option>"+
					"<option>安溪</option>";
					city.innerHTML=data;
				}
			}
		</script>
	</body>
</html>

常见的内置对象

Global全局对象

全局对象：javascript内置的对象（这个对象的名称是Global: 只有名称，没有”真人“）

特点: 调用方法时，全局对象省略不写

常用方法：

eval(): 计算 JavaScript 字符串，并把它作为脚本代码来执行。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a="document.write(1111)";
			eval(a);
		</script>
	</body>
</html>

isNaN():检查某个值是否是数字。不是数字返回false

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a=10;
			document.write(isNaN(a));
		</script>
	</body>
</html>

parseFloat():解析一个字符串并返回一个浮点数

parseInt():解析一个字符串并返回一个整数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var num="da101";
			document.write(typeof(num));
			document.write(num);
			var num1=parseInt(num);
			document.write(typeof(num1));
			document.write(num1);
		</script>
	</body>
</html>

Math对象

常用方法

floor();"地板方法"向下取整,比如: 5.9–>向下取整 5

ceil();"天花板方法"向上取整,比如:5.01–>向上取整6

round();四舍五入的方法

random();随机数,范围[0,1);包含0,不包含1，可以随机出小数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var n1=Math.random()*6;
			document.write(n1);
		</script>
	</body>
</html>

JSON对象

概念：JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。

特点：1.数据量小   2.比较直观

作用：在浏览器与服务器之间交换数据

对象的定义及遍历：

第一种：单个json对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var user={"id":1,"name":"jack"};
			document.write(user.id+":"+user.name)

		</script>
	</body>
</html>

第二种：json数组对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var user=[{"id":1,"name":"jack"},{"id":2,"name":"rose"},{"id":3,"name":"ship"},]
			for (var i = 0; i < user.length; i++) {
				var p=user[i];
				document.write(p.id+":"+p.name);
			}
		</script>
	</body>
</html>

复杂的json对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var user={"马牛逼":{"age":1,"sex":"nan"}};
			var casUser=user.马牛逼;
			var casUserId=user.马牛逼.age;
			document.write(casUserId);
		</script>
	</body>
</html>

JAVAScript面向对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			class Demo{
				//成员变量
				num=0;
				//构造器
				constructor(num){
					this.num=num;
				}
				//方法
				test(){
					document.write(this.num);
				}
			}
			//创建对象
			var demo=new Demo(1000);
			demo.test();
		</script>
	</body>
</html>

五八个
关注
前端_网页编程 WebAPI_01
←か淡定☆ ヾ 的博客
08-12 217
01 - Web API 1.1. Web API介绍 1.1.1 API的概念 API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，无需理解其内部工作机制细节，只需直接调用使用即可。 举例解释什么是API。 例如， ​ C语言中有一个函数 fopen()可以打开硬盘上的文件，这个函数对于我们来说，就是一个C语言提供的打开文件的工具。 ​ javascri
【04】 JavaScript基础-pink老师-2022/03
qq_44722174的博客
03-19 1786
配合食用: JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础 素材地址 前提须知: 这里内容主要为: JavaScript基础从变量的定义与使用、流程控制语句、数组、函数、构造函数、内置对象以及对象等. 由于.我不是计算机专业出身的,但也是学了c语言\python\java的基础课程,所以对于基本的 数据类型\运算符优先级\程序流程之类的基础知识,我这份笔记里是一笔带过的,只针对JavaScript本身特别的点,进行了区
JavaScript学习笔记（二），js内置对象，Dom操作和Bom操作
Java开发，人工智能，边缘计算，致力于掌握前沿技术
07-05 660
6、 js内置的对象 6.1 数组 <script type="text/javascript"> //声明出数组，并附上初始值 //var arr=[1,2,3]; var arr=new Array(); //js的长度可以变化，把4放入到数组里面。 arr.push(4); arr[1]=1; /*for(var i=0;i<arr.lengt...
JavaScript 的 BOM对象 与 DOM对象
chuli0327的博客
10-30 309
BOM对象 ：Brower Object Model 浏览器对象模型 1.作用 ： 用来执行浏览器的相关操作 eg ： 浏览器的地址，弹出消息 一般情况下 ，window代表了BOM对象 - - window 对象是JavaScript 的内置对象，使用window 对象调用方法时可以省略window不写 2.消息框 ...
javascript内置对象/js事件/DOM/BOM简介
m0_46487113的博客
07-27 271
文章目录javascript内置对象简介String/正则表达式(RegExp)Math对象Number对象Array对象BOM(Browser Object Model)概念window对象Location对象history对象DOM(Document Object Model)Document对象事件事件对象事件冒泡 javascript内置对象 简介 JavaScript 对象是拥有属性和方法的数据。 可以说 "JavaScript 对象是变量的容器"。 但是，我们通常认为 "JavaScript 对
内置对象 DOM BOM
逆天骚年的博客
08-26 392
var userName = prompt("请输入你的名字:");    document.write("你好!"+userName);          function confirmit()    {        if(confirm("你确认删除此文件吗?"))        {             document.testa.submit
04js基础 内置对象 DOM与BOM
好记性不如烂笔头
06-26 526
js的对话框： 1.警告框(alert)--出现一个提示信息 2.询问框(prompt)--返回输入的值 var username = prompt("请输入你的名字"); document.write("你好"+username); 3.确认框(confirm)--根据不同的选择，返回true/false js内置对象 1.this--指当前对象//即当前标签对象 2.for...
5、Web API-DAY5 Bom操作
m0_51394252的博客
06-25 315
以前我们页面写的数据一刷新页面就没有了，是不是？随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大，sessionStorage和localStorage约 5M 左右常见的使用场景：https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失。
黑马JavaScript核心操作BOM与DOM课程笔记1-DOM
weixin_42413901的博客
04-25 869
一、Web APIs 简介 此部分的目标：能够说出 Web APIs 阶段与 JavaScript 语法阶段的关联性； 能够说出什么是 API； 能够说出什么是 Web API. 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 2. API 和 Web API 2.1 API API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软
day01 -Web API介绍—DOM 介绍—获取元素—事件基础—操作元素—排他操作—自定义属性操作—节点操作—案例：动态生成表格—创建元素的三种方式（经典面试题）
小琳爱分享的博客
08-04 714
day01 -Web API介绍—DOM 介绍—获取元素—事件基础—操作元素—排他操作—自定义属性操作—节点操作—案例：动态生成表格—创建元素的三种方式（经典面试题）
DOM 对象和 BOM 对象
猫老板的豆
07-29 885
BOM对象 BOM（Browser Object Model）是指浏览器对象模型，可以对浏览器窗口进行访问和操作。 使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。 使 JavaScript 有能力与浏览器"对话"。 1. window对象 window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write
BOM对象与DOM对象
John_Wick___的博客
06-27 735
BOM对象与DOM对象 一、BOM的概念：浏览器对象模型(包括：地址栏、历史记录、 屏幕、滚动条，关闭。) *windows：为BOM的顶级对象 windows的5个子对象： 1、document：文档对象 2、history：历史记录对象 3、location：地址栏对象 4、screen：屏幕对
JavaScript BOM 概述与内置对象
shenzhongkang的博客
05-29 790
一、BOM概述BOM（Browser Object Model）即浏览器对象模型，是一套用来管理控制浏览器的规则。（1）BOM和DOM很像，都是一套管理抽象对象的规则。（2）BOM主要负责页面与页面之间的通讯。（3）BOM的核心对象是window对象，通常情况下说BOM一般都是说的window对象。（4）BOM因为是对浏览器进行管理的规则，因此并没有统一的标准。二、BOM与DOM的关系DOM通过d...
JavaScript学习：内置对象，DOM模型，BOM模型，事件编程
lilcur的博客
02-12 971
快速掌握JavaScript的中级知识
DOM和BOM的api有哪些？
luoxiaonuan_hi的博客
07-16 858
dom和bom
[前端学习笔记]JavaScript APIs(DOM和BOM)
酸奶的博客
01-17 861
一、Web API 1. API API(Application Programming Interface,应用程序编程接口)：是一些预定义的接口(如函数、HTTP接口)。目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而无需访问源码或理解内部工作机制的细节。 简单理解为：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
JavaScript-DOM和BOM对象
菜鸟心声：学的不仅是技术，更是梦想！
03-02 833
JavaScript-DOM和BOM对象学习目标JavaScript BOM对象Window 对象setInterval()clearInterval()setTimeout()clearTimeout()浏览器窗口的尺寸案例01：获取浏览器宽高显示器尺寸案例02：获取屏幕参数案例03：链接属性案例04：回到历史记录浏览器对象案例05：获取浏览器参数JavaScript DOM对象Document 对象Element对象案例06：切换class案例07：动态添加元素Event对象案例08：鼠标坐标 学习目标
总结js常用的dom操作（js的dom操作API）
Time_Flies_lei的博客
04-30 498
前言 很多同学用惯了jquery操作dom，让他们用js操作的时候，常常力不从心，本文总结了常用的js的dom操作方法，供大家翻阅！其实说起js操作dom，我很久很久之前有篇文章，jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法，但是不是很系统。不能说是API，今天来系统总结一下！ 节点查找API document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个； document.getElementsByClassNa
JS 9大内置对象和BOM/DOM外置对象总结
鸟人的博客
10-07 738
在js里，一切皆为或者皆可以被用作对象。可通过new一个对象或者直接以字面量形式创建变量（如var i=“aaa”)，所有变量都有对象的性质。注意：通过字面量创建的对象在调用属性和方法时会被对象包装器暂时包装成一个对象，具有对象的性质。如 var str="我不是一个真的对象"; alert(str.length); //str被暂时包装成一个String对象，可调用该对象的属性和方法 不过这并不意味着它就是一个对象了，typeof(i)的值为仍String。 而通过new的对象，如
JavaScript 高级（WebAPI/Dom Bom）
最新发布
09-12
### Web API 概述 Web API 是使用 JS 去操作 HTML 和浏览器的工具，主要分为 DOM（文档对象模型）和 BOM（浏览器对象模型）两类 [^2]。 ### DOM 相关知识 - **定义**：DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML 文档交互的 API，是浏览器提供的一套专门用来操作网页内容的功能 [^2]。 - **作用**：开发网页内容特效和实现用户交互 [^2]。 - **DOM 树**：将 HTML 文档以树状结构直观地表现出来，体现了标签与标签之间的关系 [^2]。 - **DOM 对象**：浏览器根据 HTML 标签生成的 JS 对象，所有的标签属性都可以在这个对象上面找到，修改这个对象的属性会自动映射到标签身上 [^2]。 - **核心思想**：把网页内容当做对象来处理 [^2]。 - **document 对象**：是 DOM 里提供的一个对象，它提供的属性和方法都是用来访问和操作网页内容的，例如 `document.write()` [^2]。 - **获取 DOM 元素的方法**： - 通过 id 获取元素：`document.getElementById('nav')` [^4]。 - 根据标签获取一类元素：`document.getElementsByTagName('div')` [^4]。 - 根据类名获取元素：`document.getElementsByClassName('w')` [^4]。 - **设置/修改 DOM 元素内容**：可以使用 `innerHTML`、`innerText` 等属性。例如以下代码实现点击按钮改变 `div` 里的文字内容 [^5]： ```javascript //当我们点击了按钮，div里面的文字会发生变化 //1.获取元素 var click = document.querySelector('button'); var div = document.querySelector('div'); //2.注册事件 click.onclick = function () { div.innerHTML = getData(); } function getData() { var data = new Date(); var year = data.getFullYear(); var month = data.getMonth() + 1; var dates = data.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = data.getDay(); return '今天是：' + year + '年' + month + '月' + dates + '日' + '\t' + arr[day]; } var p = document.querySelector('p'); p.innerHTML = getData(); ``` ### BOM 相关知识 - **定义**：BOM（浏览器对象模型）是与浏览器交互的 API [^1][^2]。 - **顶级对象 window**：是浏览器的顶级对象，当调用 `window` 下的属性和方法时，可以省略 `window` [^3]。 - **常用操作方法**： - **对话框**： - `alert()`：显示带有一段消息和一个确认按钮的警告框 [^3]。 - `prompt()`：显示可提示用户输入的对话框 [^3]。 - `confirm()`：显示带有一段消息以及确认按钮和取消按钮的对话框 [^3]。 - **页面加载事件**： - `window.onload`：当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行 [^3]。 - `window.onunload`：当用户退出页面时执行 [^3]。 - **浏览器尺寸**：可以通过以下代码获取浏览器的宽度和高度 [^3]： ```javascript var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值