JavaScript(DOM编程二)
Posted 乔克叔叔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript(DOM编程二)相关的知识，希望对你有一定的参考价值。
文档加载完毕之后，在Window.onload方法中创建元素节点，添加到DOM文档中
代码演示：
<html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ alert("运行前。。。。。") //创建一个元素节点 参数是元素节点的名称 li <li></li> var linode=document.createElement("li"); //创建一个文本节点 参数即为文本节点中的字符串 厦门 var textnode=document.createTextNode("厦门"); //把该文本节点加入到元素节点中 <li>厦门<li> linode.appendChild(textnode); //把linode加入到首尔的后面： var city=document.getElementById("city"); city.appendChild(linode); alert("运行后。。。。。"); } </script> </head> <body> <p>你喜欢哪个城市?</p> <ul id="city"><li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> <br><br> <p>你喜欢哪款单机游戏?</p> <ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female <br><br> name: <input type="text" name="username" value="atguigu"/> </body> </html>
运行效果：
单击确定
----------------------------------------------
判断某个节点是否存在某个属性
<script type="text/javascript"> window.onload=function(){ var v1=document.getElementById("bj");//获得li为北京的元素节点 var v2=document.getElementsByTagName("li")[1];//获得li为上海的元素节点； //判断这两个节点是否存在id属性 if(v1.id){ alert("v1节点存在id属性"); }else{ alert("v1节点不存在id属性"); } if(v2.id){ alert("v2节点存在id属性"); }else{ alert("v2节点不存在id属性"); } } </script>
程序运行结果：
-------------------------------------------------------
实验一：
需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
页面效果：
基本代码：
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
<form action="text5.html" name="myform">
<input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏
name: <input type="text" name="name"/>
<input type="submit" value="Submit" id="submit"/>
</form>
思路过程：
<script type="text/javascript">
//需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
// 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
window.onload = function(){
//1. 获取 #submit 对应的按钮 submitBtn
var submit = document.getElementById("submit");
//2. 为 submitBtn 添加 onclick 响应函数
submit.onclick = function(){
//4. 检查是否选择 type, 若没有选择给出提示: "请选择类型"
//4.1 选择所有的 name="type" 的节点 types
var types = document.getElementsByName("type");
//4.2 遍历 types, 检查其是否有一个 type 的 checked 属性存在, 就可说明
//有一个 type 被选中了: 通过 if(元素节点.属性名) 来判断某一个元素节点是否有
//该属性.
var typeVal = null;
for(var i = 0; i < types.length; i++){
if(types[i].checked){
typeVal = types[i].value;
break;
}
}
//4.3 若没有任何一个 type 被选中, 则弹出: "请选择类型". 响应方法结束:
//return false
if(typeVal == null){
alert("请选择类型");
return false;
}
//5. 获取 name="name" 的文本值: 通过 value 属性: nameVal
var nameEle = document.getElementsByName("name")[0];
var nameVal = nameEle.value;
//6. 去除 nameVal 的前后空格.
var reg = /^\\s*|\\s*$/g;
nameVal = nameVal.replace(reg, "");
//使 name 的文本框也去除前后空格.
nameEle.value = nameVal;
//6. 把 nameVal 和 "" 进行比较, 若是 "" 说明只出入了空格, 弹出 "请输入内容"
//方法结束: return false
if(nameVal == ""){
alert("请输入内容");
return false;
}
//7. 创建 li 节点
var liNode = document.createElement("li");
//8. 利用 nameVal 创建文本节点
var content = document.createTextNode(nameVal);
//9. 把 8 加为 7 的子节点
liNode.appendChild(content);
//10. 把 7 加为选择的 type 对应的 ul 的子节点
document.getElementById(typeVal)
.appendChild(liNode);
//3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的
//默认行为.
return false;
}
}
</script>
具体实施：
1 <script type="text/javascript"> 2 window.onload=function(){ 3 //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; 4 // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; 5 //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 6 7 //一。先获取对应的按钮 8 var submit=document.getElementById("submit"); 9 //然后为他绑定onclick事件 10 submit.onclick=function(){ 11 //获得单选节点 通过type属性获得 12 var radionode=document.getElementsByName("type"); 13 //循环遍历 得到选择的某个按钮的value值 14 var radionodetype =null; 15 for(var i=0;i<radionode.length;i++){ 16 if(radionode[i].checked){//存在checked属性 17 radionodetype=radionode[i].value;//获得选中的按钮的value值 18 break; 19 } 20 } 21 //判断是否 radionodetype的值仍然为空 为空则 说明用户没单击任何的按钮 弹窗提示 然后停止 22 if(radionodetype==null){ 23 alert("请选择类型。。。。。。"); 24 return false; 25 } 26 27 //二。获得元素节点 是它的子节点是文本 通过name属性 28 var textnode=document.getElementsByName("name")[0]; 29 // alert(textnode); 30 //得到输入的文本内容 31 var textcontext=textnode.value; 32 // alert(textcontext); 33 34 //正则表达式 去掉前后的空格 35 var zheze=/^\\s*|\\s*$/g; 36 textcontext=textcontext.replace(zheze,""); 37 //使文本框中的内容也去掉前后空格 不然在下次输入的时候光标不是在文本框的开始位置(主要还是没有实现跳页 所以数据会一直到页面上 如果再次条到本页 那么上一次输入的数据将消失) 38 textnode.value=textcontext; 39 if(textcontext==""){ 40 alert("输入的内容不能为空 或者是空格"); 41 return false; 42 } 43 44 45 //创建元素节点，为之后的节点插入做准备 46 var linode=document.createElement("li"); 47 //创建文本节点， 48 var textnode=document.createTextNode(textcontext)//参数就是用户输入的值 去掉空格之后 不用担心内容为"" 如果为“” 那么代码根本执行不到这里 49 //把该文本节点的内容设置进上面创建的元素节点中 50 linode.appendChild(textnode); 51 52 //根据选择的类型radionodetype的值 先得到相应的li节点集合 53 var lilist=document.getElementById(radionodetype); 54 //为集合添加一条元素节点<li><li> 55 lilist.appendChild(linode); 56 57 58 return false;//即使用户输入的内容都合法 也不让其跳页 59 } 60 } 61 62 </script>
运行效果展示：
1.什么都不输入，单击提交
2.选择类型之后，文本中没有输入任何的内容，单击提交
3.选择类型，并且输入带空格的字符
提交之后
----------------------------------------------------------------
现在在上面代码的基础上，增加一个功能，就是单击相应的文本，弹出该文本的内容，刚刚添加的文本也要具有该项功能
需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
1 <script type="text/javascript"> 2 window.onload=function(){ 3 //需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; 4 // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; 5 //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 6 7 //无论是否用户添加了新的节点，用户点击时都能产生单击事件 所以需求2的代码至少在文档加载完毕之后就应该执行 所以应该放在onload方法体中的最上边 8 function showtext(node){//这里边不需要确定参数的类型，因为JavaScript的参数类型是弱类型的 即函数参数不需要类型 9 alert(node.firstChild.nodeValue); 10 } 11 //1为每一个文本都定义单击事件 12 var testonclick=document.getElementsByTagName("li");//得到所有的li节点 元素节点 想要得到本节点需要使用firstchild才可以 13 //循环定义单击事件 14 for(var i=0;i<testonclick.length;i++){ 15 testonclick[i].onclick= function () { 16 showtext(this); 17 } 18 } 19 20 //一。先获取对应的按钮 21 var submit=document.getElementById("submit"); 22 //然后为他绑定onclick事件 23 submit.onclick=function(){ 24 //获得单选节点 通过type属性获得 25 var radionode=document.getElementsByName("type"); 26 //循环遍历 得到选择的某个按钮的value值 27 var radionodetype =null; 28 for(var i=0;i<radionode.length;i++){ 29 if(radionode[i].checked){//存在checked属性 30 radionodetype=radionode[i].value;//获得选中的按钮的value值 31 break; 32 } 33 } 34 //判断是否 radionodetype的值仍然为空 为空则 说明用户没单击任何的按钮 弹窗提示 然后停止 35 if(radionodetype==null){ 36 alert("请选择类型。。。。。。"); 37 return false; 38 } 39 40 //二。获得元素节点 是它的子节点是文本 通过name属性 41 var textnode=document.getElementsByName("name")[0]; 42 // alert(textnode); 43 //得到输入的文本内容 44以上是关于JavaScript(DOM编程二)的主要内容，如果未能解决你的问题，请参考以下文章
译文：18个实用的JavaScript代码片段，助你快速处理日常编程任务