1.查找HTML元素
方法 | 描述 |
document.getElementById(id) | 通过元素id来查找 |
document.getElementsByTagName(name) | 通过标签名来查找元素 |
document.getElementsByClassName(name) | 通过类名来查找元素 |
document.querySelector(CSS选择器) | 通过css选择器来选择一个元素 |
document.querySelectorAll(CSS选择器) | 通过CSS选择器选择多个元素 |
2.获取HTML的值
方法 | 描述 |
元素节点.innerText | 获取HTML元素的文本 |
元素节点.innerHTML | 获取HTML元素的innerHTML |
元素节点.属性 | 获取HTML元素的属性值 |
元素节点.getAttribute(attribute) | 获取HTML元素的属性值 |
元素节点.style.样式 | 获取HTML元素的行内样式值 |
3.改变HTML的值
方法 | 描述 |
元素节点.innerText=新文本内容 | 改变HTML元素的文本 |
元素节点.innerHTML=新html内容 | 改变HTML元素的innerHTML |
元素节点.属性=new value | 改变HTML元素的属性值 |
元素节点.getAttribute(attribute,value) | 改变HTML元素的属性值 |
元素节点.style.样式=new style | 改变HTML元素的行内样式值 |
4. 插入text和html
object.insertAdjacentHtml(where,html);
object.insertAdjacenttext(where,text);
where参数:
- beforeBegin:插入到开始标签的签名
- beforeEnd:插入到结束标签的签名
- afterBegin:插入到开始标签的后面
- afterEnd:插入到结束标签的后面
beforeBegin <div>afterBegin 内容 beforeEnd </div> afterEnd
5. 修改HTML元素
方法 | 描述 |
document.createElement(element) | 创建HTML元素节点 |
document.createAttribute(attribute) | 创建HTML属性节点 |
document.createTextNode(text) | 创建HTML文本节点 |
元素节点.removeChild(element) | 删除HTML元素 |
元素节点.appendCHild(element) | 添加HTML元素 |
元素节点.replaceChild(element) | 替换HTML元素 |
元素节点.insertBefore(element) | 在指定的子节点前面插入新的子节点 |
6.查找HTML父子
方法 | 描述 |
元素节点.parentNode | 返回元素的父节点 |
元素节点.parenElement | 返回元素的父元素 |
元素节点.childNodes | 返回元素的一个子节点的数组 |
元素节点.children | 返回元素的一个子元素的集合 |
元素节点.firstChile | 返回元的第一个子节点 |
元素节点.firstElementChild | 返回元素的第一个子元素 |
元素节点.lastChild | 返回元素的最后一个子元素 |
元素节点.lastElementChild | 返回元素的最后一个子元素 |
元素节点.previousSibling | 返回某个元素前一个兄弟的节点 |
元素节点.previousElementSibling | 返回某个元素前一个兄弟的元素 |
元素节点.nextSibling | 返回某个元素紧接着之后的节点 |
元素节点.nextElementSibling | 返回某个元素后一个兄弟元素 |
7.表单事件(适用于所有在form表单中的HTML)
属性 | 描述 |
onbulr | 当元素失去焦点是运行 |
onfocus | 当元素获得焦点时运行脚本 |
onchange | 当元素改变时运行脚本 |
oninput | 当元素获得用户输入时运行脚本 |
oninvalid | 当元素无效时运行脚本 |
onselect | 当选取元素时运行脚本 |
onsubmit | 当提交表单时运行脚本 |
8.键盘事件(window的属性) keyCode获得键盘输入值
属性 | 描述 |
onkeydown | 当按下按键时运行脚本 |
onkeyup | 当松开安静时运行脚本 |
onkeypress | 当按下并松开按键试运行脚本 |
9.键鼠属性
属性 | 描述 |
ctrlKey | 返回当事件被触发时, CTRL 键是否被按下 |
altKey | 返回当事件被触发时, ALT 键是否被按下 |
shiftKey | 返回当事件被触发时, shiftKey 键是否被按下 |
clientX | 返回当事件被触发时, 鼠标指向的水平坐标 |
clientY | 返回当事件被触发时,鼠标指向的垂直坐标 |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标 |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标 |
10.鼠标事件
属性 | 描述 |
onclick | 当单击鼠标时运行脚本 |
ondblclick | 当双击鼠标时运行脚本 |
onmousedown | 当按下鼠标按钮时运行脚本 |
onmouseup | 当松开鼠标按钮时运行脚本 |
onmousemove | 当鼠标指向移动时运行脚本 |
onmouseover | 当鼠标移至元素之上时运行脚本 |
onmouseout | 当鼠标移出元素时运行脚本 |
onmouseenter | 当鼠标移至元素之上时运行脚本 |
onmouseleave | 当鼠标指针移出元素时指向脚本 |
onmousewheel | 当转动鼠标滚轮时运行脚本 |
onscroll | 当滚动元素的滚动条时运行脚本 |
11.时间冒泡:时间的冒泡:所谓的冒泡指的是事件向上传导,当后代元素上的事件被触发时,其祖先
元素的相同时间也会被触发,在开发中大部分情况冒泡都是有用的,如果不希望发生冒泡可以通过事件对象来取消冒泡 调用函数来取消
12.事件绑定:用于一个事件对应多个函数,并且不存在兼容性问题
13.window对象
- 警告框:alert()
- 确认框:confirm()
- 提示框:prompt() 当提示框弹出时,用户不得不输入值后单击确认或者取消来继续执行
- 定时事件:setTimeout(function,millseconds)执行一次 ssetInterval()重复执行
- 打开新窗口:window.open(url,name,specs,replace);url(可选,如果没有指定则打卡机一个空白的新窗口,) name(可选,指定target属性或窗口的名称)
- 关闭当前窗口:window.close()
- 移动当前窗口:window.moveTo(x,y)
- 调整当前窗口:window.resizeTo(width,height)
14.Location对象(该对象封装了浏览器地址拦的信息)
- location(输出location对象)
- location.href(输出当前地址的全路径地址)
- location.origin(输出当前地址的来源)
- location.prorocol(输出当前地址的协议)
- location.hostname(输出当前地址的主机名)
- location.port(输出当前地址的端口号)
- location.pathname(输出当前的在的路径部分)
- location.search(输出当前地址的?后边的参数部分)
- assign()用来跳转到其他页面
- reload()用于重新加载当前页面,作用和刷新按钮一样
- replace()用于将一个新页面替换当前页面,但他不会生存历史记录,不能用回推荐
15.History对象(可以用来操作浏览器向前或向后翻页)
- history.length():获取当前访问链接的数量
- history.back():可以回退到上一个页面
- history.forward():可以跳转到下一个页面
- go():可以用来跳转到指定的页面
16.Screen对象(该对象存放着有关显示浏览器屏幕的信息)
- availHeight:返回显示屏幕的高度(除去任务栏)
- availwidth:返回显示屏幕的宽度(除去任务栏)
- bufferDepth:设置或返回调色板比特深度
- colorDepth:返回目标设备或缓冲器上调色板的深度
- height:返回显示屏幕的宽度
- widtd:返回显示器的宽度
- ..........
17.Exception(异常概述)
try {
// 可能发生异常的代码
} catch (error) {
// 发生错误执行的代码
} finally {
// 无论是否出错都会执行的代码
}
18.JSON(是一种存储和交换数据的语法)
- JSON中的字符串必须用双引号包围
- JSON字符串转换为JS对象 需要一个JSON字符串作为参数,JSON.parse(jsonStr)
- JS对象转为JSON字符串:需要一个js对象作为参数 JSON.stringify(obj)
19.AJAX(作为传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,可以在不重新加载整个页面的情况下,对网页的某部分进行更新)
- AJAX的核心是XMLHttpRequest对象(用于幕后同服务器交换数据)
- 创建一个XMLHttpRequest的语法是: new XMLHttpRequest
20.let关键字