目录
前言
当我们学完前面的javascript基础之后,我们就需要来接触一下web APIs了,什么是APIs?web APIs又是什么?DOM是做什么用的?我将会把我学会的知识一点点的分享给大家了解,让我一起来体验web APIs的魅力。
一、API和web APIs
我们来看看关于API和webAPIs的知识吧:
- API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
- 简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。
- Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。现阶段我们主要针对于浏览器讲解常用的 API , 主要针对浏览器做交互效果。比如我们想要浏览器弹出一个警示框, 直接使用 alert(‘弹出’)。因为 Web API 很多,所以我们将这个阶段称为 Web APIs
- API 是为我们程序员提供的一个接口,帮助我们实现某种功能,我们会使用就可以了,不必纠结内部如何实现
- Web API 主要是针对于浏览器提供的接口,主要针对于浏览器做交互效果。
- Web API 一般都有输入和输出(函数的传参和返回值),Web API 很多都是方法(函数)
- 学习 Web API 可以结合前面学习内置对象方法的思路学习
二、DOM
什么是DOM?DOM就是文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM可以看做一颗DOM树,树上分支了很多的节点。我们用图片来理解一下这个DOM树结构:
三、事件的基础
我们学习的JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如:我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。接下来让我们来了解事件的内容:
1.事件三要素
事件的内容可以通过三个过程来总结:
- 事件源(谁)
- 事件类型 (什么事情)
- 事件处理程序 (做啥)
事件在执行的时候它的步骤是:
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
四、元素的获取
学会了事件的基础,我们知道,我们要操作事件,首先需要获取这个事件源。因此,我们来学习如何使用DOM的操作获取页面中的元素,修改元素等等的知识。DOM在我们实际开发中主要用来操作元素。我们如何来获取页面中的元素呢?获取页面中的元素可以使用以下几种方式:
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
1. 根据ID获取
使用 getElementById() 方法可以获取带有 ID 的元素对象。
eg:
document.getElementById('id');
使用 console.dir() 可以打印我们获取的元素对象,更好的查看对象里面的属性和方法。
2.根据标签名获取
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。还可以获取某个元素(父元素)内部所有指定标签名的子元素
eg:
document.getElementsByTagName('标签名')
注意:
- 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
- 得到元素对象是动态的
- 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)
- 父元素必须是单个对象(必须指明是哪一个元素对象). 获取的时候不包括父元素自己。
3.通过HTML5新增的方法获取
- document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集合
- document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
- document.querySelectorAll('选择器'); // 根据指定选择器返回
注意:
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');
4. 获取特殊元素(body,html)
获取body元素:
document.body //返回body元素对象获取html元素:
document.documentElement //返回html元素对象
五、操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性。
1.改变元素内容
eg:
element.innerText
从起始位置到终止位置的内容, 但它去除 html 标签, 同时空格和换行也会去掉
eg:
element.innerHTML
起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行
2. 常用元素的属性操作
- innerText、innerHTML 改变元素内容
- src、href
- id、alt、title
3.表单元素的属性操作
利用 DOM 可以操作如下表单元素的属性:
- type
- value
- checked
- selected
- disabled
4.样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。
- element.style 行内样式操作
- element.className 类名样式操作
注意:
- JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
- JS 修改 style 样式操作,产生的是行内样式,CSS 权重比较高
5.自定义属性的操作
自定义属性可以直接自己定义存在或者不存在的属性,方便程序员进行其他的属性的存储设置等操作。
分成三个操作:获取属性值、设置属性值、移除属性值
获取属性值:
element.属性 获取属性值。
element.getAttribute('属性');
区别:
element.属性 获取内置属性值(元素本身自带的属性)
element.getAttribute(‘属性’); 主要获得自定义的属性 (标准) 我们程序员自定义的属性
设置属性值:
element.属性 = ‘值’ 设置内置属性值。
element.setAttribute('属性', '值');
区别:
element.属性 设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性 (标准)
移除属性值
element.removeAttribute('属性');
6.HTML5自定义属性
自定义属性目的,是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性。
H5规定自定义属性data-开头做为属性名并且赋值。
比如 <div data-index=“1”></div>
或者使用 JS 设置
element.setAttribute(‘data-index’, 2)
- 兼容性获取 element.getAttribute(‘data-index’);
- H5新增 element.dataset.index 或者 element.dataset[‘index’] ie 11才开始支持
- 如果名字过长,新增的获取需要使用驼峰命名法,如:element.dataset.indexName 或者 element.dataset['indexName']
六、节点操作
获取元素通常使用两种方式:
1. 利用 DOM 提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector 等
逻辑性不强、繁琐
2. 利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强, 但是兼容性稍差
这两种方式都可以获取元素节点,我们后面都会使用,但是节点操作更简单。
1.节点概念
网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有 HTML 元素(节点)均可被修改,也可以创建或删除。
一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
我们在实际开发中,节点操作主要操作的是元素节点。
利用 DOM 树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。接下来就来看看这些关系。
2.父级结点
node.parentNode
- parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
- 如果指定的节点没有父节点则返回 null
3. 子节点
parentNode.childNodes(标准)
parentNode.childNodes 返回包含指定节点的子节点的集合,该集合为即时更新的集合。
注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。
如果只想要获得里面的元素节点,则需要专门处理。 所以我们一般不提倡使用childNodes
var ul = document. querySelector(‘ul’);
for(var i = 0; i < ul.childNodes.length;i++) {
if (ul.childNodes[i].nodeType == 1) {
// ul.childNodes[i] 是元素节点
console.log(ul.childNodes[i]);
}
}
parentNode.children(非标准)
parentNode.children 是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回 (这个是我们重点掌握的)。
虽然children 是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用
除了标准和非标准,还有第一个和最后一个子节点的操作。
- parentNode.firstChild:firstChild 返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。
- parentNode.lastChild:lastChild 返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点。
- parentNode.firstElementChild:firstElementChild 返回第一个子元素节点,找不到则返回null。
- parentNode.lastElementChild:lastElementChild 返回最后一个子元素节点,找不到则返回null。
实际开发中,firstChild 和 lastChild 包含其他节点,操作不方便,而 firstElementChild 和
lastElementChild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?
解决方案:
1. 如果想要第一个子元素节点,可以使用 parentNode.chilren[0]
2. 如果想要最后一个子元素节点,可以使用 parentNode.chilren[parentNode.chilren.length - 1]
4.兄弟节点
- node.nextSibling:nextSibling 返回当前元素的下一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
- node.previousSibling:previousSibling 返回当前元素上一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。
- node.nextElementSibling:nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null。
- node.previousElementSibling:previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null。
同样,兄弟节点使用的时候存在兼容性问题,那么怎么解决兼容性问题呢?
答:自己封装一个兼容性的函数
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
5.操作节点
我们可以对节点的操作有:创建节点、添加节点、删除节点、复制节点,我们分别来看看吧。
创建节点
document.createElement('tagName')
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在,
是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。
添加节点
- node.appendChild(child):node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的after 伪元素。
- node.insertBefore(child, 指定元素):node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的before 伪元素。
删除节点
node.removeChild(child)
node.removeChild() 方法从 DOM 中删除一个子节点,返回删除的节点。
复制节点
node.cloneNode()
node.cloneNode() 方法返回调用该方法的节点的一个副本。 也称为克隆节点/拷贝节点
注意:
- 如果括号参数为空或者为 false ,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。
- 如果括号参数为 true ,则是深度拷贝,会复制节点本身以及里面所有的子节点。
6.区别
- document.write()
- element.innerHTML
- document.createElement()
区别
- document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘
- innerHTML 是将内容写入某个 DOM 节点,不会导致页面全部重绘
- innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂
- createElement() 创建多个元素效率稍低一点点,但是结构更清晰
总结:不同浏览器下,innerHTML 效率要比 creatElement高
总结
dom里面最重要的就是如何去获取元素,以及如何对元素和节点操作,这两点掌握好了,对这些元素的操作就会越来越熟练。谢谢大家的观看。