-
Notifications
You must be signed in to change notification settings - Fork 69
/
Copy path1013-js-2.html
246 lines (228 loc) · 15.7 KB
/
1013-js-2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!doctype html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>葡萄藤PPT</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css">
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? './css/reveal/print/pdf.css' : './css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<img src="./img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>【js-02】</h2>
<h4>常见的DOM操作有哪些？</h4>
<p>分享人：张乾</p>
</section>
<section>
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<h4>什么是DOM？</h4>
<p style="text-align: left;">DOM全称是Document Object Model(文档对象模型)，是为HTML和XML提供的API。那么为什么DOM可以同时提供给HTML和XML编程接口。虽然他们用来标记的标签不同，但是他们本质的结构是相同的。换句话说，按照DOM的标准，HTML和XML都是以标签为结点构造的树结构，DOM将HTML和XML的相同的结构本质抽象出来，然后通过脚本语言，如Javascript，按照DOM里的模型标准访问和操作文档内容。</p>
<p style="text-align: left;">在Chrome浏览器端，单击右键打开View Page Source展示文档结构。通过这种方式可以直观的看到文档当前的内容和结构。DOM则不同，它是提供一个API给编程语言，比如Javascript，通过一系列抽象的方法操作文档的内容，结构和样式。</p>
</section>
<section>
<h4>DOM的组成</h4>
<p style="text-align: left;">对于XML应用开发来说，DOM就是一个对象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范。</p>
<p style="text-align: left;">DOM定义了HTML文档和XML文档的逻辑结构，给出了一种访问和处理这两种文档的方法。文档代表的是数据，而DOM则代表了如何去处理这些数据。</p>
<p style="text-align: left;">作为W3C的标准接口规范，目前，DOM由三部分组成，包括：<b style="color: #000000;">核心（core）</b>、<b style="color: #000000;">HTML接口</b>和<b style="color: #000000;">XML接口</b>。</p>
<p style="text-align: left;">核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。</p>
<p style="text-align: left;">HTML接口和XML接口两部分则是专为操作具体HTML文档和XML文档所提供的高级接口。</p>
</section>
<section>
<h3>DOM树</h3>
<img src="./img/1013-js-2/domTree.png"/>
</section>
<section>
<p style="text-align: left;">要严格区分XML文档树中的根节点与根元素节点：文档（根节点）和根元素节点是两回事。</p>
<p style="text-align: left;">根节点代表整个文档，是我们解析XML文档的入口，通过它获取到Document对象；</p>
<p style="text-align: left;">根元素节点代表XML文档的根元素，必须要在获得Document对象之后才能一层一层地去访问它的元素。</p>
</section>
</section>
<section>
<section>
<h3>2.知识剖析</h3>
</section>
<section>
<h3>DOM的四个基本接口</h3>
<p style="text-align: left;">在DOM接口规范中，有四个基本的接口：Document, Node, NodeList, NamedNodeMap。</p>
<p style="text-align: left;"><b style="color: #000000;">Document</b>:Document接口是对文档进行操作的入口，它是从Node接口继承过来的。 </p>
<p style="text-align: left;"><b style="color: #000000;">Node</b>:Node接口是其他大多数接口的父类。 在DOM树中，Node接口代表了树中的一个节点。</p>
</section>
<section>
<p style="text-align: left;"><b style="color: #000000;">NodeList</b>:NodeList接口是一个节点的集合，它包含了某个节点中的所有子节点。 它提供了对节点集合的抽象定义，并不包含如何实现这个节点集的定义。 NodeList用于表示有顺序关系的一组节点，比如某个节点的子节点序列。 在DOM中，NodeList的对象是live的，对文档的改变，会直接反映到相关的NodeList对象中。</p>
<p style="text-align: left;"><b style="color: #000000;">NamedNodeMap</b>:NamedNodeMap接口也是一个节点的集合，通过该接口，可以建立节点名和节点之间的一一映射关系，从而利用节点名可以直接访问特定的节点，这个接口主要用在属性节点的表示上。 尽管NamedNodeMap所包含的节点可以通过索引来进行访问，但是这只是提供了一种枚举方法，NamedNodeMap所包含的节点集中节点是无序的。 与NodeList相同，在DOM中，NamedNodeMap对象也是live的。</p>
</section>
</section>
<section>
<section>
<h3>常见的DOM操作</h3>
<a href="#no1">1.查找节点</a><br/>
<a href="#no2">2.创建节点</a><br/>
<a href="#no3">3.删除节点</a><br/>
<a href="#no4">4.修改节点</a><br/>
<a href="#no5">5.插入节点</a><br/>
<a href="#no6">6.设置样式</a><br/>
</section>
</section>
<section>
<section id="no1">
<h3>1.查找节点</h3>
<p style="text-align: left;">document.getElementById('id属性值'); 返回拥有指定id的第一个对象的引用</p>
<p style="text-align: left;">document/element.getElementsByClassName('class属性值'); 返回拥有指定class的对象集合</p>
<p style="text-align: left;">document/element.getElementsByTagName('标签名'); 返回拥有指定标签名的对象集合</p>
<p style="text-align: left;">document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合</p>
<p style="text-align: left;">document/element.querySelector('CSS选择器'); 仅返回第一个匹配的元素</p>
</section>
<section>
<p style="text-align: left;">document/element.querySelectorAll('CSS选择器'); 返回所有匹配的元素</p>
<p style="text-align: left;">document.documentElement; 获取页面中的HTML标签</p>
<p style="text-align: left;">document.body; 获取页面中的BODY标签</p>
<p style="text-align: left;">document.all['']; 获取页面中的所有元素节点的对象集合型</p>
</section>
<section id="no2">
<h3>2.创建节点</h3>
<p style="text-align: left;">document.createElement('元素名'); 创建新的元素节点</p>
<p style="text-align: left;">document.createAttribute('属性名'); 创建新的属性节点</p>
<p style="text-align: left;">document.createTextNode('文本内容'); 创建新的文本节点</p>
<p style="text-align: left;">document.createComment('注释节点'); 创建新的注释节点</p>
<p style="text-align: left;">document.createDocumentFragment( ); 创建文档片段节点</p>
</section>
<section id="no3">
<h3>3.删除节点</h3>
<p style="text-align: left;"> parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点</p>
<p style="text-align: left;">element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值</p>
<p style="text-align: left;">element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性</p>
</section>
<section id="no4">
<h3>4.修改节点</h3>
<p style="text-align: left;">parentNode.replaceChild( newChild, existingChild );用新节点替换父节点中已有的子节点</p>
<p style="text-align: left;">element.setAttributeNode( attributeName );若原元素已有该节点，此操作能达到修改该属性值的目的</p>
<p style="text-align: left;">element.setAttribute( attributeName, attributeValue );若原元素已有该节点，此操作能达到修改该属性值的目的</p>
</section>
<section id="no5">
<h3>5.插入节点</h3>
<p style="text-align: left;">parent.appendChild( element/txt/comment/fragment );向父节点的最后一个子节点后追加新节点</p>
<p style="text-align: left;">parent.insertBefore( newChild, existingChild );向父节点的某个特定子节点之前插入新节点</p>
<p style="text-align: left;">element.setAttributeNode( attributeName );给元素增加属性节点</p>
<p style="text-align: left;">element.setAttribute( attributeName, attributeValue );给元素增加指定属性，并设定属性值</p>
</section>
<section id="no6">
<h3>6.设置样式</h3>
<p style="text-align: left;">ele.style.styleName = styleValue;设置ele元素的CSS样式</p>
</section>
</section>
<section>
<h3>3.常见问题</h3>
<p>DOM 和 HTML是一回事吗？</p>
<p>DOM 和 JavaScript什么关系？</p>
<p>书写细节</p>
</section>
<section>
<section>
<h3>4.解决方案</h3>
</section>
<section>
<h3>DOM 和 HTML是一回事吗？</h3>
<p style="text-align: left;">就像很多人把JQuery和Javascript的本质搞混一样，DOM和HTML也完全不是一回事，DOM是一个API，HTML(Hyper Text Markup Language)则是一种标记语言，HTML在DOM的模型标准中被视为对象，DOM只提供编程接口，却无法实际操作HTML里面的内容。</p>
<p style="text-align: left;">但是前端工程师，一般在浏览器端操作HTML。每个Web浏览器都会使用DOM，所以页面可以被脚本语言访问。而所有的浏览器都是以Javascript作为默认的脚本语言。所以HTML在浏览器端基本上可以直接通过DOM模型来操作，通过script标签载入或者直接插入Javascript脚本，通过DOM直接操作浏览器端的HTML文件。正是这种无缝融合，导致DOM和HTML的概念很容易混淆。</p>
</section>
<section>
<h3>DOM 和 JavaScript什么关系？</h3>
<p style="text-align: left;">Javascript可以通过DOM直接访问和操作网页文档的内容，一开始，DOM是为方便Javascript操作设计的API。但其实发展到后来，他们是两个独立的个体。而且Javascript不是唯一可以使用DOM的编程语言，比如python也可以访问DOM。所以DOM不是提供给Javascript的API，也不是Javascript里的API。但JavaScript可以通过DOM访问和操作HTML和XML文档内容。</p>
</section>
<section>
<h3>书写细节</h3>
<p>只有查找ID时element不加<b style="color: #000000;">s</b> ，对新人来说要是不注意细节很可能会书写错误，导致一时半会儿找不到错误所在</p>
<p>getElementById</p>
<p>getElementsByClassName</p>
</section>
</section>
<section>
<h3>5.代码实战</h3>
</section>
<section>
<h3>6.拓展思考</h3>
<p>如何简化写法？</p>
</section>
<section>
<section>
<h3>7.参考文献</h3>
</section>
<section>
<p style="text-align: left;">参考一:JavaScript高级程序设计</p>
<p style="text-align: left;">参考二:<a href="http://www.runoob.com/jsref/dom-obj-document.html" target="_blank">HTML DOM Document 对象</a></p>
</section>
</section>
<section>
<h3>8.更多讨论</h3>
</section>
<section>
<h4>鸣谢</h4>
<p>感谢大家观看</p>
<p><small>BY : 张乾</small></p>
</section>
</div>
</div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: '../plugin/markdown/marked.js' },
{ src: '../plugin/markdown/markdown.js' },
{ src: '../plugin/notes/notes.js', async: true },
{ src: '../plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>