JavaScript Web API BOM DOM

最新推荐文章于 2022-11-20 17:45:51 发布

hpkerkabutojoker

最新推荐文章于 2022-11-20 17:45:51 发布

阅读量196

点赞数

分类专栏：实习文章标签： JavaScript BOM DOM

本文链接：https://blog.csdn.net/hpkerkabutojoker/article/details/102704816

版权

实习专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Web API BOM DOM

Web API介绍

API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

任何开发语言都有自己的API
API的特征输入和输出(I/O)
API的使用方法(console.log(‘adf’))

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

掌握常见浏览器提供的API的调用方式

JavaScript的组成

在这里插入图片描述

ECMAScript - JavaScript的核心 es5 es6

定义了JavaScript 的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型 brower Object Model

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

DOM的概念

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言(html)标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本，更新其内容、结构,DOM(是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

DOM又称为文档树模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwdPXkC5-1571820265731)(media/1497154623955.png)]

文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签的属性

DOM经常进行的操作

获取元素
对元素进行操作(设置其属性或调用其方法)
动态创建元素
事件(什么时机做相应的操作)

获取页面元素

为什么要获取页面元素

例如：我们要页面元素隐藏/显示，需要现获取对应的元素，才能进行后续操作

根据id获取元素

var div = document.getElementById("id2");

当id重名的时候，会获取第一个，id有唯一性的

根据标签名获取元素

//标签名获取元素
		var div = document.getElementsByTagName("div")[5];
		alert(div);

根据name获取元素*

// 通过name来获取
		var names = document.getElementsByName('n');
		for (var i = 0; i < names.length; i++) {
			alert(names[i]);
		}
		alert(names);

根据类名获取元素*

// 通过类名
		var mains = document.getElementsByClassName("main");
		alert(mains);

根据选择器获取元素*

// 根据选择器获取元素
		var id1 = document.querySelector('#id1');
		alert(id1);
		var mains = document.querySelectorAll('.main');
		alert(mains);

事件

事件：触发-响应机制

事件三要素

事件源:触发(被)事件的元素
事件名称: click 点击事件
事件处理程序(回调函数):事件触发后要执行的代码(函数形式)

事件的基本使用

<script type="text/javascript">
		var box = document.getElementById('box');
		box.onclick = function() {
			alert(1);
		}
	</script>

案例

点击按钮切换图片

<body>
	<input type="button" id="btn" value="切换">
	<br />
	<img src="../1.jpg" id="img1">

	<script type="text/javascript">
		//1.获取元素
		var btn = document.getElementById('btn');
		var img1 = document.getElementById('img1');
		var flag = 1; //当flag为1时，对应第一张图片，2 ，对应第二张
		//2.给按钮注册事件
		btn.onclick = function() {
			//3.切换图片
			if(flag == 1) {
				img1.src = '../456.png';
				flag = 2;
			} else if (flag == 2) {
				img1.src = '../1.jpg';
				flag = 1;
			}
		}
	</script>
</body>

属性操作

非表单元素的属性

href、title、id、src、className

var link = document.getElementById("link");
console.log(link.href);

案例：

点击按钮显示隐藏div

<body>
	<input type="button" id="btn" value="隐藏">
	<br>	
	<div id="box"></div>

	<script type="text/javascript">
		//获取元素
		var btn = document.getElementById('btn');
		var flag = 1;//1表示显示  0表示隐藏
		//绑定事件
		btn.onclick = function() {
			//获取div
			var box = document.getElementById('box');
			if (flag) {
				box.className = 'hidden';
				//class为什么用className，因为在js中 class是一个关键字
				//btn.value = '显示';
				this.value = '显示';
				flag = 0;

			} else if (flag == 0) {
				box.className = "show";
				this.value = "隐藏";
				flag = 1;
			}
		}
	</script>
</body>

innerHTML和innerText

<script type="text/javascript">
		var box = document.getElementById('box');
		/*box.innerHTML = '111<p>我是段落标签</p>';
		console.log(box.innerHTML);*/
		box.innerText = '<p>我还是段落标签</p>';
		console.log(box.innerText);
	</script>

