作为一名前端工程师,无论工作年头长短都应该掌握的知识点:(摘录)

 1、DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。        document.documentElement     返回文档的根节点<html>         document.body     <body>         document.activeElement 返回当前文档中被击活的标签节点(ie)         event.fromElement        返回鼠标移出的源节点(ie)         event.toElement       返回鼠标移入的源节点(ie)         event.srcElement     返回激活事件的源节点(ie)         event.target         返回激活事件的源节点(firefox)         当前对象为node         返回父节点:node.parentNode, node.parendElement,         返回所有子节点:node.childNodes(包含文本节点及标签节点),node.children        返回第一个子节点:node.firstChild         返回最后一个子节点: node.lastChild         返回同属上一个子节点:node.nextSibling         返回同属下一个子节点:node.previousSibling         parentNode和parentElement功能一样,childNodes和children功能一样。但是parentNode和        childNodes是符合W3C标准的,可以说比较通用。而另外两个只是IE支持,不是标准,Firefox就不支持         所以大家只要记得有parentElement和children就行了 

2、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。(1)创建新节点      createDocumentFragment()    //创建一个DOM片段      createElement()   //创建一个具体的元素      createTextNode()   //创建一个文本节点(2)添加、移除、替换、插入      appendChild()      removeChild()      replaceChild()      insertBefore()(3)查找      getElementsByTagName()    //通过标签名称      getElementsByName()    //通过元素的Name属性的值      getElementById()    //通过元素Id,唯一性

3、事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。(1)冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。         IE 5.5: div -> body -> document    IE 6.0: div -> body -> html -> document    Mozilla 1.0: div -> body -> html -> document -> window(2)捕获型事件(event capturing):事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。(3)DOM事件流:同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及DOM中的所有对象,从document对象开始,也在document对象结束。    DOM事件模型最独特的性质是,文本节点也触发事件(在IE中不会)。

4、XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。  XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。

<script type="text/javascript">    varxmlhttp;    functionloadXMLDoc(url){        xmlhttp=null;        if(window.XMLHttpRequest){    //code for all new browsers            xmlhttp=newXMLHttpRequest();        }elseif(window.ActiveXObject){    //code for IE5 and IE6            xmlhttp=newActiveXObject("Microsoft.XMLHTTP");        }        if(xmlhttp!=null){            xmlhttp.onreadystatechange=state_Change;               xmlhttp.open("GET",url,true);            xmlhttp.send(null);        }else{            alert("Your browser does not support XMLHTTP.");        }}

functionstate_Change(){    if(xmlhttp.readyState==4){    //4 = "loaded"        if(xmlhttp.status==200){    //200 = OK            //...our code here...        }else{            alert("Problem retrieving XML data");        }    }}</script>

5、严格模式与混杂模式——如何触发这两种模式,区分它们有何意义。      在标准模式中,浏览器根据规范呈现页面;      在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。      浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE,那么它一般以标准模式      呈现。对于HTML4.01文档,包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

6、盒模型——外边距、内边距和边框之间的关系,IE 8以下版本的浏览器中的盒模型有什么不同。    一个元素盒模型的层次从内到外分别为:内边距、边框和外边距    IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框

7、块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。     块级元素,用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(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。  JSON建构于两种结构:  “名称/值”对的集合(A collection of name/value pairs)。   不同的语言中,它被理解为对象(object),纪录(record),结构(struct),字典(dictionary),哈希表(hash table)               有键列表(keyed list),或者关联数组 (associative array)。                值的有序列表(An ordered list of values)。在大部分语言中,它被理解为数组(array)。
时间: 2024-08-02 06:58:43

作为一名前端工程师,无论工作年头长短都应该掌握的知识点:(摘录)的相关文章

如何成为一名优秀的Web前端工程师?

何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript!它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性.组件的易用性.分层语义模板和浏览器分级支持等.随着近两三年来RIA(Rich Internet Applications的缩写,中文含义为:丰富的因特网应用程

成为一名优秀的web前端工程师都需要做些什么?

程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种:    第一种一直在问:如何学习前端?    第二种总说:前端很简单,就那么一点东西.     我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师.    如果成为一名优秀的web前端工程师(前端攻城师)? 何为:前端工程师?前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript!它要求前端开发工程师

如何成为一名优秀的web前端工程师[转]

程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业. Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础

如何做一名优秀、甚至卓越的WEB前端工程师

程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业. Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础

如何成为一名优秀的web前端工程师(前端攻城师)?

我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业. Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括

浅谈如何做一名优秀的WEB前端工程师

浅谈如何做一名优秀的WEB前端工程师 随着近两三年来RIA(Rich Internet Applications的缩写,中文含义为:丰富的因特网应用程序)的流行和普及,前端开发这个行业也开始备受关注. 前端开发的入门门槛其实很低,与服务器端语言先慢后快的学习曲线相比,前端开发的学习曲线是先快后慢.Web前端开发核心技术主要包括HTML.CSS.JavaScript等.HTML仅仅是简单的标记语言!CSS 只是无类型的样式修饰语言.当然可以勉强算作弱类型语言.Javascript 的基础部分相对来

如何成为一名优秀的web前端工程师(转给自己,共勉)

来源:王子墨的博客 程序设计之道无远弗届,御晨风而返.———— 杰佛瑞 · 詹姆士 我所遇到的前端程序员分两种: 第一种一直在问:如何学习前端? 第二种总说:前端很简单,就那么一点东西. 我从没有听到有人问:如何做一名优秀.甚至卓越的WEB前端工程师. 何为:前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业. Web前端开发技术主要包括三个要素:HTML.CSS和JavaScript! 它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.S

物联网浪潮之下,前端工程师如何迎刃而上?

经历了过去几年的发展,Node.js.Angular.js.Vue.js 等前端主流技术框架填补了原有技术的空白与不足,日渐趋于成熟.然而信息时代的来临,任何的技术不会趋于稳定而止于脚下,现如今物联网.人工智能.虚拟现实等新领域的出现,意味着前端下一风口的来临,新的技术革新与发展机遇悄然而至.在火热的物联网浪潮之下,作为一名前端开发工程师,如何迎接这一风口?JavaScript.Python 等脚本语言又会与物联网碰撞出怎样的火花?真正的转型需要学习什么样的新技能?未来发展前景如何?基于此,我们

大数据浪潮下的前端工程师

流形 链接来源 马云曾经说过『人类正从IT时代走向DT时代』. 正如他说言,今天几乎所有的互联网公司背后都有一支规模庞大的数据团队和一整套数据解决方案作决策, 这个时代已经不是只有硅谷巨头才玩数据的时代,是人人都在依赖着数据生存,可以说如今社会数据价值已经被推到前所未有的高度. 我作为一名前端工程师在阿里巴巴数据团队工作多年,深入了解数据生产加工链路与产品化.我们这群前端是与界面最近的工程师们, 似乎与数据离得很远,对于我们来说与数据有些怎样连接呢. 完整数据链路 首先,我用直观的一张图绘制出数