文章目录
前言
Web APIs阶段主要用来做页面交互功能
一、API 和 Web API
API
API (应用程序编程接口) 是一些预先定义的函数, 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力
简单来说就是给程序员提供的一种工具, 以便能更轻松的实现想要完成的功能.
Web API
Web API 是浏览器 提供的一套操作浏览器功能和页面元素的API
主要针对于浏览器做交互效果.
Web API很多都是方法 (函数)
二、DOM
文档对象模型, 简称 DOM. 是W3C组织推荐的额处理可扩展标记语言的标准 编程接口
通过这些DOM接口, 可以改变网页的内容, 结构 和 样式.
DOM 树
- 文档 : 一个页面就是一个文档. DOM 中用 document 表示.
- 元素 : 页面中的所有标签都是元素, DOM中用 element表示.
- 节点 : 网页中的所有内容都是节点 ( 标签, 属性, 文本, 注释等. ) DOM中用 node 表示.
DOM把以上内容都看做是对象.
三、获取元素
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
1. 根据 ID 获取
使用 getElementById() 方法可以获取带有 ID 的元素对象.
语法
var element = document.getElementById(id);
- 如果当前文档中拥有特定ID的元素不存在则返回null.
- id是大小写敏感的字符串,代表了所要查找的元素的唯一ID.
返回值
返回一个匹配到ID 的 DOM Element 对象, 若在当前 Document下没有找到, 则返回 null.
<body>
<div id="time">2019-9-9</div>
<script>
// 因为我们文档页面是从上往下加载,得先有标签,所以script需要写到标签下面
var timer = document.getElementById('time');
console.log(timer);
// 打印我们返回的元素对象.可以查看里面的属性
console.dir(timer);
</script>
</body>
console.dir()
: 打印我们返回的元素对象.可以查看里面的属性和方法
2. 根据 标签名 获取
- getElementsByTagName() : 获取某类标签元素. 可以返回带有指定标签名的对象的集合.
<body>
<ul>
<li>离离原上草</li>
<li>一岁一枯荣</li>
<li>野火烧不尽</li>
<li>春风吹又生</li>
</ul>
<script>
var elements = document.getElementsByTagName('li');
console.log(elements); // HTMLCollection(4) [li, li, li, li]
</script>
</body>
返回值
返回值是一个由发现的元素出现在树中的顺序构成的动态的HTML集合
以伪数组的形式存储的.
如果页面中只有一个li , 返回的还是伪数组的形式
如果页面中没有这个元素. 返回的是空的伪数组.
<script>
var elements = document.getElementsByTagName('li');
// 获取第一个元素.
console.log(elements[0]); // <li>离离原上草</li>
</script>
获取某个父元素内部所有指定标签名的子元素.
比如获取所有 ol 里面的 li
语法
父元素必须是单个对象,
element.getElementByTagName('标签名');
用法
获取 ol 里面的 li
<body>
<ul>
<li>离离原上草</li>
<li>一岁一枯荣</li>
<li>野火烧不尽</li>
<li>春风吹又生</li>
</ul>
<ol>
<li>ol里面的li</li>
<li>ol里面的li</li>
<li>ol里面的li</li>
<li>ol里面的li</li>
<li>ol里面的li</li>
</ol>
<script>
var ol = document.getElementsByTagName('ol');
// 父元素必须是单个对象.
var lis = ol[0].getElementsByTagName('li');
console.log(lis);
</script>
</body>
四、通过HTML5新增的方法获取
1. 通过类名获取
根据类名返回元素对象集合.
语法 :
document.getElementByClassName('类名');
2. 根据指定选择器返回第一个元素对象
语法
document.querySelector('选择器');
使用
<body>
<div class="box">盒子</div>
<script>
var firstBox = document.querySelector('.box');
console.log(firstBox);
</script>
</body>
3. 根据指定选择器返回
语法
document.querySelectorAll('选择器')
返回指定选择器的所有元素对象集合
五、获取特殊元素
获取body元素
<body>
<script>
var bod = document.body;
console.log(bod);
</script>
</body>
获取html元素
<body>
<script>
var htm = document.documentElement;
console.log(htm);
</script>
</body>