HTML转义符

"		&quot;
'		&apos;
&		&amp;
<		&lt;   // less than  小于
>		&gt;   // greater than  大于
空格	   &nbsp;
©		&copy;

表单元素属性

value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性

案例

给文本框赋值，获取文本框的值

<body>
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="button" value="取值" id="btn">

	<script>
		//1.当页面加载完之后，给文本框赋值
		var inputs = document.getElementsByTagName('input');
		for (var i = 0; i < inputs.length; i++) {
			if (inputs[i].type == "text"){
				inputs[i].value = i;
			}
		}

		//2.当点击按钮时，获取所有文本框的值，并且用,分割
		var btn = document.getElementById('btn');
		btn.onclick = function() {
			var arr = [];
			for (var i = 0; i < inputs.length; i++) {
				var input = inputs[i];
				//判断是否为文本框
				if (input.type == 'text') {
					arr.push(input.value);
				}
			}
			console.log(arr.join(','));
		}


	</script>
</body>

自定义属性操作

getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

使用style方式设置的样式显示在标签行内

类名操作

修改标签的className属性相当于直接修改标签的类名

案例

图片切换二维码案例

<body>
	<div class="nodeSmall" id="node_small">
		<div class="erweima hide" id="er" >
			<img src="../456.png">
		</div>
	</div>

	<script type="text/javascript">
		//鼠标移入 onmouseover
		//鼠标移出 onmouseout

		//获取元素
		var nodeSmall = document.getElementById('node_small');
		var er = document.getElementById('er');
		nodeSmall.onmouseover = function() {
			//nodeSmall.clasName = 'hidden';
			er.className = er.className.replace('hide','show');
		}

		nodeSmall.onmouseout = function() {
			er.className = er.className.replace('show', 'hide');
		}
	</script>
</body>

创建元素的三种方式

document.write()

document.write('新设置的内容<p>标签也可以生成</p>');

innerHTML

var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';

document.createElement()

var div = document.createElement('div');
document.body.appendChild(div);

节点操作

节点属性

模拟文档树结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KZiB5CPK-1571820265732)(media/1497165666684.png)]

事件详解

注册/移除事件的三种方式

var box = document.getElementById('box');
box.onclick = function () {
  console.log('点击后执行');
};
box.onclick = null;

box.addEventListener('click', eventCode, false);
box.removeEventListener('click', eventCode, false);

box.attachEvent('onclick', eventCode);
box.detachEvent('onclick', eventCode);

function eventCode() {
  console.log('点击后执行');
}

案例

跟着鼠标飞的天使

<body>
	<img src="../timg.gif" id="ts">

	<script type="text/javascript">
		var ts = document.getElementById('ts');
		//mousemove  监听鼠标的移动
		document.onmousemove = function(e) {
			//兼容性操作
			e = e || window.event;

			// ts.style.left = '10px';
			// ts.style.left = e.clientX -10 + 'px';
			// ts.style.top = e.clientY -10 + 'px';
			ts.style.left = e.pageX -10 + 'px';
			ts.style.top = e.pageY -10 + 'px';
		}
	</script>
</body>

常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发

ousemove = function(e) {
//兼容性操作
e = e || window.event;

		// ts.style.left = '10px';
		// ts.style.left = e.clientX -10 + 'px';
		// ts.style.top = e.clientY -10 + 'px';
		ts.style.left = e.pageX -10 + 'px';
		ts.style.top = e.pageY -10 + 'px';
	}
</script>

```

常用的鼠标和键盘事件

onmouseup 鼠标按键放开时触发
onmousedown 鼠标按键按下触发
onmousemove 鼠标移动触发
onkeyup 键盘按键按下触发
onkeydown 键盘按键抬起触发

hpkerkabutojoker

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript Web API BOM DOM

Web API BOM DOMWeb API介绍API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console....
复制链接

扫一扫