前端工程师必备基础知识

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;属性则变为块级元素

影响：周围元素显示在同一行或换行显示，根据具体情况调整样式

广州VI设计公司https://www.houdianzi.com

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()