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    只读
* domain   只读
* referrer   只读
* lastModified   文档的最后一次修改时间    只读
* location  对location对象引用
* title    文档标题


### 方法
* write()
* writinln()


# 表单DOM
### Form元素
* submit()
* reset()
* elements

### 按钮(submit reset button)
* click()
* blur()
* focus()

### 单选/复选
* click()
* blur()
* focus()


### 文本(input textarea)
* blur()
* focus()
* select()


### select
* add()  新增选项