[鼠年全马铁人挑战] Week10 - JavaScript基础学习心得 part4

终于来到第10週, 算是达到一个里程碑了~!!

这週要来写DOM元素及驱动它的Selector选择器~
这边提到两个名词 - DOM元素 及 选择器(Selector)

什么是DOM?

文件物件模型（英语：Document Object Model，缩写DOM），是W3C组织推荐的处理可延伸标示语言的标準程式介面。
-- 维基百科-文件物件模型

维基百科讲的好文言文, 考试可能会考吧? 还好我已经毕业很久了xD
我自己是将DOM直接理解为html标籤元素, 而对DOM做操作就是对html标籤元素做操作的意思, 这样可能比较好懂

---

什么是选择器(Selector)?

要对DOM元素做操作之前, 我们必须透过选择器, 去选择要对哪个元素操作
选择器的话, 在JavaScript的世界中有多种方法, 如下:

getElementById: 根据传入的Id来对应到指定的元素getElementsByClassName: 根据传入的ClassName来对应到指定的元素getElementsByName: 根据传入的Name来对应到指定的元素getElementsByTagName: 根据传入的TagName来对应到指定的元素querySelector: 根据传入的 值 来对应到指定的元素querySelectorAll: 根据传入的 值 来对应到指定的元素

这些方法都是要用document做起头再去呼叫使用, 例如:

var myElemantA = document.getElementById('myId');var myElemantB = document.getElementsByClassName('myClass');var myElemantC = document.querySelector('#myId');

而根据方法的不同, 传入的值的内容也不同
例如 getElementById 就必须传入元素的Id才能对应
getElementsByClassName 就必须传入元素的ClassName才能对应
神奇的是, querySelector 与 querySelectorAll 传入的值并不是像 getElementBy... 系列, 都是属于固定内容, 这两种属于CSS选择器, 也就是说, 可以传入Id、ClassName甚至是[attr=value]、:checked
(详细CSS选择器及规範可参考 w3school)
所以用法也就更多元, 可以更深入取得需要的元素

---

querySelector & getElementBy... 的差别

既然 querySelector 这么好用为什么还需要 **getElementBy...**系列呢?
这部分我也有稍微做了一下功课, 因为我相信不会只有我有这个疑问xD
虽然这两种都能取到一样的结果
但 querySelector 是属于 静态结果, 而 getElementBy... 是属于 动态结果

动态? 静态? 洗勒小公鲨大母鲨?
当初我看到这边真的是一堆黑人问号, 后来直接用程式码演练一次才知道到底是什么意思...
不多说直上程式码

假设今天有个ul长这样

<ul id="myul">    <li>li 1</li>    <li>li 2</li>    <li>li 3</li></ul>

使用两种选择器去取得li清单

// 使用getElementBy系列取得li清单var ulbyid = document.getElementById('myul');var libytag = ulbyid.getElementsByTagName('li');// 使用querySelector取得li清单var ulqs = document.querySelector('ul');var ulqsa = ulqs.querySelectorAll('li');// 输出取得的清单长度都是3console.log(libytag.length); // 3console.log(ulqsa.length); // 3// 在ulbyid加入新的li元素ulbyid.appendChild(document.createElement('li'));// 再次输出清单长度console.log(libytag.length); // 4console.log(ulqsa.length); // 3// 在ulqsa加入新的li元素// 这里打错了~ulbyid要换成ulqsa  感谢帮友imjoe协助修正^_^// ulbyid.appendChild(document.createElement('li'));ulqsa.appendChild(document.createElement('li'));// 再次输出清单长度console.log(libytag.length); // 5console.log(ulqsa.length); // 3

用上面的程式码测试会发现, 在ul元素内加入新的li元素后, getElementBy...系列都能抓到当前所有项目(有点像自动更新的功能), 而querySelector在取得后不管加了多少新元素, 都只有取得当下的清单内容而已

两种方式根据用途也有操作上的变化

---

DOM与选择器基本说明到这
下週来写怎么利用选择器操作DOM
累~