Day39 DOM操作、事件
- DOM操作
1.1 webAPI
(1)、api的概念
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、 prompt()、log()、reverse()、getMonths()
任何开发语言都有自己的API
API的特征输入和输出(I/O)
API的使用方法(console.log())
(2)、webapi的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
我们可以通过API去操作DOM和BOM
此处的web API特指浏览器提供的API(一组方法)，web API在后面的课程中有其它含义
(3)、JavaScript的组成
1.2 DOM概述
事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。
DOM又称为文档树模型
文档：一个网页可以称为文档
节点：网页中的所有内容都是节点（标签、属性、文本、注释等）
元素：网页中的标签
属性：标签(元素)的属性
1.3 获取元素对象的方式
想要操作DOM,核心问题,你得先找到它,而获取对象的方式,就是用来找到某个/某些元素的
伪数组定义：
1、拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
2、不具有数组所具有的方法
伪数组，就是像数组一样有 length 属性，也有 0、1、2、3 等属性的对象，看起来就像数组一样，但不是数组
常见的参数的参数 arguments，DOM 对象列表（比如通过 document.getElementsByTags 得到的列表）
1.3.1 根据ID获取
1.3.2 根据class获取
1.3.3 根据标签名获取
1.3.4 根据name获取
1.3.5 querySelector
1.3.6 querySelectorAll
- 事件
2.1 概述
事件：触发-响应机制
Event接口表示在DOM中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由API生成。
三要素 :
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
2.2 绑定方式
2.3 Onload事件
获取DOM对象的语句,必须放在body之后,否则会因为代码执行顺序的原因,导致获取不到对应的DOM对象
而onload事件,就是用来解决这个问题的,
Onload : 文档加载完之后,立即触发执行
- 属性操作
3.1 表单操作
3.1.1 常用属性
value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性checked 复选框选中属性
selected 下拉菜单选中属性
checked
Readonly
3.1.2 案例
/**
- 传入选择器 获取对应的DOM对象,返回伪数组
- 主要解决创建对象的时候不用调用很多方法 一个方法搞定
- @param {*} selector
*/
function $(selector){
return document.querySelectorAll(selector);
}
封装的插件common.js
3.1.3课堂练习
var width=Math.floor(Math.random()*256+100);
var height=Math.floor(Math.random()*256+100);
content.style.width=width+‘px’;
content.style.height=height+‘px’;
}
}
</script>
3.1.4
Id属性单独的一个 所以加[0]获取 别的属性按css格式全部获取即可
3.2 非表单操作
3.2.1 基础语法
href、title、id、src、className width height等等
对于style
<div border='1' width='200'>内容</div>
<!-- 只能用style 在里面写属性 -->
<div style="width: 200px;">内容</div>
所以要用style.属性 设置
比如宽高属性,并不是所有标签都有的,比如img 有宽高属性,所以可以直接通过DOM对象.width = 222 来进行设置
但是比如div等 是没有宽高标签属性的,但是可以通过css进行设置
DOM.style.width=”222px”;
这种设置CSS的写法,如果是两个单词的话,就需要把-改为字母大写
比如 : font-size 通过js设置 就要这样 fontSize
3.2.2 案例
但是都用getElementById较为繁琐
在外部封装一个方法
引入插件 更改方法名
完整案例
- 扩展-CSS函数
js设置样式太复杂,代码过长,不太方便
4.1.1 CSS函数封装
颜色方法插件此时封装优化完毕 可以调用 直接传css参数 即可
继续优化
下面调用
var txt = $(’#txt’);
txt.css(‘color’, ‘red’);//直接调用对象 传属性和值
txt.css(‘fontSize’, ‘20px’);//注意大小写
txt.css(‘backgroundColor’, ‘green’);
txt.css(‘height’, ‘200px’);
txt.css(‘width’, ‘200px’);
//链式调用 跟上面一样功能 二选其一
txt.css('color', 'red').css('fontSize', '20px').css('backgroundColor', 'green').css('height', '200px').css('width', '200px');
}
最终版和步骤
common.js插件内容
/**
- 根据ID获取对象
- @param {*} id
- @returns
*/
function getId(id) {
return document.getElementById(id);
}
/**
- 传入选择器 获取对应的DOM对象,返回伪数组
- 主要解决创建对象的时候不用调用很多方法 一个方法搞定
- @param {*} selector
/
/
function $(selector){
return document.querySelectorAll(selector);
}
/
function $(selector) {
var obj = document.querySelectorAll(selector);
/*- 向obj中添加css函数 通过obj对象.css()调用
- 功能:向伪数组中所有的DOM对象设置相同的属性
- 但只能设置单个样式
- 并且要把 - 变为首字母大写:font-size写成fontSize
- @param {*} attr
- @param {*} value
*/
//添加css设置颜色的方法 第一个版本---------------------------------
// obj.css = function (attr, value) {
// for (var i = 0; i < this.length; i++) {//this就是这个obj伪数组对象
// // this[i].style.color= value;
// this[i].style[attr] = value;
// }
// return this;//这里加上return this可以链式调用
// }
// return obj;
// }
//第二版本------------------------------------
// 上面一次只能修改一个属性 传对象一次修改多个参数的话 继续优化
// obj.css = function (x) {
// for (key in x) {//遍历对象的属性和值
// for (var i = 0; i < this.length; i++) {//遍历obj 对每个obj添加样式 颜色/大小
// this[i].style[key] = x[key];// .属性=[] 如style.color=style[‘color’] style也是个对象
// }
// }
// return this;//这里加上return this可以链式调用
// }
// return obj;
// }
/**
* 最终版
*
-
- $(‘xxx’).css(‘属性’,‘值’).css(‘属性’,‘值’)…;
-
- 同时设置多个属性 , 可以链式调用
- $(“xxx”).css({
-
属性:值, -
属性:值, -
.... - }).css(xxxxx);
-
- $(“xxx”).css(‘属性’) 返回对应的属性的值,不能链式调用
- 1 一个参数 , 如果是对象,则对所有DOM对象设置多个样式,支持链式调用
- 2 一个参数 , 不是对象,就认为是属性,则返回第一个DOM对象的属性的值,不支持链式调用
- 3 两个参数 , 第一个attr是属性,第二个value是属性对应的值,则对所有DOM设置该样式和值
- @param {属性名} attr
- @param {属性值} value
*/
obj.css = function (attr, value) {
// 传递了1个参数,说明有可能传递的是对象,想要设置多个
if (arguments.length == 1) {
// 判断attr是否是对象
if (typeof attr == ‘object’) {
// 遍历对象,获取key和value(属性和值)
for (key in attr) {
// this就是这个obj 伪数组对象
// 循环遍历 对 DOM对象进行样式设置
for (var i = 0; i < this.length; i++) {
this[i].style[key] = attr[key];
// style.color style[‘color’]
}
}
} else {
// 1个值,不是对象,说明是获取,就返回第一个DOM对象的属性值
return this[0].style[attr];
}
} else {
// 到这里 说明是 设置单个属性
for (var i = 0; i < this.length; i++) {
this[i].style[attr] = value;
}
}
// reutrn this 可以链式调用
return this;
}
使用方式
我是段落
1
2
3
4
5
- innerText
可以获取和设置标签中的内容
与之相似的有一个innerHTML
- 扩展-text和html函数
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
