共计 7941 个字符，预计需要花费 20 分钟才能阅读完成。
1、DOM 结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
1、包含与被包含
A.contains(B)检测 B 节点是否是 A 节点的子节点，返回布尔值
2、父与子
获取父节点：node.parentNode,node.parentElement, 两者区别在于后者只能获取元素
获取子节点：childNodes(NodeList 对象存在的子节点集合),firstChild,lastChild
3、同辈（兄弟节点）nextSibling,previousSibling
4、Element Travel API 给 DOM 添加的属性
childElementCount,firstElementChild,lastElementChild,nextElementSilbling,previousElementSibling, 他们与之前的方法的区别是多了 Element，保证只返回元素节点，而之前的方法普通的文本节点及注释节点也会返回，之前的方法在非 IE 浏览器中还会把元素之间的空白符当文本节点返回
5、children 属性
与 childNodes 不同的地方在于：children 只包含元素子节点
2、DOM 操作 —— 如何添加、移除、移动、复制、创建和查找节点等。
1、创建新节点
createDocumentFragment() 创建一个 DOM 片段
creatElement() 创建一个具体的元素
creatTextNode() 创建一个文本节点
2、添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore() 在已有的子节点前插入一个新的子节点
3、查找
getElementsByTagName() 通过标签名称
getElementsByName() 通过元素的 name 属性的值
getElementById() 通过元素 id，唯一性
3、事件 —— 如何使用事件，以及 IE 和标准 DOM 事件模型之间存在的差别。
1、关于事件流（1）ie 事件流：事件冒泡
由事件的目标 (event.srcElement) 接受事件，然后逐级向上(例如：下一个为包含 event.srcElement 的节点传递事件，直到文档节点 document)
(2) 其他浏览器支持的另一种事件流：事件捕获
与事件冒泡正好相反，文档节点 document 先监听到事件，然后把事件逐级向下传递事件，直到节点目标节点 event.target
(3) dom 事件流
dom2 级事件规范的事件流综合了以上两种，把事件流分为了以下三个阶段：一、事件捕获阶段：不涉及事件目标，或者说这个阶段在目标之前就结束了
二、处于目标阶段：被看作冒泡阶段的一部分，所以可以在冒泡阶段在目标事件上操作事件
三、事件冒泡阶段
(4) 规范和浏览器实现的差别
dom2 级事件规范的捕获阶段，事件从文档节点 document 开始传播，现代浏览器大多数是从 window 对象开始传播事件的
dom2 级事件规范捕获阶段不涉及事件目标，现代浏览器大多数都在这个阶段包含事件目标
2、如何使用事件？以下几种用来响应事件的事件处理程序
html 事件处理程序 |dom0 级事件处理程序 |dom2 级事件处理程序 |ie 的事件处理程序
html 事件处理程序：指定事件：<button type="button" onclick="alert(' 响应事件的处 javascript 代码，可以用全局的函数 ')">Click Me!</button>
优缺点: 简单，但是与 HTML 代码紧密耦合，更改不方便;
删除事件: 同 DOM0 的删除事件处理方式;
dom0 级事件处理程序
指定事件：document.onclick = function(){alert("document has been clicked")};
优缺点: 简单且跨浏览器
删除事件:document.onclick = null;
实质: 为元素指定方法(栗子中为 document 指定 onclick 方法)，移除方法，所以其处理程序是在元素的作用域运行的；dom2 级事件处理程序：指定事件:addEventListener("引号括起来的事件名"，触发事件后调用的事件处理程序, 是否在捕获节点调用时间处理程序的布尔值)
栗子:var funA = function(){alert("DOM2 级事件处理程序")};
document.addEventListener("click", funA, false);
删除事件: document.removeEventListener("click", funA, false);
如果指定的处理程序是匿名函数则不能删除，因为没有函数名;
优缺点: 可以添加多个监听事件，缺点必须指定函数名才能删除
ie 事件处理程序（IE11 以下，IE11 及 Edge 用的 DOM2 级事件处理程序）指定事件: attachEvent("onclick", function(){alert("is no longer supported in ie11")});
删除事件: detachEvent("onclick", funA);
如果指定的处理程序是匿名函数则不能删除，因为没有函数名;
优缺点: 可以添加多个监听事件，缺点必须指定函数名才能删除
3、ie 和标准 dom 事件模型之间存在的差别
这里的 IE 是 IE11 以下;
参数的差别: attachEvent()的第一个参数比 addEventListener()的事件名多一个 "on"，且没有第三个参数，因为 IE 事件模型只支持冒泡事件流;
事件处理函数作用域的区别: IE 中事件处理程序处于全局作用域，其内的 this 会指向 window; 而用 DOM（0 或 2）级事件的事件处理程序的作用域是元素作用域，其内的 this 指向其所属的元素
例：document.addEventListener("click", function(){if(this == document){alert("此时 this 指向 document");
}
}, false);
事件对象 event 的属性方法的差别
IE DOM
cancelBubble = true stopPropagation() // 停止冒泡
returnValue = false preventDefault() // 阻止元素默认事件
srcEelement target // 事件目标
4、XMLHttpRequest —— 这是什么、怎样完整地执行一次 GET 请求、怎样检测错误。
1、关于 XMLHttpRequest
作用：提供了网页加载后在后台与服务器通信的方法; 实现 AJAX 通信;
创建: var xhr = new XMLHttpRequest();// 不适用于 IE7 之前的版本，其他低版本 IE 可通过 ActiveXObject 构造;
readyState, 可取的值见图
对象事件: readyState 的值的改变会触发 readyStatechange 事件; 错误会触发 error 事件；优缺点: 在不重新加载页面的情况下更新网页;
XMLHttpRequest 2 级:
FromData 对象: 用来序列化表单或者创建与表单格式相同的数据; 其实例可直接传给 send()方法使用;
例：var form1 = document.forms[0];
xhr.send(new FormData(form1));
2、一次 GET 请求分析, 并检测执行过程
异步 GET
var xhr = new XMLHttpRequest();xhr.onerror = function(){alert(“ 我出错啦 ”)};
xhr.onreadystatechange = function(){
switch(xhr.readyState){case 0 : alert("未初始化，及还未调用 open 方法");
break;
case 1 : alert("启动，未调用 send 方法");
break;
case 2 : alert("发送，未收到响应");
break;
case 3 : alert("接受，取得部分数据");
break;
case 4 : if((xhr.status >=200 && xhr.status < 300) || xhr.status ==304){alert(xhr.responceText);
};
break;
default : alert("are you kidding?");
}
};
xhr.open("get", "url", true)// 启动一个请求，未发送
xhr.send(null);// 发送请求. 如果该请求是异步模式(默认), 该方法会立刻返回. 相反, 如果请求是同步模式, 则直到请求的响应完全接受以后, 该方法才会返回
XMLHttpRequest.readyState 可取的值：
5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
Doctype：(Document Type)文档类型，它位于文档中最前面的位置，处于标签之前。如果你想制作符合标准的页面，一个必不可少的关键组成部分就是 DOCTYPE 的声明。确定了正确的 Doctype，xhtml 里面的标识和 css 才能正常生效(也就是说它会很负责地告诉浏览器怎么解释你的这个标签和你写的 css)。既然它是一种声明，它的责任就是告诉浏览器文档使用哪种 html 或者 xhtml 规范。为了获取正确的 Doctype 声明，关键就是让 dtd 与文档所遵循的标准对应。例如：假定文档遵循的是 xhtml 1.0 strict, 那么文档的 Doctype 声明就应该是相应的 dtd, 如果 Doctype 声明指定的是 xhtml dtd，但文档包含的依旧是 html 标记就是不恰当的。类似的，如果文档包含的是 xhtml 1.0 strict 标记，但是 Doctype 声明指定是 html dtd 也是不恰当的。
一、选择什么样的 DOCTYPE?
xhtml 1.0 中有 3 种 dtd 声明可以选择，过渡性的(Transitional)、严格的(Strict)、框架的(Frameset)。下面我们来分别介绍：
1、过渡的：一种要求不很严格的，允许在 html 中使用 html 4.01 的标识(符合 xhtml 语法标准)，过渡的 dtd 写法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2、严格的：一种要求严格的 dtd，不允许使用任何表现层的标识和属性，严格的 dtd 写法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3、框架的：一种专门针对框架页面所使用的 dtd，当页面中含有框架元素时，就要采用这种 dtd，写法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">PS：使用严格的 dtd 来制作页面当然是最理想的方式，但是对于还没有深入了解 web 标准的网页设计者，比较适合用过渡的 dtd，因为这种 dtd 还允许使用表现层的标识、元素和属性，比较适合大多数的网页制作人员 (当然量力而为了!)
二、什么是标准模式与混杂模式？
不同文档模式主要影响 CSS 内容的呈现，尤其是浏览器对盒模型的解析，但在某些情况下也会影响到 JavaScript 的解释执行。
1、文档模式目前有四种：
混杂模式（quirks mode）// 让 IE 的行为与（包含非标准特性的）IE5 相同
标准模式（standards mode）// 让 IE 的行为更接近标准行为
准标准模式（almost standards mode）// 这种模式下的浏览器特性有很多都是符合标准的，不标准的地方主要体现在处理图片间隙的时候（在表格中使用图片时问题最明显）。
超级标准模式 //IE8 引入的一种新的文档模式，超级文档模式可以让 IE 以其所有版本中最符合标准的方式来解释网页内容。
ps：
总的来看，混杂模式让 IE 像 IE5，标准模式使用 IE7 的呈现引擎，而超级标准模式则是 IE8 的默认文档模式。
2、两种模式间的差异
对于这两种模式之间的差异，最显著的一个例子与 Windows 上 IE 专有的盒模型有关。在 IE 6 出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对 IE 5 和更低版本的向后兼容性，Opera 7 和更高版本也在混杂模式中使用有缺点的 IE 盒模型。
呈现方面的其他差异比较小，而且是与特定浏览器相关的，包括对于十六进制颜色值不需要 #号、假设 CSS 中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增加一级。
3、如何触发两种模式
DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。
触发严格模式:
<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
触发混杂模式
<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
IE8 关闭超标准模式
<meta http-equiv="X-UA-Compatible" content="IE=7" />
content 属性中 IE 的值用于指定使用哪个版本的呈现引擎来呈现页面。设计这个值的目的就是为了向后兼容那些专门为老版本的 IE 设计的站点和页面。6、盒模型 —— 外边距、内边距和边框之间的关系，及 IE8 以下版本的浏览器中的盒模型
1、w3c 盒模型（标准盒模型）
通过在文档顶部加 doctype 声明就会按.W3C 盒模型显示; 整体见下图
2、ie8 以下版本的浏览器中的盒模型（ie 盒子模型）
IE8 以下浏览器的盒模型中定义的元素的宽高包括内边距和边框
设置 box-sizing：border-box 可以让宽度高度包含 border 盒 padding
7、块级元素与行内元素 —— 怎么用 CSS 控制它们、以及如何合理的使用它们
1. 块级元素：每个块级元素默认占一行高度，若有块级元素则同行无法再添加其他元素（float 浮动除外）
特点：高度行高以及外边距内边距都可控制 宽度默认 100% 可以容纳内联元素及块元素
2. 行内元素：可以和其他元素都在一行上.
特点：宽度就是它的文本或图片的宽度，不可改变 内联元素只能容纳文本或者其他的内联元素 设置宽度 width 无效 设置高度 height 无效，可通过 line-height 来设置 设置 margin 只有左右有效，上下无效 设置 padding 只有左右 padding 有效，上下无效
3. 行内块状元素：综合了行内元素与块状元素的特性，但是各有取舍
特点：不自动换行 能够识别宽高 默认排列方式从左到右
4. 块级元素有哪些：div | dl(定义列表) | h1(h 开头系列) | hr | menu | ol | p | table | ul
5. 行内元素有哪些：a | b | br | em | i | img | input | label | select | span | strong|sub | textarea | u
6. 行内块状元素有哪些：button | del | iframe | ins | map | object
块级元素，用 CSS 中的 display:inline; 属性则变为行内元素
行内元素，用 CSS 中的 display:block; 属性则变为块级元素
影响：周围元素显示在同一行或换行显示，根据具体情况调整样式
8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。
需要浮动的元素可使用 CSS 中 float 属性来定义元素的浮动位置，left：往左浮动，right：往右浮动
浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：使用 CSS 中的 clear:both; 属性来清除元素的浮动可解决 2、3 问题，对于问题 1，添加如下样式，给父元素添加 clearfix 样式：
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
9、HTML 与 XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由。
主要区别：
XHTML 元素必须被正确地嵌套
XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
XHTML 标签名必须用小写字母
XHTML 文档必须拥有根元素
XHTML 文档要求给所有属性赋一个值
XHTML 要求所有的属性必须用引号 "" 括起来
XHTML 文档需要把所有 <、>、& 等特殊符号用编码表示
XHTML 文档不要在注释内容中使“--”XHTML 图片必须有说明文字
XHTML 文档中用 id 属性代替 name 属性10、JSON —— 作用、用途、设计结构。
作用用途：
可以转换为任意语言中的对象，json 在开发中的主要用来数据的交互。
json 和 js 对象格式一样，只不过 json 字符串中的属性名必须加双引号其他得和 js 语法一致；是一种基于文本，独立于语言的轻文本交换格式，易于人的阅读和编写，也易于机器的解析和生成
用法：
json 写法（结构）：
var json1 = {
"username":"smally",
"age":20
}
var json2 = [{"username":"smally","age":20},
{"username":"liuteng","age":20},
{"username":"lizhongshuo","age":20}
]json 中允许的值，
1. 字符串
2. 数值
3. 布尔值
4.null
5. 对象
6. 数组json 转化为 js 对象用 parse 方法
var o=JSON.parse(json);
console.log(o.name);js 对象转化为 json
JSON.stringify()
