Skip to content

Commit b2ed091

Browse files
wangwenjie1314wangwenjie1314
committed
Update README.md
优化显示
1 parent b5d0d00 commit b2ed091

File tree

1 file changed

+113
-111
lines changed

1 file changed

+113
-111
lines changed

‎README.md

Lines changed: 113 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -50,136 +50,138 @@
5050

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

53-
document.documentElement 返回文档的根节点<html>
54-
document.body <body>
55-
document.activeElement 返回当前文档中被击活的标签节点(ie)
56-
event.fromElement 返回鼠标移出的源节点(ie)
57-
event.toElement 返回鼠标移入的源节点(ie)
58-
event.srcElement 返回激活事件的源节点(ie)
59-
event.target 返回激活事件的源节点(firefox)
60-
当前对象为node
61-
返回父节点：node.parentNode, node.parendElement,
62-
返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children
63-
返回第一个子节点：node.firstChild
64-
返回最后一个子节点： node.lastChild
65-
返回同属上一个子节点：node.nextSibling
66-
返回同属下一个子节点：node.previousSibling
67-
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和
68-
childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持
69-
,所以大家只要记得有parentElement和children就行了
53+
document.documentElement 返回文档的根节点<html>
54+
document.body <body>
55+
document.activeElement 返回当前文档中被击活的标签节点(ie)
56+
event.fromElement 返回鼠标移出的源节点(ie)
57+
event.toElement 返回鼠标移入的源节点(ie)
58+
event.srcElement 返回激活事件的源节点(ie)
59+
event.target 返回激活事件的源节点(firefox)
60+
当前对象为node
61+
返回父节点：node.parentNode, node.parendElement,
62+
返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children
63+
返回第一个子节点：node.firstChild
64+
返回最后一个子节点： node.lastChild
65+
返回同属上一个子节点：node.nextSibling
66+
返回同属下一个子节点：node.previousSibling
67+
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和
68+
childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持
69+
,所以大家只要记得有parentElement和children就行了
7070

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

73-
（1）创建新节点
74-
createDocumentFragment() //创建一个DOM片段
75-
createElement() //创建一个具体的元素
76-
createTextNode() //创建一个文本节点
77-
（2）添加、移除、替换、插入
78-
appendChild()
79-
removeChild()
80-
replaceChild()
81-
insertBefore()
82-
（3）查找
83-
getElementsByTagName() //通过标签名称
84-
getElementsByName() //通过元素的Name属性的值
85-
getElementById() //通过元素Id，唯一性
73+
（1）创建新节点
74+
createDocumentFragment() //创建一个DOM片段
75+
createElement() //创建一个具体的元素
76+
createTextNode() //创建一个文本节点
77+
（2）添加、移除、替换、插入
78+
appendChild()
79+
removeChild()
80+
replaceChild()
81+
insertBefore()
82+
（3）查找
83+
getElementsByTagName() //通过标签名称
84+
getElementsByName() //通过元素的Name属性的值
85+
getElementById() //通过元素Id，唯一性
8686

8787
3、事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
8888

89-
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
90-
IE 5.5: div -> body -> document
91-
IE 6.0: div -> body -> html -> document
92-
Mozilla 1.0: div -> body -> html -> document -> window
93-
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
94-
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
95-
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
89+
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
90+
IE 5.5: div -> body -> document
91+
IE 6.0: div -> body -> html -> document
92+
Mozilla 1.0: div -> body -> html -> document -> window
93+
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，
94+
然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
95+
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，
96+
但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
97+
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
9698

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

99-
XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。
100-
101-
<script type="text/javascript">
102-
varxmlhttp;
103-
functionloadXMLDoc(url){
104-
xmlhttp=null;
105-
if(window.XMLHttpRequest){ //code for all new browsers
106-
xmlhttp=newXMLHttpRequest();
107-
}elseif(window.ActiveXObject){ //code for IE5 and IE6
108-
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
109-
}
110-
if(xmlhttp!=null){
111-
xmlhttp.onreadystatechange=state_Change;
112-
xmlhttp.open("GET",url,true);
113-
xmlhttp.send(null);
114-
}else{
115-
alert("Your browser does not support XMLHTTP.");
116-
}
117-
}
118-
119-
functionstate_Change(){
120-
if(xmlhttp.readyState==4){ //4 = "loaded"
121-
if(xmlhttp.status==200){ //200 = OK
122-
//...our code here...
123-
}else{
124-
alert("Problem retrieving XML data");
125-
}
126-
}
127-
}
128-
</script>
101+
XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。
102+
103+
<script type="text/javascript">
104+
varxmlhttp;
105+
functionloadXMLDoc(url){
106+
xmlhttp=null;
107+
if(window.XMLHttpRequest){ //code for all new browsers
108+
xmlhttp=newXMLHttpRequest();
109+
}elseif(window.ActiveXObject){ //code for IE5 and IE6
110+
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
111+
}
112+
if(xmlhttp!=null){
113+
xmlhttp.onreadystatechange=state_Change;
114+
xmlhttp.open("GET",url,true);
115+
xmlhttp.send(null);
116+
}else{
117+
alert("Your browser does not support XMLHTTP.");
118+
}
119+
}
120+
121+
functionstate_Change(){
122+
if(xmlhttp.readyState==4){ //4 = "loaded"
123+
if(xmlhttp.status==200){ //200 = OK
124+
//...our code here...
125+
}else{
126+
alert("Problem retrieving XML data");
127+
}
128+
}
129+
}
130+
</script>
129131

