|
鉴于w3c所倡导的表现(CSS)和结构(HTML)的分离，目前对于行为(Script)和结构(HTML)的分离也被很多人所认同，在网页里尽量减少ID、Name等，而代之的是通过DOM及Script来获取，进而对其进行行为的控制和操作。
考虑到兼容性，js获取HTML对象的方法常用有三种： 1.document.getElementById(id) 2.document.getElmentsByTagName(TagName) 3.document.getElementsByClassName(class) 由于要尽量的减少ID和普遍性，第一种和第三种获取方法就暂时先不考虑了，主要以第二种为例进行js的操作。 本内容重在下面的测试中，效果虽然相差不大，但原理是有区别的，重点看js部分的变化。 测试一：  HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 增加一个父Div，div标签嵌套，重新获取div HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 修改JS部分，通过ID获取子div的内容 HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 去掉父DIV的ID，全部用TagName来分离获取 HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 将DIV换成ul和li，修改js，查看新的效果 HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] 进一步修改js，通过DOM节点来获取对象，不过在IE和FF下你会看到两种不同结果，原因是IE忽略了空格，而FF、oprea、safari、Chrome等会把空格也当作一个节点来处理，所有在IE下你只能得到四个几点，而在其它浏览器中，你会得到9个节点。 HTML代码[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行] |
|
|
