JS基础知识整理2
JS基础
-
- DOM
-
- 查找节点
- 创建节点
- 删除节点
- 替换节点
- 用元素节点操作CSS
- 事件event
-
- 事件的冒泡Bubble
- 事件的委派
- 事件的绑定
- 事件的传播：
- BOM
- 定时器
- JSON
DOM
DOM : Document Object Model 文档对象模型
四类节点：
1.文档节点：整个HTML文档。
2.元素节点：HTML文档中的标签。
3.属性节点：元素的属性。
4.文本节点：标签中的文本。
查找节点
获取元素节点（document调用）
1. getElementById() 通过id属性获取一个元素节点对象
2. getElementsByTagName() 通过标签名来获取一组元素节点对象
3. getElementsByName() 通过name属性获取一组元素节点对象
4. getElementsByClassName() 根据class查找,IE8不兼容
获取节点的子节点（通过元素调用）
1. getElementsByTagName() 返回当前节点的指定标签名后代节点
2. childNodes 表示当前节点的所有子节点
3. firstChild 表示当前节点的第一个子节点
4. lastChild 表示当前节点的最后一个子节点
获取节点的父节点和兄弟节点（通过元素调用）
1. parentNode 获取父节点
2. previousSibling 获取前一个兄弟节点
3. nextSibling 获取后一个兄弟节点
选择器字符串做参数查找节点
1.document.querySelector() 参数为一个选择器字符串，可以根据css选择器来查询一个元素节点对象，但是只会返回第一个满足条件的元素。
2.querySelectorAll() 返回所有符合条件的节点
创建节点
1. 创建元素节点（例：创建 li 元素节点）：
var li = document.createElement(‘li’);
2. 创建文本节点（例：创建 “广州” 文本节点）：
var testText = document.createTextNode(‘广州’);
3. 将一个节点添加到另一个节点中（将文本节点添加到元素节点中）：
li.appendChild(testText);
4.将一个节点插入到另一个节点前面:
父节点.insertBefore(新节点，原子节点);
删除节点
父节点.removeChild(要删除的节点);
替换节点
父节点.replaceChild(新节点，原子节点);
用元素节点操作CSS
修改元素样式：
元素.style.样式名 = 样式值(样式值为字符串)
例：box.style.width = '100px';
如果CSS样式名中存在‘-’，则不合法，需要将其修改为驼峰命名法。
例：box.style.backgroundColor = "red";
事件event
事件
文档或浏览器窗口中发生的一些特定的交互瞬间。JS 与 HTML 之间的交互通过事件实现。
事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数。事件对象封装事件的一切相关信息。IE9以上浏览器及火狐、谷歌浏览器都用event，IE8及以下用window.event。为了兼容，一般都写为event = event || window.event;
绑定事件 ：为元素绑定响应函数。
事件的冒泡Bubble
指事件的向上传导，当后代元素绑定事件被触发时，其祖先元素的相同事件也会被触发。大部分有益，但是通过事件对象可以取消冒泡：event.cancelBubble = true;
事件的委派
将事件绑定给元素的共同祖先元素，通过冒泡，使后代元素也都响应。
事件的绑定
为事件绑定响应函数，只能绑定一个。
同时为一个元素绑定多个响应函数：
普通浏览器：addEventListener(事件的字符串（无on）,回调函数，是否在捕获阶段触发事件（一般为false）)
IE8及以下：attachEvent(事件的字符串（有on）,回调函数)，此函数执行顺序相反（从外向里触发）
事件的传播：
（IE8以下浏览器不适用）
三个阶段：
1. 捕获阶段 从外向里进行捕获，但是不会触发
2. 目标阶段 捕获结束，触发事件
3. 冒泡阶段 从里向外冒泡
BOM
BOM : Browser Object Model 浏览器对象模型,通过JS操作浏览器
BOM对象：
1. Window 整个浏览器窗口
2. Navigator 代表当前浏览器信息，通过它可以识别不同的浏览器
3. Location 代表当前浏览器的地址栏信息
4. History 浏览器历史记录（由于保护隐私，该对象不能获取到具体的历史记录，只能操作浏览器向前或者向后翻页，只在当次访问有效）
5. Screen 用户的屏幕信息
定时器
方法：
1. setInterval(回调函数，调用时间间隔(单位为ms)) 定时调用，可以将一个函数每隔一段时间执行一次，可多次执行。返回Number类型数值。
2. clearInterval(定时器名称) 关闭定时器（可以接受任何类型）
3. setTimeOut() 延时调用，一个函数隔一段时间以后再调用，只执行一次
4. clearTimeOut() 关闭延时调用，用法与定时调用一样
JSON
JSON：JavaScript Object Notation JS对象表示法
1. JSON在开发中用来交互数据。
2. JSON字符串中属性名必须加双引号。
3. JSON是特殊格式的字符串，这个字符串可以被任何语言识别并且可以转换为任意 语言的对象。
4. JSON分类： 1.对象{} 2.数组[]
5. JSON中允许的值：字符串、数值、布尔值、null、对象（只能是普通对象）、数组
6. 方法：
JSON.parse(JSON字符串) 将JSON转换为JS对象
JSON.stringify() 将JS对象转换为JSON