无知的我正在复盘js…
文章目录
JavaScript1 常用命令输出语句转换为字符串得到变量类型 1 获取元素对象1.1 H5新增获取元素对象1.2 直接获取特殊元素对象 2 事件三要素2.1 对象事件类型2.2 修改元素文本2.3 修改元素class属性2.4 修改元素样式中的属性 3 内置对象常见对象对象内置属性 4 CSS属性5 节点操作6 创建元素7 高级地使用事件7.1 注册事件7.2 删除事件7.3 事件处理流7.4 事件对象7.4.1 属性和方法详细7.4.2 鼠标事件7.4.3 键盘事件 案例JavaScript
Web APIS
DOM（页面文档模型）
BOM（浏览器对象模型）
JS基础
ECMAScript
是什么？
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
1 常用命令
输出语句
输出到控制台console.log();弹窗：alert();弹出输入框：prompt();
转换为字符串
String([变量名]);
得到变量类型
typeof [变量名];
1 获取元素对象
-document.getElementById('[id属性]');返回：标签及内容---对应id属性的标签的-根据标签，获取document.getElementsByTagName('[标签名]');返回：元素对象集合as：var lis = document.getElementsByTagName('li');console.log(list[0]);-根据父标签对象，获取document.getElementsByTagName('[标签名]');细节：只能通过一个父标签来...as：var lo = document.getElementsByTagName('ol');XXX lo.getElementsByTagName('li'); XXX=>lo[0].getElemntsByTagName('li');-打印对象的属性以及属性值等等：console.dir([对象名]);
细节1：根据id获取不需要为@param getElement加上s
细节2：获取对象的属性：[对象].[属性名]
1.1 H5新增获取元素对象
1.document.getElementsByClassName('[类名]')根据类名，获取返回：类对象2.(选择器)document.querySelector('[（css）类名 | id | 标签]')返回：对应的第一个对象document.querySelectorAll('[...]')返回：所有对应对象
细节：@param getElemet… : 没加上s
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);
1.2 直接获取特殊元素对象
对body元素
documment.body返回：body元素对象
对html元素
documment.documentElement返回：html元素对象XXX ducument.documentHtml XXX
2 事件三要素
1事件源（对象）; 2事件类型（方法） ; 3事件处理程序（方法实现）
<body><button id="btn">唐伯虎</button><script>var btn = document.getElementById('btn');btn.onclick = function () {//1事件源（对象）; 2事件类型（方法） ; 3事件处理程序（方法实现）alert('点秋香');}</script></body>
还可以在实现方法里面，调用方法
2.1 对象事件类型
点击事件：[对象].onClick
焦点事件：
获得焦点事件：[对象].onfocus
失去焦点事件：[对象].onblur
应用案例：212-显示隐藏文本框内容
2.2 修改元素文本
[对象].innerText = ‘xxx’ 非标准，不具有通用性
作用：读取对象内容细节：不识别html标签; 去除换行和空格
as:
var p = document.querySelector('p');p.innerText = getDate();
[对象].innerHTML
作用：读取对象内容
细节：识别html标签
2.3 修改元素class属性
[对象].className
xxx [对象].class xxx
修改后，覆盖原有类名
修改为多类名：as：[对象].className = ‘first name’(不同类名间加上空格)
案例：213-使用其修改元素样式
2.4 修改元素样式中的属性
[对象].style.[属性]修改元素样式as：隐藏对象[对象].style.display = 'none'
细节：如修改，修改的是行内样式，所以权重比css样式低
细节：如修改，与直接修改css样式的分别：[ : ] => [ = ]; 添加单引号
应用案例：214-密码验证信息
3 内置对象
常见对象
时间对象
as：获取当前小时
var date = new Date();var h = date.getHours();
对象内置属性
as：禁用表单
[对象名].disabled = true;
扩展：as：this.disabled = true：@param this：代表当前的对象的调用者———在事件中
4 CSS属性
对于<input>:outline:none 去除输入框的边框
display: none 隐藏对象
5 节点操作
如何识别节点？ html页面全是节点; 细节：注释…换行…空格都是节点；并非包含在标签之内的文本才是节点 为什么要节点？ DOM提供获取元素方法逻辑性不强，繁琐 节点的内容？ 至少有节点类型、节点名称、节点值原理：利用父子层级关系获取元素
获取父节点
[对象].parentNode
获取的是距离其最近的父节点
获取子节点
1.[parentNode].childNodes 获取所有子节点(标准，不推荐)
as：获得ul所有的li：ul.childeNodes
引出问题：获取到的节点经常会包含文本节点（无用的节点）
解决：利用元素类型遍历节点而筛选节点
2.[parentNode].children 获取元素子节点(非标准，推荐)
获取第几个子节点：
获取第一个和最后一个子节点-firstChild as:[ol].firstChild;-lastChild as:[ol].lastChilde;需要IE9以上版本：-firstElementChild as:[ol].firstElementChild;-lastElementChild as:[ol].lastElementChild;利用索引获取任意节点：-childeren：[ol].childeren[0];-childeren：[ol].childeren[ol.children.length-1];
案例1：231.新浪下拉列表
-鼠标悬浮事件：[对象].onmouseover-鼠标离开事件：[对象].onmouseout
添加节点（以下略） 创建和添加节点 删除节点复制节点
兄弟节点
**获取节点的类型：**文本节点：3 ；元素节点：1；…
[node].nodeType
6 创建元素
document.write() 细节：当页面文档流加载完毕，再调用(as：调用事件)会导致页面重绘innerHTML 循环拼接输出1.添加到数组 2.循环数组输出（输出效率最高） document.creatElement() 直接创建，不需要拼接7 高级地使用事件
7.1 注册事件
-就是给元素添加事件
传统方式
当同一个元素同一个事件注册多个监听器时，最后注册的处理函数将覆盖前面注册的处理函数
方法监听注册方式
当同一个元素同一个事件注册多个监听器时，按注册顺序依次执行
-方法监听1详解：
语法：eventTarget.addEventListener(type, listener[, useCapture])
@type：事件类型字符串，比如 click 、mouseover@listener：事件处理函数，事件发生时，会调用该监听函数@useCapture：可选参数，是一个布尔值，默认是 false。
细节：1.都要带单引号 2.注意@type不要带 on
-方法监听2详解(了解)：
语法： eventTarget.attachEvent(eventNameWithOn, callback)
@eventNameWithOn：事件类型字符串，比如 onclick 、onmouseover ，这里要带 on@callback： 事件处理函数，当目标触发事件时回调函数被调用细节：IE8 及早期版本支持
-兼容性方案解决（略）
7.2 删除事件
-传统注册方式
eventTarget.onclick = null;
-方法监听注册方式
eventTarget.removeEventListener(type, listener[, useCapture]);eventTarget.detachEvent(eventNameWithOn, callback);
细节：不能使用匿名函数
7.3 事件处理流
作用：当有多个事件时，需要指定事件执行的顺序。
-指定捕获阶段的 顺序as：
[对象].addEventLisenter('click', funciton(){alert('你好');}, true);
-指定冒泡阶段的 顺序as：flase(默认)
7.4 事件对象
定义as：（事件对象的命名：可以随便取）。
[对象].addEventLisenter('click', funciton(event){alert('你好');}, true);
@event是形参，但不需要传递值。
创建事件对象的机制：需要先创建事件，才会创建对应的事件对象。
属性as：
target : div (绑定的事件标签)。type : clik (绑定的事件类型)。补充：属性因对象的变化而变化。
兼容性问题：
问题：window.event，在IE678中获取事件对象，获取命令必须写完全。
解决：e = e || window.event（当识别失败，为假；反之，为真）
7.4.1 属性和方法详细
-阻止默认行为：
as：阻止链接跳转/按钮提交：
1.
[对象].addEventListener('click', function(e)){e.preventDefault();// 为了阻止默认的}
2.
[对象].addEventListener('click', function(e)){return false;}
-阻止事件冒泡：
e.stopPropagation();// 停止传播
-事件委托：
7.4.2 鼠标事件
-contextmenu => 禁用右键菜单:
document.addEventListener('contextmenu', funtion(e){e.preventDefault();})
-selectstart => 禁止选中：
document.addEventListener('selectstart', funtion(e){e.preventDefault();})
细节：别忘了e.preventDefault()。
-x，y事件属性：
e.client == 鼠标在可视区域的x，ye.page == 鼠标在页面文档的x，ye.screen == 鼠标在电脑屏幕的x，y
-案例：跟随鼠标的天使
...图片添加绝对定位...pic.style.left = x + "px";pic.style.top = y + "px";
细节：别忘了拼接字符串
7.4.3 键盘事件
keyup == 按下后抬起 事件keydown == 按下 事件keypress == 按下 事件(不识别功能键， 无论如何后执行)-属性：
e.keyCode == 获取键盘按键的ASCII值
补充：只有keypress事件 识别键盘按键的大小写
案例
207-仿京东显示隐藏按钮
211-循环精灵图
216-排他思想（算法）
