初学WebAPI

最新推荐文章于 2024-07-25 14:02:05 发布

one happy boy

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量190

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Thousandscity/article/details/108861192

版权

JSWebAPI初学

WebAPI介绍

在说WebAPI之前我们先了解一下API。

API的概念

API是应用程序编程接口的英文简称，是一段或几段预先定义好的函数，方便应用程序和开发人员更简单的调用。那么我们接下来了解一下WebAPI。

WebAPI的概念

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

API和WebAPI总结

API是我们程序员提供的一个接口，方便实现某种功能。
WebAPI主要是针对于浏览器提供的借口，用于浏览器的交互等。一般都有函数的传参和返回值。

DOM介绍

DOM是文档对象模型的英文简写，是W3C组织推荐的处理可扩展标记语言的标准编程接口。

DOM是W3C组织制定的一套处理html和xml的文档规范，所有的浏览器都遵循了这套标准。

DOM树

在这里插入图片描述
DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，然后把结果返回当前页面。

DOM把以上内容看做是对象。

获取元素

我们想要操作页面上的某部分进行某些改变，就得先获取到对应部分的元素，在对获取到的元素进行操作。

根据ID获取

document.gentElementById(id)
参数是id值，是区分大小写的字符串
返回值为元素对象或者null

案例代码

<body>
	<div id="time">2020-09-09</div>
	<script>
	var timer = document.gentElementById('time');
	console.log(timer);
	console.log(typeof timer);
	console.dir(timer);
	</script>
</body>

根据标签名获取

语法:document.getElementsByTagName(‘标签名’) 或者 element.getElementsByTagName(‘标
签名’)
参数：标签名
返回值：元素对象集合

案例代码

<body>
	<ul>
		<li>寻龙分金看缠山</li>
		<li>一重缠是一重关</li>
		<li>身陷重关八重险</li>
		<li>八字不硬莫近前</li>
		<li>寻龙分山口诀令</li>
	</ul>
	<ul id="nav">
		<li>生僻字</li>
		<li>中国字</li>
		<li>成语啊</li>
		<li>小短语</li>
		<li>诗词啊</li>
	</ul>
	<script>
		var lis = document.getElementsByTagName('li');
		console.log(lis);
		console.log(lis[0]);
		for (var i = 0; i < lis.length; i++) {
		console.log(lis[i]);
		}
		var nav = document.getElementById('nav'); 
		var navLis = nav.getElementsByTagName('li');
		console.log(navLis);
	</script>
</body>

HTML5新增获取元素方式

1.document.getElementsByClassName(“类名”);
2.document.querySelector(“选择器”);
3.document.querySelectorAll(“选择器”);

案例代码

<body>
	<div class="box">盒子1</div>
	<div class="box">盒子2</div>
	<div id="nav">
		<ul>
			<li>首页</li>
			<li>产品</li>
		</ul>
	</div>
	<script>	
		var boxs = document.getElementsByClassName('box');
		console.log(boxs);
		.box #nav
		var firstBox = document.querySelector('.box');
		console.log(firstBox);
		var nav = document.querySelector('#nav');
		console.log(nav);
		var li = document.querySelector('li');
		console.log(li);
		
		var allBox = document.querySelectorAll('.box');
		console.log(allBox);
		var lis = document.querySelectorAll('li');
		console.log(lis);
	</script>
</body>

获取特殊元素

获取body元素

document.body

获取html元素

document.documentElement

one happy boy

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
初学WebAPI

JSWebAPI初学WebAPI介绍API的概念WebAPI的概念API和WebAPI总结DOM介绍DOM树获取元素根据ID获取根据标签名获取HTML5新增获取元素方式获取特殊元素WebAPI介绍在说WebAPI之前我们先了解一下API。API的概念API是应用程序编程接口的英文简称，是一段或几段预先定义好的函数，方便应用程序和开发人员更简单的调用。那么我们接下来了解一下WebAPI。WebAPI的概念WebAPI是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。API和W
复制链接

扫一扫