前端入门之js基础和DOM、BOM

js组成

JavaScript分成：
1.ECMAScript：JavaScript语法
2.Dom：页面文档对象模型
3.Bom：游览器对象模型
Dom+Bom 总称：Web APls 是w3c组织的标准 API：浏览器定义好的一些接口

DOM相关内容

1.什么是DOM
文档对象模型，是w3c组织推荐的处理可扩展标记语言的标准编程接口
document 是DOM的顶级对象
2.获取元素方法（常用）
(1)document.getElementByClassName（‘类名’） 类名获得元素集合
(2)document.querySelector（‘选择器’）指定选择器返回第一个元素对象
(3)document.querySelectorAll（‘选择器’）指定选择器的所有元素对象集合
console.dir();打印返回的元素对象 更好的查看里面的属性和方法
3.事件的三要素
(1)事件源 ：事件被触发的对象 比如 按钮
(2)事件类型（注册事件）： 如何触发 比如鼠标点击（onclick） 鼠标进过
(3)事件处理程序： 通过一个函数赋值的方式
获取事件源
注册事件
添加事件处理程序（采用函数赋值形式）
4.改变元素内容
(1)元素.innerText 改变内容时不识别html标签
(2)元素.innerHTML 改变内容时识别html标签
元素中的属性都可以修改
5.样式属性操作（表单元素通过特定属性修改）
(1)元素.style 行内样式操作 样式比较少 或者功能简单时使用
(2)元素.className 类名样式操作 重新声明一个类 然后赋值给需要的元素可以多个类 样式
6.h5新规范
自定义属性前面加 ： data-什么什么
element.属性 只能获取内置属性
element.getAttribute(‘属性’) 可以获得自定义属性
7.元素属性的增删改查
添加/修改属性值：
element.属性=‘值’; 可以设置内置属性值
element.setAttribute(‘属性’，‘值’); 可以设置自定义属性值
移除属性：
element.removeAttribute(‘属性’);
8.节点操作
(1)parentNode 父节点 可以返回某节点的父节点 离得最近的一个父节点
(2)childNodes 子节点 包含空格 文本等类型 不推荐使用
(3)firstElementChild 返回第一个子节点元素 ie9以上支持
(4)lastElementChild 返回最后一个子节点元素 ie9以上支持
(5)children 返回子节点元素 开发常用
正常开发使用 没有兼容性问题
children[0] 通过索引来获取需要的第几个元素节点
children[children.length-1] 可以获取最后一个元素节点
nextElementSibling 兄弟元素节点 返回当前元素的下一个兄弟节点 ie9以上支持
previousElementSibling 返回当前元素的上一个兄弟节点 ie9以上支持
9.节点的增删改查
(1)创建与添加元素节点
document.createElement（‘元素’）创建节点元素
node.appendChild（child）添加节点元素 node父级 child子级
node.insertBefore（child，指定元素） 在一个元素上面添加一个新元素
(2)删除节点
node.removeChild(child)
(3)复制节点
node.cloneNode(false/true) 配合添加元素节点使用 括号为false 只复制标签 为true 所有的都复制
10.两种注册事件的方式
(1)传统注册事件方式
用on开头
特点：注册事件的唯一性
(2)方法监听注册方式：
addEventListener 事件监听方式 ie9兼容
特点：同一个元素同一个事件可以注册多个监听器 按注册顺序依次执行
11.阻止事件冒泡
冒泡有好有坏
好处：可以事件委托
window.event.cancelBubble=true 阻止冒泡 ie6-8使用
event.stopPropagation(); ie9以上支持
12.event事件对象
event就是一个事件对象 写到侦听函数里面 当一个形参

13.常用键盘事件

BOM相关内容

1.什么是BOM
浏览器对象模型，是独立于内容而与游览器窗口进行交互的对象
window 是BOM的顶级对象
2.页面加载机制
(1)window.οnlοad=function(){} 可以让页面全部加载玩 再执行js代码 只能有一次
(2)window.addEventListener（‘load’，function（）{}） 可以多次使用
(3)document.addEventListener（‘DOMContentLoaded’，function（）{}）
当页面图片比较多是 用这个 ie9以上支持 可以多次
3.定时器效果
(1)setTimeout 定时器 只会执行一次
clearTimeout（定时器名字） 可以关闭定时器

(2)setInterval 定时器 会使用多次 重复调用这个函数
clearInterval（定时器名字） 可以关闭定时器
4.同步异步
前一个任务结束在执行下一个任务—同步
同时创建多个任务一起执行 —异步 事件循环： event loop

5.调整窗口大小事件
(1)window.οnresize=funtion（）{} 调整窗口大小事件
(2)window.addEventListener（‘resize’，function（）{}）调整窗口大小事件
(3)window.innerWidth 可以获得当前屏幕的宽度
用来完成响应事件，根据窗口大小不同，来实现什么样式
6.offset与style区别

7.location常见方法



8.元素偏移量offset–动画效果

9.BOM中三大方法总结


10.页面操作
window.pageYOffset 页面被卷去的头部 window.pageXOffset 页面被卷去 的左侧
mouseover 鼠标经过自身盒子会触发，经过子盒子也会触发
mouseenter 只会经过自身盒子触发 不会冒泡
mouseleave 搭配使用 同样不会冒泡
11.立即执行函数
（function（）{}）（）或者 2.（function（）{}（））