JS-Web APIs(一) 获得元素-事件-操作元素-节点操作

1.Web APIs 和JS基础关联性

1.1 JS组成
1.2 JS 基础阶段以及 Web APIs 阶段
- JS 基础学习 ECMAScript 基础语法为后面做铺垫
- Web APIs 是JS 的应用,大量使用JS基础语法做交互效果

2. API 和 Web API

2.1 API
- API 是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件的以访问一组程序的能力,而又无需访问源码,或理解内部工作机制的细节
- 简单理解:API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能
- 比如手机充电的接口
2.2 Web API
- Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
- 主要针对于浏览器讲解常用的API,主要浏览器做交互效果
- 比如,浏览器弹出一个警示框,直接使用alert
2.3 API 和 Web API 总结
- API 是为程序员提供的一个接口,帮助我们实现某种接口,我们会使用就行了,不必要纠结内部如何实现
- Web API 主要针对于浏览器提供的接口,主要针对浏览器做交互效果
- Web API 一般都有输入和输出(函数的传参和返回值),Web API 很多都是方法(函数)

3. DOM 简介

3.1 什么是DOM
- 文档对象模型,是W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口
- W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容,结构和样式
3.2 DOM 树
- 文档:一个页面就是一个文档,DOM中使用document 表示
- 元素:页面种的所有标签都是元素,DOM中使用element 表示
- 节点:网页中的所有内容都是节点(标签,属性,文本,注释等),DOM中使用 node 表示
- DOM 把以上内容都看作是对象

4.获取元素

4.1 如何获取页面元素
- DOM 在实际开发中主要用来操作元素
- 获取页面中的元素可以使用以下几种方式:
- 根据ID 获取
- 根据标签名获取
- 通过HTM5新增的方法获取
- 特殊元素获取
4.2 根据 ID 获取
- 因为文档页面从上往下加载,所以先得有标签,所以script写在标签下面
- get 获得 element 元素 by 通过驼峰命名法
- 参数 id 是大小写敏感得字符串
- 返回得是一个元素对象
- console.dir打印返回的对象,更好的查看里面的属性和方法
- var timer = document.getElementById('time');
4.3 根据标签名获取
- 使用getElementByTagName()方法可以返回带有指定标签名的对象的集合
- 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历
- 得到元素对象是动态的
4.4 通过HTML5 新增的方法获取
- document.getElementsByClassName('类名'); 根据类名返回元素对象集合
- document.querySelector('选择器');根据指定选择器返回第一个元素对象
- document.querySelectorAll('选择器');:根据指定选择器返回
4.5 获取特殊元素(body,html)
- 获取body元素
- document.body:返回body 元素对象
- 获取html 元素
- document.documentElement:返回html元素怒元素对象

5. 事件基础

5.1 事件概述
- JavaScript 使我们有能力创建动态页面,而事件是可以被JavaScript 侦测到的行为.
- 简单理解:触发—相应机制
- 网页中的每个元素都可以产生某些可以触发JavaScript 的事件
5.2 执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采取函数赋值形式)
5.3 常见的鼠标事件
- onclick 当用户点击某个对象时调用的事件句柄。
- oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
- ondblclick 当用户双击某个对象时调用的事件句柄。
- onmousedown 鼠标按钮被按下。
- onmouseenter 当鼠标指针移动到元素上时触发。
- onmouseleave 当鼠标指针移出元素时触发
- onmousemove 鼠标被移动。
- onmouseover 鼠标移到某元素之上。
- onmouseout 鼠标从某元素移开。
- onmouseup 鼠标按键被松开。

6.操作元素

