前端必备基础

时间  2019-12-06
标签 前端 必备 基础 繁體版
原文   原文链接

一、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。javascript

一、包含与被包含
A.contains(B)检测B节点是不是A节点的子节点，返回布尔值
二、父与子
获取父节点：node.parentNode,node.parentElement,二者区别在于后者只能获取元素
获取子节点：childNodes(NodeList对象存在的子节点集合),firstChild,lastChild
三、同辈（兄弟节点）
nextSibling,previousSibling
四、Element Travel API给DOM添加的属性
childElementCount,firstElementChild,lastElementChild,nextElementSilbling,previousElementSibling,他们与以前的方法的区别是多了Element，保证只返回元素节点，而以前的方法普通的文本节点及注释节点也会返回，以前的方法在非IE浏览器中还会把元素之间的空白符当文本节点返回
五、children属性
与childNodes不一样的地方在于：children只包含元素子节点

二、DOM操做 —— 如何添加、移除、移动、复制、建立和查找节点等。css

一、建立新节点
createDocumentFragment()  建立一个DOM片断
creatElement()   建立一个具体的元素
creatTextNode()   建立一个文本节点
二、添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()  在已有的子节点前插入一个新的子节点
三、查找
getElementsByTagName()  经过标签名称
getElementsByName()  经过元素的name属性的值
getElementById()  经过元素id，惟一性

三、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差异。html

一、关于事件流
（1）ie事件流：事件冒泡
  由事件的目标(event.srcElement)接受事件，而后逐级向上(例如：下一个为包含event.srcElement的节点传递事件，直到文档节点document)
 (2) 其余浏览器支持的另外一种事件流：事件捕获
  与事件冒泡正好相反，文档节点document先监听到事件，而后把事件逐级向下传递事件，直到节点目标节点event.target
 (3) dom事件流
   dom2级事件规范的事件流综合了以上两种，把事件流分为了如下三个阶段：
   
   1、事件捕获阶段：不涉及事件目标，或者说这个阶段在目标以前就结束了
   2、处于目标阶段：被看做冒泡阶段的一部分，因此能够在冒泡阶段在目标事件上操做事件
   3、事件冒泡阶段
  (4) 规范和浏览器实现的差异
    dom2级事件规范的捕获阶段，事件从文档节点document开始传播，现代浏览器大多数是从window对象开始传播事件的
    dom2级事件规范捕获阶段不涉及事件目标，现代浏览器大多数都在这个阶段包含事件目标
二、如何使用事件？如下几种用来响应事件的事件处理程序
   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);
       若是指定的处理程序是匿名函数则不能删除，由于没有函数名;
       优缺点:能够添加多个监听事件，缺点必须指定函数名才能删除
三、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 //事件目标

四、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。java

一、关于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));
二、一次GET请求分析,并检测执行过程
   异步GET
   var xhr = new XMLHttpRequest();

xhr.onerror = function(){alert("我出错啦")};
xhr.onreadystatechange = function(){node

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可取的值：

clipboard.png

五、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。
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也是不恰当的。
1、选择什么样的DOCTYPE?
xhtml 1.0中有3种dtd声明能够选择，过渡性的(Transitional)、严格的(Strict)、框架的(Frameset)。下面咱们来分别介绍：
一、过渡的：一种要求不很严格的，容许在html中使用html 4.01的标识(符合xhtml语法标准)，过渡的dtd写法以下：web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、严格的：一种要求严格的dtd，不容许使用任何表现层的标识和属性，严格的dtd写法以下：json

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

三、框架的：一种专门针对框架页面所使用的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还容许使用表现层的标识、元素和属性，比较适合大多数的网页制做人员(固然量力而为了!)
2、什么是标准模式与混杂模式？
不一样文档模式主要影响CSS内容的呈现，尤为是浏览器对盒模型的解析，但在某些状况下也会影响到JavaScript的解释执行。
一、文档模式目前有四种：
混杂模式（quirks mode）//让IE的行为与（包含非标准特性的）IE5相同
标准模式（standards mode）//让IE的行为更接近标准行为
准标准模式（almost standards mode）//这种模式下的浏览器特性有不少都是符合标准的，不标准的地方主要体如今处理图片间隙的时候（在表格中使用图片时问题最明显）。
超级标准模式 //IE8引入的一种新的文档模式，超级文档模式可让IE以其全部版本中最符合标准的方式来解释网页内容。
ps：
总的来看，混杂模式让IE像IE5，标准模式使用IE7的呈现引擎，而超级标准模式则是IE8的默认文档模式。
二、两种模式间的差别
对于这两种模式之间的差别，最显著的一个例子与Windows上IE专有的盒模型有关。在IE 6出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。浏览器

呈现方面的其余差别比较小，并且是与特定浏览器相关的，包括对于十六进制颜色值不须要#号、假设CSS中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增长一级。服务器

三、如何触发两种模式
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设计的站点和页面。

六、盒模型 —— 外边距、内边距和边框之间的关系，及IE8如下版本的浏览器中的盒模型
一、w3c盒模型（标准盒模型）
经过在文档顶部加doctype声明就会按.W3C盒模型显示;总体见下图

clipboard.png
二、ie8如下版本的浏览器中的盒模型（ie盒子模型）
IE8如下浏览器的盒模型中定义的元素的宽高包括内边距和边框
设置box-sizing：border-box可让宽度高度包含border盒padding

clipboard.png

七、块级元素与行内元素 —— 怎么用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;属性则变为块级元素
影响：周围元素显示在同一行或换行显示，根据具体状况调整样式

八、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。
须要浮动的元素可以使用CSS中float属性来定义元素的浮动位置，left：往左浮动，right：往右浮动
浮动元素引发的问题：
（1）父元素的高度没法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素以前的元素也须要浮动，不然会影响页面显示的结构
解决方法：使用CSS中的clear:both;属性来清除元素的浮动可解决二、3问题，对于问题1，添加以下样式，给父元素添加clearfix样式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;}  /* for IE/Mac */

九、HTML与XHTML —— 两者有什么区别，你以为应该使用哪个并说出理由。
主要区别：

XHTML 元素必须被正确地嵌套
 XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
 XHTML 标签名必须用小写字母
 XHTML 文档必须拥有根元素
 XHTML 文档要求给全部属性赋一个值
 XHTML 要求全部的属性必须用引号""括起来
 XHTML 文档须要把全部 < 、>、& 等特殊符号用编码表示
 XHTML 文档不要在注释内容中使“--”
 XHTML 图片必须有说明文字
 XHTML 文档中用id属性代替name属性

十、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()
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程