前端工程师必须掌握的知识点

前端工程师必须掌握的知识点

1

、

DOM

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

ntElement

返回文档的根节点

Element

返回当前文档中被击活的标签节点

(ie)

ement

返回鼠标移出的源节点

(ie)

ent

返回鼠标移入的源节点

(ie)

ment

返回激活事件的源节点

(ie)

返回激活事件的源节点

(firefox)

当前对象为

node

返回父节点：

Node, Element,

返回所有子节点：

odes

（包含文本节点及标签节点）

,en

返回第一个子节点：

hild

返回最后一个子节点：

ild

返回同属上一个子节点：

bling

返回同属下一个子节点：

usSibling

parentNode

和

功能一样，

chil dNodes

和

children

功能 一样。但是

parentNode

和

childNodes

是符合

W3C< /p>

标准的，

可以说比较通用。

而另外两个只 是

IE

支持，

不是标准，

Firefox

就不支持

,

所以大家只要记得有

parentE lement

和

children

就行 了

2< /p>

、

DOM

操作——怎样添加、移除、移动 、复制、创建和查找节点。

（

1

）创建新节点

createDocumentFragment()

//

创建 一个

DOM

片段

createElement()

//

创建一个具体的元素

createTextNode()

//

创建一个文本节点

（

2

）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

（

3

）查找

getElementsByTagName()

//

通过标签名称

getElementsByName()

//

通过 元素的

Name

属性的值

getElementById()

//

通过 元素

Id

，唯一性

3

、事件——怎样使用事件以及

IE

和

DOM

事件 模型之间存在哪些主要差别。

（

1< /p>

）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标

(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

中的所有对象，从

d ocument

对象开始，也在

document

对象结束。