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

最新推荐文章于 2022-07-16 14:38:52 发布
最新推荐文章于 2022-07-16 14:38:52 发布
阅读量227 收藏
点赞数
文章标签： 前端

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>

五八个
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DAY04_BOM和DOM（上）.md
11-03
DAY04_BOM和DOM（上）.md
前端学习——Web APIs (DOM+BOM)
weixin_57896572的博客
11-09 673
Pink老师，Web APIs学习笔记，包含BOM和DOM的基础知识。
04js基础 内置对象 DOM与BOM
好记性不如烂笔头
06-26 458
js的对话框： 1.警告框(alert)--出现一个提示信息 2.询问框(prompt)--返回输入的值 var username = prompt("请输入你的名字"); document.write("你好"+username); 3.确认框(confirm)--根据不同的选择，返回true/false js内置对象 1.this--指当前对象//即当前标签对象 2.for...
什么是 web API？ DOM和BOM
计算机小白学前端~
05-08 959
一、API和Web API API（Application Programming Interface ，应用程序API）:是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或者硬件得以访问一组例程的能力，二又无需访问源码，或理解内部工作机制的细节。 是给程序员提供的一种工具，以便能够更轻松的实现想要完成的功能。 Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM) 主要针对浏览器提供的借口，主要针对浏览器做交互效果。 二、什么是DOM DOM，
BOM对象以及常用的API
Maix_Y的博客
12-26 335
BOM(Browser Object Module)浏览器对象模型 BOM对象包括：Window、History、Navigator、Screen和Location Navigator navigator.userAgent是我们经常使用的属性，它可以返回客户端的代理值。用这个我们就可以判断当前用户使用的是pc端还是移动端，是什么浏览器。 Screen screen.availHeight/ava...
Javascript Bom概念及常用api
weixin_43026567的博客
03-18 323
BOM简介 JavaScript的实现包括以下3个部分： 1.核心（ECMAScript）：描述了JS的语法和基本对象。 2.文档对象模型 （DOM）：处理网页内容的方法和接口 3.浏览器对象模型（BOM）：与浏览器交互的方法和接口 BOM 是 Browser Object Model，浏览器对象模型,BOM提供了专门操作浏览器窗口或软件的API。BOM的核心是window，而window对象又具...
DAY04_BOM_DOM（上）.md
05-22
DAY04_BOM_DOM（上）.md
DAY09：BOM和DOM（上）.html
09-07
DAY09：BOM和DOM（上）
JavaScript操作DOM对象 Day05
01-08
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构！ 获取Dom节点：得到Dom节点 更新：更新Dom节点 添加：添加一个新的节点 删除：删除一个Dom节点 要操作一个Dom节点，就必须要先获得这个Dom节点。 1 ...
Web前端.DAY10-th对象.avi
05-17
Web前端.DAY10-th对象.avi
总结js常用的dom操作（js的dom操作API）
Time_Flies_lei的博客
04-30 407
前言 很多同学用惯了jquery操作dom，让他们用js操作的时候，常常力不从心，本文总结了常用的js的dom操作方法，供大家翻阅！其实说起js操作dom，我很久很久之前有篇文章，jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法，但是不是很系统。不能说是API，今天来系统总结一下！ 节点查找API document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个； document.getElementsByClassNa
JS 9大内置对象和BOM/DOM外置对象总结
鸟人的博客
10-07 610
在js里，一切皆为或者皆可以被用作对象。可通过new一个对象或者直接以字面量形式创建变量（如var i=“aaa”)，所有变量都有对象的性质。注意：通过字面量创建的对象在调用属性和方法时会被对象包装器暂时包装成一个对象，具有对象的性质。如 var str="我不是一个真的对象"; alert(str.length); //str被暂时包装成一个String对象，可调用该对象的属性和方法 不过这并不意味着它就是一个对象了，typeof(i)的值为仍String。 而通过new的对象，如
JavaScript学习笔记（二），js内置对象，Dom操作和Bom操作
Java开发，人工智能，边缘计算，致力于掌握前沿技术
07-05 567
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 概述与内置对象
shenzhongkang的博客
05-29 690
一、BOM概述BOM（Browser Object Model）即浏览器对象模型，是一套用来管理控制浏览器的规则。（1）BOM和DOM很像，都是一套管理抽象对象的规则。（2）BOM主要负责页面与页面之间的通讯。（3）BOM的核心对象是window对象，通常情况下说BOM一般都是说的window对象。（4）BOM因为是对浏览器进行管理的规则，因此并没有统一的标准。二、BOM与DOM的关系DOM通过d...
BOM对象与DOM对象
John_Wick___的博客
06-27 594
BOM对象与DOM对象 一、BOM的概念：浏览器对象模型(包括：地址栏、历史记录、 屏幕、滚动条，关闭。) *windows：为BOM的顶级对象 windows的5个子对象： 1、document：文档对象 2、history：历史记录对象 3、location：地址栏对象 4、screen：屏幕对
JavaScript 的 BOM对象 与 DOM对象
chuli0327的博客
10-30 217
BOM对象 ：Brower Object Model 浏览器对象模型 1.作用 ： 用来执行浏览器的相关操作 eg ： 浏览器的地址，弹出消息 一般情况下 ，window代表了BOM对象 - - window 对象是JavaScript 的内置对象，使用window 对象调用方法时可以省略window不写 2.消息框 ...
DOM 对象和 BOM 对象
猫老板的豆
07-29 661
BOM对象 BOM（Browser Object Model）是指浏览器对象模型，可以对浏览器窗口进行访问和操作。 使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。 使 JavaScript 有能力与浏览器"对话"。 1. window对象 window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write
内置对象 DOM BOM
逆天骚年的博客
08-26 331
var userName = prompt("请输入你的名字:");    document.write("你好!"+userName);          function confirmit()    {        if(confirm("你确认删除此文件吗?"))        {             document.testa.submit
DOM和BOM的api有哪些？
luoxiaonuan_hi的博客
07-16 714
dom和bom
前端日期对象转字符串
最新发布
05-25
可以使用 JavaScript 中的 Date 对象的 toLocaleDateString() 方法将日期对象转换为本地日期字符串。例如： ```javascript // 创建一个日期对象 var date = new Date(); // 将日期对象转换为本地字符串 var dateString = date.toLocaleDateString(); // 输出日期字符串 console.log(dateString); ``` 这将输出当前日期的本地字符串格式，例如：2021/4/27 。 如果需要自定义日期字符串格式，可以使用 JavaScript 中的字符串方法，例如： ```javascript // 创建一个日期对象 var date = new Date(); // 获取年、月、日 var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate(); // 拼接成自定义格式的日期字符串 var dateString = year + '-' + month + '-' + day; // 输出日期字符串 console.log(dateString); ``` 这将输出当前日期的自定义格式字符串，例如：2021-4-27 。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值