- js组成部分
ECMAscript 解释器 没有兼容问题 ES6-ES10会有兼容性问题
BOM浏览器对象模型 几乎都不兼容
DOM文档对象模型 部分兼容 DOM DOM2 DOM3（低版本兼容，高版本不兼容）
BOM
window 窗体对象
1.innerheight 返回窗口的文档显示区的高度。（可见区域宽高）
2.innerwidth 返回窗口的文档显示区的宽度。
3.outerheight 返回窗口的外部高度。 （不带菜单栏和控制台的宽高）
4.outerwidth 返回窗口的外部宽度。
5.pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
6.pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
7.self 返回对当前窗口的引用。等价于 Window 属性。
8.screenLeft 左上角在屏幕上的X坐标。（IE）
9.screenTop 左上角在屏幕上的Y坐标。（IE）
10.screenX 左上角在屏幕上的x坐标。
11.screenY 左上角在屏幕上的y坐标。
12.alert() 显示带有一段消息和一个确认按钮的警告框。
13.clearInterval() 取消由 setInterval() 设置的 timeout。
14.clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
15.close() 关闭浏览器窗口。
16.confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
17.moveBy() 可相对窗口的当前坐标把它移动指定的像素。//每一次按照值累加移动
18.moveTo() 把窗口的左上角移动到一个指定的坐标。 //移动到指定位置
19.open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
20.print() 打印当前窗口的内容。
21.prompt() 显示可提示用户输入的对话框。
22.resizeBy() 按照指定的像素调整窗口的大小。
23.resizeTo() 把窗口的大小调整到指定的宽度和高度。
24.scrollBy() 按照指定的像素值来滚动内容。
25.scrollTo() 把内容滚动到指定的坐标。
26.setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
27.setTimeout() 在指定的毫秒数后调用函数或计算表达式。
open方法的参数
open(地址，名字，样式 “width=200，height=200”)
属性
1.width宽度
2.height高度
3.top上方的偏移量
4.left左侧的偏移量
5.location是否显示地址栏 yes/no
6.menubal 是否显示菜单栏
7.resizable 是否可以拖动改变大小 yes/no
8.srcollbar 是否可以拖动改变大小 yes/no
location地址栏对象
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
history历史记录对象
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。
DOM对象
body 提供对 <body> 元素的直接访问。
cookie 设置或返回与当前文档有关的所有 cookie。
lastModified 返回文档被最后修改的日期和时间。
title 返回当前文档的标题。
URL 返回当前文档的 URL。
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
getElementsByClassName()返回带有指定class名称的对象集合。(IE8以上)
write() 向文档写 HTML 表达式 或 JavaScript 代码。
writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符。
标签.属性-设置或返回标签下的属性
标签.style.fontSize="20px" -设置或返回样式
标签.innerHTML="" -设置或返回文本或标签
表单
表单名.文本框名称 获得表单标签
表单名.文本框name.value 修改值用value
表单名.submit() 执行提交事件
事件
onclick鼠标单击 onchange选择事件
onmouseover()鼠标移进 onmouseout()鼠标移出
onblur()失去焦点 onfocus()获得焦点
onload()加载
事件操作方式
方法1
var btn=document.getElementById("btn")
btn.οnclick=function(){
//执行要操作的语句
}
方法2
<button οnclick="fun()">点击</button>
function fun(){ alert("按钮被点击") }
node类型
nodeType获得节点类型
1标签类型 2属性 3文本 8注释 9对象
nodeName 节点名称 #text文本节点
tagName 元素名称(不包括文本，只显示标签名)
appendChild()尾部添加一个孩子
removeChild()删除孩子元素
cloneNode(true/false)复制元素
replaceChild(新，旧)替换元素(会覆盖) //包含子元素
insertBefore(新，旧)插入孩子元素（不会覆盖） //添加到指定元素前
document.createElement()创建标签
document.createTextNode()创建文本
getAttribute()获得属性
removeAttribute()删除属性
setAttribute()修改属性
图片
var img=new Image()
img.src=""
document.body.appendChild（img）
表格
cells[ ] 返回表格中所有单元格集合
rows[ ] 返回表格中所有行的集合
insertRow() 在表格中添加1行
deleteRow() 在表格中删除1行
rowIndex() 返回行在表格中的位置
insertCell() 添加一个单元格
deleteCell() 删除一个单元格
colSpan() 跨列
rowSpan() 跨行
DOM扩展
标签筛选
1.firstchild 获得第一个孩子（包含文本节点）
firstElementchild 获得第一个孩子
2.lastchild 获得最后一个孩子（包含文本节点）
lastElementchild 获得最后一个孩子
3.childNodes 获得所有孩子节点集合（包含文本节点）
children 获得所有汉字节点集合
4.previousSibling 获得上一个兄弟（包含文本节点）
previousElementSibling 获得上一个兄弟
5.nextSilbing 获得下一个兄弟（包含文本节点）
nextElementSilbing 获得下一个兄弟
6.parentNode() 获得父类节点
获得元素
querySelector() 通过选择器获得一个标签
querySelectorAll() 通过选择器获得标签集合
matchesSelector() 判断一个选择器是否属于某个标签
兼容不好可以写前缀，例如：webkitMatchesselector()
li[0].webkitMatchesSelector".text"
class操作
classList 对象
add()添加class属性
remove() 删除class属性
contains()判断class是否存在
toggle()添加删除切换class
自定义属性
html5语法可以为标签自定义属性内容，但是属性定义必须以“data-”开头，
可以通过js调用自定义的属性值
例如：
<p data-aa="23"></p>
插入文本和标签
innerHTML() 内添加标签或文本
outerHTML() 外添加标签或文本
innerText() 内添加文本
outerText() 外添加文本
innsetAdiaceHTML(位置，元素) 插入指定元素
beforbegin 在前面添加兄弟
afterbegin 在前面添加孩子
beforeend 后面添加孩子
afterend 后面添加兄弟
文档模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
edge 用最新文档模式渲染
EmulateIE9 如果有文档类型声明，则用IE9，否则用IE5
EmulateIE8 如果有文档类型声明，则用IE8，否则用IE5
EmulateIE7 如果有文档类型声明，则用IE7，否则用IE5
9：强制用IE9渲染 8：强制用IE8渲染
7：强制用IE7渲染 5：强制用IE5渲染
DOM2和DOM3
样式
对象.style.color=""设置或返回样式(行内)
对象.currentStyle["color"] 获得样式(IE)
getComputedStyle(对象，随便给)["color"]获得样式
元素大小和偏移量
document.body.clientWidth设置或返回带滚动条的宽度
document.body.clientHeight设置或返回带滚动条的高度
document.documentElement.clientWidth设置或返回可视化的宽度
document.documentElement.clientHeight设置或返回可视化的高度
offsetWidth标签的宽度(包括边框和边距)
offsetHeight标签的高度(包括边框和边距)
offsetTop 标签上方的偏移量
offsetLeft 标签左侧的偏移量
offsetParent 返回标签的父类对象
滚动条位置
scrollWidth 带滚动条的元素总宽度
scrollHeight 带滚动条的元素总高度
scrollTop 滚动条上方的偏移量
scrollLeft 滚动条左侧的偏移量
兼容性
document.compatMode 判断浏览器是否是混杂模式
BackCompat 混杂模式
Css1Compat 标准模式
事件
事件流
事件冒泡(IE)
从具体元素开始，再逐层寻找上层嵌套标签，依次向上传播
h1->div->body->html->document
事件捕获
从根节点开始执行，逐层向下寻找，一直找到带事件的节点为止
document->html->body->div->h1
注意：从DOM2开始，都是执行DOM事件流的
DOM事件流
包括三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段
执行顺序：首先发生事件捕获，为事件提供机会，然后是事件的目标阶段
进行接收事件，最后执行冒泡阶段
document->html->body->div->h1->div->body->html->document
事件下的属性和方法
altKey 返回当事件被触发时，"ALT" 是否被按下。
button 返回当事件被触发时，哪个鼠标按钮被点击。
0左键 1中间键 2右键
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。
cancelBubble 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。
keyCode 对于 keypress 事件返回 Unicode 字符码；
对于 keydown 和 keyup 事件返回虚拟键盘码。
returnValue 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。
bubbles 返回布尔值，指示事件是否是起泡事件类型。
cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
target 返回触发此事件的元素（事件的目标节点）。
type 返回当前 Event 对象表示的事件的名称。
preventDefault() 通知浏览器不要执行与事件关联的默认动作。
stopPropagation() 不再派发事件。
阻止冒泡的方法有哪些？
1.if(v==e.target){ console.log(v) } //适应所有浏览器
2.e.cancelBubble=true //支持IE低版本
3.e.stopPropagation() //支持高版本浏览器
阻止默认行为的方法有哪些？
1.return false 适应所有浏览器
2.e.returnValue=false 适应所有浏览器
3.e.preventDefault() 只支持高版本浏览器
扫一扫
1690
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
