<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> </head> <body> <ul id="con"> <li id="lesson1">javascript <ul> <li id="tcon"> 基础语法</li> <li>流程控制语句</li> <li>函数</li> <li>事件</li> <li>DOM</li> </ul> </li> <li id="lesson2">第二个</li> <li id="lesson3">第三个</li> <li id="lesson4">HTML/CSS <ul> <li>文字</li> <li>段落</li> <li>表单</li> <li>表格</li> </ul> </li> </ul> <script type="text/javascript"> var mylist = document.getElementById("tcon");//这行是题目自带的,后面是我写的作业 var lesson = mylist.parentNode.parentNode.parentNode.childNodes; for (i = lesson.length - 1; i > 0; i--) { if (lesson[i].nodeType == 1) { document.write("输出id=lesson4中的内容:" + lesson[i].firstChild.nodeValue + "<br>"); document.write("id=lesson4是UL中的第“" + (i + 1) + "”个元素"); break; } } </script> </body> </html>
原题是这样的:通过用parentNode获取当前ID的上级然后最终输出id="lesson4"中的HTML/CSS那几个字符。
产生了几个疑问:
1.
for (i = lesson.length - 1; i > 0; i--) { if (lesson[i].nodeType == 1)
这行中,我一开始定义的是
for (i = 0; i < lesson.length; i++) { if (lesson[lesson.length - i].nodeType == 1)
我发现这个条件始终不能成立,lesson[a-b]这样的运算符貌似不能写,是我的写法不对吗?还是[]中不能存在运算?
2.我看绝大多数同学的代码都很简单,他们在获取了最上级UL的时候直接在后面得到.lastChild.innerHTML就完事大吉,但是我发现在Chrome中实际上UL的子元素有9个,5个空格符中间夹杂了4个LI(id=lesson1234)。所以我一开始用这个方法始终得不到想要的字符串,最后研究了很久才发现问题所在。
那么,实践中,一般写JS获取这个内容的时候,因为考虑上述情况,考虑浏览器兼容,是不是.lastChild.innerHTML这类的代码会很少见?或是代码发布之前都用代码压缩把没用的空格和换行符全部干掉了?
3.深入研究,比如我想单独输入lesson3中的内容,该怎么办呢?我想到可以通过push()方法把第一次筛选的结果存入数组,然后通过筛选的结果得到 数组2[数组2.length-1]这个结果,这样应该可以实现只输出lesson3。
但是比如有10000个元素,我要先筛选5000个,然后再得出这5000个中的第倒数20个的内容,我觉得这个方式要存一个5000个东西的数组,是不是会很占资源?有没有什么方法可以直接一边筛选一边循环,比如倒着循环,到第20次的时候停止,直接得到这次的结果的方法?这样是不是就不会占资源然后很快完成?
刚刚学习JS,掌握的基本仅限于慕课网的初级教程,有很多疑问,请各位老司机解答。
lemonhxj
李晓健
相关分类