JavaScript 的 DOM 操作可以改变网页内容,结构和样式,可以利用DOM操作元素来改变元素里面的内容,属性等
6.1 改变元素内容
- 从其实位置到终止位置的内容,但它会去除html 标签,同时空格和换行还会去掉
- element.innerText
- 起始位置到终止位置的内容,包括 html 标签,同时保留空格和换行
- element.innerHTML
6.2 常用元素的属性操作
- innerText、innerHTML改变元素内容
- sre、href
- id、alt、title
6.3 表单元素的属性操作
- 利用DOM 可以操作如下表单元素的属性
- type value checked selected disabled
6.4 样式属性操作
- 可以通过JS修改元素的大小、颜色、位置等样式
- element.style行内样式操作
- element.className类名样式操作
- JS 里面的样式采取驼峰命名法:比如:fontSize
- JS 修改 style 样式操作,产生的是行内样式,css 权重比较高
- 如果样式修改较多,可以采取操作类名方式更改元素样式
- class 因为是个保留字,因此使用 className 来操作元素怒类名属性
- className 会直接更改元素的类名,会覆盖原先的类名
6.5 操作元素总结
- 操作元素是DOM核心内容
6.6 排他思想
- 如果同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:
- 所有元素全部消除样式(干掉其他人)
- 给当前元素设置样式(留下自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己
6.7 自定义属性的操作
- 获取属性值
- element.属性:获取属性值
- element.getAttrbute('属性');
- 区别
- element.属性:获取内置属性值(元素本身自带的属性)
- element.getAttrbute('属性');主要获得自定义的属性(标准),我们程序员自定义的属性
6.8 H5自定义属性
- 自定义属性的目的:是为了保存并使用数据,有些数据可以保存到页面而不用保存到数据库种
- 自定义属性获取是通过element.getAttrbute('属性');获取
- 但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性
- H5给我们新增了自定义属性:
- H5 规定自定义属性data-开头作为属性名并且赋值
- 比如<div data-index='1'></div>
- 或者使用JS设置
- element.setAttribute('data-index', 2)
- 获取H5自定义属性:
- 兼容性获取:element.getAttribute('data-index');
- H5 新增element.dataset.index或者element.dataset['index']IE11才开始支持

7. 节点操作

7.1 为什么需要节点操作
- 获取元素通常使用两种方式:
- 1. 利用DOM 提供的方法获取元素
- document.getElementById()
- document.getElementsByClassName
- document.querySelectorA等
- 逻辑性不强、繁琐
- 2、利用节点层级关系获取元素
- 利用富子结点关系获取元素
- 逻辑性强,但是兼容性稍差
- 这两种方式都可以获取元素节点,都会使用,但是节点操作更简单
7.2 节点概述
- 网页中的所有内容都是节点(标签、属性、文本、注释等),在DOM 中,节点使用 node 来表示
- HTML DOM 树中的所有节点均可通过 JavaScript 进行访问,所有HTML 元素(节点) 均可被修改,也可以创建或删除
- 一般地,节点至少拥有nodeType(节点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性
- 元素节点:nodeType为1
- 属性节点:nodeType为2
- 文本节点:nodeType为3(文本节点包含文字,空格,换行等)
- 实际开发中,节点操作主要操作的是元素节点
7.3 节点层级
- 利用DOM 树可以把节点划分为不同的层级关系,常见的是 父子兄弟级关系
- 1.父级节点
- node.parentNode
- parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
- 如果指定的节点灭有父节点则返回null
- 2. 子节点
- parentNode.childNode(标准)
- parentNode.childNode(标准)返回包含指定节点的子节点的集合,该集合为即时更新的集合
- 注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等
- 如果只想获得里面的元素节点,则需要专门处理,所以一般不提倡使用 childNodes
- parentNode.children(非标准)
- children 是一个只读属性,返回所有的元素节点,它只返回子元素节点,其余节点不返回
- 虽然 [children 是一个非标准,但是得到了各个浏览器的支持,因此可以放心使用
- parentNode.firstchild
- .firstchild 返回第一个子节点,找不到则返回nul 同样,也是包含所有的节点
- parentNode.lastchild
- lastChild 返回最后一个子节点,找不到则返回null,同样也是包含所有的节点
- parentNode.firstElementChild
- firstElementChild 返回第一个子元素节点,找不到则返回null
- parentNode.lastElementChild
- lastElementChild 返回最后一个子元素节点,找不到则返回null
- 这两个方法有兼容问题,IE9以上才支持
- 3. 兄弟节点
- node nextSibling
- nextSibling 返回当前元素的下一个兄弟节点,找不到则返回null 同样,也是包含所有的节点
- node.previousSibling
- previouSibling 返回当前元素上一个兄弟节点,找不到则返回nul,同样,也是包含所有的节点
- node.nextElementSibling
- nextElementSibling 返回当前元素下一个兄弟元素节点,找不到则返回null
- node.previousElementSibling
- previousElementSibling 返回当前元素上一个兄弟节点,找不到则返回null
- 这两个方法有兼容问题,IE9以上才支持
7.4 创建节点
- document.createElement('tagName');
- document.createElement(‘tagName’) 方法创建由 tagName 指定的HTML元素,因为这些元素原先不存在,是根据我们的需求动态生成的,所以也称为动态创建元素节点
- node.appendChild(child)
- node.appendChild(child) 方法将一个节点添加到指定父节点的子节点列表末尾,类似于CSS里面的after 伪元素
- node.insertBefore(child,指定元素)
- node.insertBefore(child,指定元素) 方法将一个节点添加到父节点的指定子节点前面,类似于CSS里面的before 伪元素
7.5 删除节点
- parent.removeChild(child);
- removeChild 方法从DOM 中删除一个子节点,返回删除的节点
- parent.replaceChild(para, child);
- 替换元素

JS-Web APIs(一) 获得元素-事件-操作元素-节点操作

1.Web APIs 和JS基础关联性

2. API 和 Web API

3. DOM 简介

4.获取元素

5. 事件基础

6.操作元素

7. 节点操作

相关推荐