浅述节点的创建及常见功能的实现
新创建一个元素节点，并把该节点添加为文档中指定节点的子节点
1，新创建一个元素节点，返回值为指向元素节点的引用
varliNode=document.creatElement("li");
varcityNode=document.getElementById("city");
新添加newChild子节点，该子节点将作为elementNode
cityNode.appendChild(liNode);
2,创建一个文本节点creatTextNode
varxmText=document.creatTextNode("厦门");
//需求:点击submit按钮时,检查是否选择type,若没有选择给出提示:"请选择类型";
//检查文本框中是否有输入(可以去除前后空格),若没有输入,则给出提示:"请输入内容";
//若检查都通过,则在相应的ul节点中添加对应的li节点
//需求2:使包括新增的li都能响应onclick事件:弹出li的文本值.
window.onload=function(){
functionshowContent(liNode){
alert("^_^#"+liNode.firstChild.nodeValue);
}
varliNodes=document.getElementsByTagName("li");
for(vari=0;i<liNodes.length;i++){
liNodes[i].onclick=function(){
showContent(this);
}
}
//1.获取#submit对应的按钮submitBtn
varsubmit=document.getElementById("submit");
//2.为submitBtn添加onclick响应函数
submit.onclick=function(){
//4.检查是否选择type,若没有选择给出提示:"请选择类型"
//4.1选择所有的name="type"的节点types
vartypes=document.getElementsByName("type");
//4.2遍历types,检查其是否有一个type的checked属性存在,就可说明
//有一个type被选中了:通过if(元素节点.属性名)来判断某一个元素节点是否有
//该属性.
vartypeVal=null;
for(vari=0;i<types.length;i++){
if(types[i].checked){
typeVal=types[i].value;
break;
}
}
//4.3若没有任何一个type被选中,则弹出:"请选择类型".响应方法结束:
//returnfalse
if(typeVal==null){
alert("请选择类型");
returnfalse;
}
//5.获取name="name"的文本值:通过value属性:nameVal
varnameEle=document.getElementsByName("name")[0];
varnameVal=nameEle.value;
//6.去除nameVal的前后空格.
varreg=/^\s*|\s*$/g;
nameVal=nameVal.replace(reg,"");
//使name的文本框也去除前后空格.
nameEle.value=nameVal;
//6.把nameVal和""进行比较,若是""说明只出入了空格,弹出"请输入内容"
//方法结束:returnfalse
if(nameVal==""){
alert("请输入内容");
returnfalse;
}
//7.创建li节点
varliNode=document.createElement("li");
//8.利用nameVal创建文本节点
varcontent=document.createTextNode(nameVal);
//9.把8加为7的子节点
liNode.appendChild(content);
//11.为新创建的li添加onclick响应函数
liNode.onclick=function(){
showContent(this);
}
//10.把7加为选择的type对应的ul的子节点
document.getElementById(typeVal)
.appendChild(liNode);
//3.在onclick响应函数的结尾处添加returnfalse,就可以取消提交按钮的
//默认行为.
returnfalse;
}
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ulid="city">
<liid="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ulid="game">
<liid="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
<formaction="dom-7.html"name="myform">
<inputtype="radio"name="type"value="city">城市
<inputtype="radio"name="type"value="game">游戏
name:<inputtype="text"name="name"/>
<inputtype="submit"value="Submit"id="submit"/>
</form>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！