一直以来，上课没有出过什么差错，即使是现场演示，基于厚实的功底，没有出现因出错而乱阵脚的尴尬。
不过，今天出现了。
JavaScript的第四堂课，讲BOM和DOM。这节课内容挺重要的，作为网页的脚本语言，最基本的就是和网页元素的互动。前两节课很顺利，毕竟代码量不大，知识基本在掌握之中。最后一节课是DOM节点的操作，这是我的一大弱项区域，常常被各种节点绕晕。
临下课，讲最后一个知识点，节点的添加、删除。我还突发奇想的突然甩出一个比喻，用document.createElement(tag)创建出来的节点就像是个孤儿，我们要找个人家给他寄养，寄养的方式就是在目标家庭用appendChild的方法，让寄养生效。我开始演示创建节点和添加节点。
<head>
<script>
window.onload = function() {
var navUl = document.getElementById('nav');
var newLi = document.createElement('li');
newLi.innerHTML = 'new node';
navUl.appendChild(newLi);
}
</script>
</head>
<body>
<ul>
<li>node1</li>
</ul>
</body>
很顺利，这没问题，就两个动作，一个创建节点，一个添加节点。接下来演示删除节点，并且用延时加入点好玩的东西。在原代码的基础上加入了一个删除第一个子节点的函数。
<head>
<script>
function removeFirstLi() {
ele.removeChild(ele.firstChild);
}
window.onload = function() {
var navUl = document.getElementById('nav');
var newLi = document.createElement('li');
newLi.innerHTML = 'new node';
navUl.appendChild(newLi);
//2秒后删除第一个子节点
setTimeout('removeFirstLi(navUl)', 2000);
}
</script>
</head>
<body>
<ul>
<li>node1</li>
</ul>
</body>
运行，出错了！说navUl没有定义，这种错误我是能掌控的，只要有错误提示，我就明白哪里有问题。根据错误，我意识到要把navUl提升为全局变量。
不报错了，但是延时删除的效果没有。我突然脑袋有些空，没有了错误提示，一下子想不到是哪个地方出问题了。把脚本移到body的最底端，无效！把function放入onload函数内，出错！我开始有些乱了，平常写的优雅的代码变得犬牙交错，从代码基本可以看出我当时的状态。我心里默念，一定要在下课前解决，给一个完美的结局。不料，下课铃响了！
同学们出去吃饭，我继续调试，检查到底哪里出问题，对比了PPT里昨天自己写的代码，再打印节点的一些信息。我发现不用延时，单独执行removeFirstLi也没效果，第一个节点仍没删掉。试着打印第一个节点，发现是文本。我突然想起某篇文章说，在DOM的节点里，一个空格，一个回车也是一个节点。在ppt里，html代码我写的是
<ul><li>第一个节点</li><ul>
上课时，为了优雅，加了缩进，变成层次式：
<ul>
<li>第一个节点</li>
<ul>
用回车换行并加了缩进，那么ul的第一个节点（firstChild)就是文本了，只不过是空文本(\r\t)。所以，真正删除的是这个空文本节点！
我把HTML改成原来的格式，运行，成功！
昨天为了省事，没有对第一个节点类型进行判断；而且昨天用childNodes对像今天这样有层次结构的元素获取节点时，发现第一个和最后一个子节点是文本，当时一直不理解。今天终于理解了，就是回车换行的文本。
出来混，迟早是要还的。昨天欠下的，今天通过这样的方式还回来了。
网友评论