【Web前端笔记-基础】第十三课，Javascript的DOM和BOM基础部分

最新推荐文章于 2023-12-02 20:50:54 发布

原创

最新推荐文章于 2023-12-02 20:50:54 发布 · 368 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#APIs #DOM #BOM #密码框验证 #事件处理

一：基础概念

Web APIs 是W3C组织的标准。
Web APIs 我们主要学DOM和BOM的部分
Web APIs 是JS所独有的
主要学习页面交互的功能
需要使用JS基础部分作基础

二：API和Web API

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

Web API：是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。

三：DOM导读

1.什么是DOM？

文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML和XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

2.DOM树（文档对象模型）

文档：一个页面就是一个文档，DOM使用document表示的
元素：页面中的所有标签都是元素，DOM中用element表示
节点：网页中所有内容都是节点，（标签，属性，文本，注释），用node表示。
DOM把以上所有内容都看作是对象。

四：获取元素

DOM在实际开发中用来操作元素，那如何操作呢？有以下几种方法：

根据ID来获取

document.getElementById(id);

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过ID获取元素</title>
	</head>
	<body>
		<p id="pa">我是hahaha</p>
		
		<script>
		var pa=document.getElementById('pa');
		console.log(pa);
		//打印返回元素对象，有利于更好地查看里面的内容
		console.dir(pa);
		</script>
	</body>
</html>

效果：

根据标签名来获取

getElementByTagName('li');返回指定标签对象的合集

以伪数组的形式存储，即使只有一个li，返回的也是伪数组。

想要依次获取里面的内容，要进行遍历，得到的元素对象是动态的，如果页面中根本没有li元素，则返回空的个数为0的伪数组，里面的内容是undefined。

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过标签名获取元素</title>
	</head>
	<body>
		<ul>
		<li>我想要怒放的生命</li>
		<li>我想要怒放的生命</li>
		<li>我想要怒放的生命</li>
		<li>我想要怒放的生命</li>
		</ul>
		
		<script type="text/javascript">
			var lis=document.getElementsByTagName('li');
			console.log(lis);
		</script>
	</body>
</html>

效果：