JavaScript 随意整理2
08.29
# 全局对象
* escape/unescape() 对特殊字符编码/解码
* encodeURI / decodeURL 对url进行编码/解码
* encodeURIComponent / decodeURIComponent 对URL解码/解码
* eval() 把字符串当做代码执行
# JSON对象
* parse() 把josn字符串转换为对象
* stringify() 把对象转换为json字符串
08.30
# BOM（浏览器对象模型）
## window
#### 定义
* window是js在浏览器环境中 全局变量
* 函数就是window的方法
* 全局变量就是window的属性
#### 属性
* document
* location
* history
* screen
* navigator
* innerWidth 文档区域宽度
* innerHeight 文档区域高度
* outerWidth 浏览器窗口宽度
* outerHeight 浏览器窗口高度
* name 窗口的名字
* parent 父窗口
* top 顶层窗口
* length 子窗口的数量
* frames 子窗口的集合
cursor:pointer;光标为呈现一只手的样子；
<button onclick="window.open('01s.html/网址','是本窗口的打开的话对本窗口命名写上名字','width=400,height=400')">对打开的窗口设置宽高</button>
#### 方法
* alert() 警告框
* confirm() 确认框
* prompt() 可输入弹框
* setInterval()
* clearInterval()
* setTimeout()
* clearTimeout()
* open() 打开新窗口
* close() 关闭窗口
* print() 打印
## location （地址位置）
#### 属性
* href 完整的url
* protocol 协议
* hostname 主机名
* port 端口号
* host 主机名和端口号
* pathname 文件路径
* search 查询部分
* hash 锚点部分
#### 方法
* reload() 重新加载当前文档。
* assign() 保存记录
* replace()不保存记录
## history （历史记录）
#### 属性
* length 历史记录的数量
#### 方法
* back() 回退一步
* forward() 前进一步
* go(n) 前进/后退 n步
## screen （屏幕）
#### 属性
* width 屏幕宽度
* height 屏幕高度
## navigator （导航）
#### 属性
* userAgent 平台、浏览器相关的信息
* platform 平台
# DOM （文档对象模型）
# 补充
### 浏览器内核
* 内核应该包含 渲染引擎 \ JS引擎
* 渲染引擎负责渲染HTML和CSS， JS引擎负责运行JS
* 现在提到浏览器内核也可以单指渲染引擎
### 常见的浏览器内核
* webkit （chrom safari）
* blink （webkit的改型， chrome、opera）
* trident IE
* Gecko Firfox
* Kestrel 老欧朋
### URL URI 区别
* URI 标准 中包含 URN 和 URL
* URI： 统一资源标示符
* URN：统一资源命名符
* URL： 统一资源定位符
08.31
# 事件基础
### 绑定事件
* 把事件当做HTML元素的属性
`<button onclick="code...">`
* 把事件当做dom对象的方法
`dom.onclick = function(){code....}`
* 事件监听方式
* addEventListener(eventName, fn, true/false)
* attachEvent(eventName, fn)
### 解除事件的绑定
* 绑定方式： 把事件当做html元素属性 / 把事件当做dom对象的方法
重新绑定一个空的function，覆盖前面
* 绑定方式 是 事件监听方式
* removeEventListener(event, fn)
* detachEvent(event, fn)
### this的用法
* 循环给一组元素绑定事件的时候
* 事件作为html元素属性的时候，函数调用，传this表示 该元素
# 事件类型
### 鼠标事件
* click 单击
* dblclick 双击
* contextmenu 右击
* mouseover 鼠标进入元素
* mouseout 鼠标离开元素
* mousedown 鼠标按键按下
* mouseup 鼠标按键抬起
* mousemove 鼠标移动
### 键盘事件
* keydown 键盘按键按下
* keyup 键盘按键抬起
* keypress 键盘按键按下， 并不是所有的按键都可以触发（只有可以输入字符的按键）
# Event 对象
* clientX
* clientY
* keyCode
09.04
# Event对象
### Event种类
* mouseEvent
* keyboardEvent
* focusEvent
### 属性
* clientX
* clientY
* keyCode
* target 具体触发事件的元素
### 方法
* stopPropagation() 阻止冒泡
* preventDefault() 阻止默认动作
### 事件的冒泡和捕获
# 节点
### 节点分类
* document 9
* element 1
* attr 2
* text 3
* comment 8
### 属性
* nodeName
* nodeValue
* nodeType
# 从HTML获取元素
### 通过ID
* getElementById()
* 一个元素具有ID属性，会自动生成与之同名的全局变量
### 通过Name属性
* getElementsByName()
* IE9+ 所有的元素都有name属性
* IE9- 个别元素有name属性
### 通过标签名
* getElementsByTagName()
* docuemnt.images
* document.links
* document.anchors
* document.forms
### 通过class类型
* getElementsByClassName()
* IE9+
### 通过选择器
* document.querySelector()
* document.querySelectorAll()
### document.all
* 文档中所有的元素
# 文档节点的结构
### 节点的关系
* 父节点 父元素
* 子节点 子元素
* 兄弟节点 兄弟元素
* 祖先节点 祖先元素
* 后代节点 后代元素
### 节点相关属性
* parentNode
* childNodes
* firstChild
* lastChild
* nextSibling
* previousSibling
### 元相关元素
* parentElement
* children
* firstElementChild IE9+
* lastElementChild IE9+
* nextElementSibling IE9+
* previousElementSibling IE9+
* childElementCount 子元素的数量 IE9+
* ownerDocument IE9+
09.05
# 属性
### 内置属性
* js对象和html标签有映射关系
### 自定义属性
* getAttribute()
* setAttribute()
* hasAttribute()
* removeAttribute()
### H5新增的自定义属性操作操作
* HTML： `<tag data-attr="">`
* JS ： element.dataset.attr
### 把属性当做属性节点
* getAttributeNode(attrname)
# 元素的内容
### 作为HTML的元素内容
* innerHTML
* outerHTML
### 作为纯文本的元素内容
* innerText 会忽略多余的空格
* textContent IE9+
### 作为Text节点操作
# 元素操作（节点）
### 创建元素
* document.createElement(tagName)
### 添加元素（给父元素添加子元素）
* appendChild(node)
* insertBefore(newNode, oldNode)
### 删除元素
* removeChild(node)
### 替换元素
* replaceChild(newNode, oldNode)
### 克隆节点
* cloneNode(false)
# 元素的尺寸大小
### 元素的位置
* getBoundingClientRect()
* offsetLeft/offsetTop
* clientLeft/clientTop
* offsetParent
### 元素的尺寸
* getBoundingClientRect()
* offsetWidth/offsetHeight
* clientWidth/clientHeight
* scrollWidth/scrollHeight
### 滚动距离
* scrollLeft
* scrollTop
# docuemnt
### 属性
* URL 只读