130132
5、严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
131133

132-
在标准模式中，浏览器根据规范呈现页面；
133-
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
134-
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
135-
对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过
136-
渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
134+
在标准模式中，浏览器根据规范呈现页面；
135+
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
136+
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
137+
对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过
138+
渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
137139

138140
6、盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。
139141

140-
一个元素盒模型的层次从内到外分别为：内边距、边框和外边距
141-
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
142+
一个元素盒模型的层次从内到外分别为：内边距、边框和外边距
143+
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
142144

143145
7、块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
144146

145-
块级元素，用CSS中的display:inline;属性则变为行内元素
146-
行内元素，用CSS中的display:block;属性则变为块级元素
147-
影响：周围元素显示在同一行或换行显示，根据具体情况调整样式
147+
块级元素，用CSS中的display:inline;属性则变为行内元素
148+
行内元素，用CSS中的display:block;属性则变为块级元素
149+
影响：周围元素显示在同一行或换行显示，根据具体情况调整样式
148150

149151
8、浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
150152

151-
需要浮动的元素可使用CSS中float属性来定义元素的浮动位置，left：往左浮动，right：往右浮动
152-
浮动元素引起的问题：
153-
（1）父元素的高度无法被撑开，影响与父元素同级的元素
154-
（2）与浮动元素同级的非浮动元素会跟随其后
155-
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
156-
解决方法：
157-
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
158-
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
159-
.clearfix{display: inline-block;} /* for IE/Mac */
153+
需要浮动的元素可使用CSS中float属性来定义元素的浮动位置，left：往左浮动，right：往右浮动
154+
浮动元素引起的问题：
155+
（1）父元素的高度无法被撑开，影响与父元素同级的元素
156+
（2）与浮动元素同级的非浮动元素会跟随其后
157+
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
158+
解决方法：
159+
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
160+
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
161+
.clearfix{display: inline-block;} /* for IE/Mac */
160162

161163
9、HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
162164

163-
主要区别：
164-
XHTML 元素必须被正确地嵌套
165-
XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
166-
XHTML 标签名必须用小写字母
167-
XHTML 文档必须拥有根元素
168-
XHTML 文档要求给所有属性赋一个值
169-
XHTML 要求所有的属性必须用引号""括起来
170-
XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示
171-
XHTML 文档不要在注释内容中使“--”
172-
XHTML 图片必须有说明文字
173-
XHTML 文档中用id属性代替name属性
165+
主要区别：
166+
XHTML 元素必须被正确地嵌套
167+
XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
168+
XHTML 标签名必须用小写字母
169+
XHTML 文档必须拥有根元素
170+
XHTML 文档要求给所有属性赋一个值
171+
XHTML 要求所有的属性必须用引号""括起来
172+
XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示
173+
XHTML 文档不要在注释内容中使“--”
174+
XHTML 图片必须有说明文字
175+
XHTML 文档中用id属性代替name属性
174176

175177
10、JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
176178

177-
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
178-
JSON建构于两种结构：
179-
“名称/值”对的集合（A collection of name/value
180-
pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表
181-
（hash table），有键列表（keyed list），或者关联数组 （associative array）。
182-
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。
179+
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
180+
JSON建构于两种结构：
181+
“名称/值”对的集合（A collection of name/value
182+
pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表
183+
（hash table），有键列表（keyed list），或者关联数组 （associative array）。
184+
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。
183185
184186

185187
**备注：**
@@ -195,14 +197,14 @@
195197

196198
- Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
197199

198-
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，
199-
用什么文档类型 规范来解析这个文档。
200-
201-
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
202-
203-
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
204-
205-
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
200+
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，
201+
用什么文档类型 规范来解析这个文档。
202+
203+
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
204+
205+
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
206+
207+
（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
206208

207209
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
208210

0 commit comments

Comments
 (0)