这个实例只能很简单的完成添加和删除，并不对输入进行判断，如果想要做的完美，还需要做很多工作，可以对表格进行美化，设置背景色，鼠标移入高亮显示，鼠标移出恢复背景色，最关键的就是要对表单输入内容进行判断，以确保每次提交的信息都是有效信息，如果表格信息量大，还可以添加支持模糊搜素，多关键字搜索，以提高用户体验度，当然在实际的项目中，这样的情况几乎不会出现，但可以作为自己的实践，检验学习成果。
(5)、替换节点和创建文本节点
replaceChild()方法可用于替换元素节点。
语法：node.replaceChild (new node, node) 第一个参数为用于替换的节点。第二个参数为原有节点。
createTextNode()方法可创建新的文本节点，返回新创建的Text节点。
语法：document.createTextNode(txt)
这两种方法平时几乎用不到，但还是需要了解。
实例：点击按钮将span标签替换为b标签。再创建一个文本节点插入到创建的p元素下，并设置className。
<!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>JavaScript实例</title> <style> .p{ width:px; height:px; background-color:#ccc; } </style> </head> <body> <p>创建一个P标签，设置<span>className</span>属性，创建文本节点。</p> <input type="button" value="点击替换"> <script> function change(){ //获取span元素 var oS=document.getElementById('s'); //创建一个b元素 var newnode=document.createElement('b'); //要替换的文本节点 var txt = document.createTextNode('className'); //将文本节点插入到创建的b元素下 newnode.appendChild(txt); //在span元素的父级下将span元素替换成新创建的b元素 oS.parentNode.replaceChild(newnode,oS); } //创建一个p元素 var oP=document.createElement('p'); //设置className oP.className='p'; //创建文本节点 var txtNode=document.createTextNode('createTextNode用于创建文本节点!'); //将创建的文本节点插入到p元素下 oP.appendChild(txtNode); //再将p元素插入到父级body下 document.body.appendChild(oP); </script> </body> </html>
以上所述是脚本之家小编给大家分享的关于JavaScript DOM 学习总结(五)的全部叙述，希望大家喜欢。
您可能感兴趣的文章: