快捷導(dǎo)航

淺述節(jié)點(diǎn)的創(chuàng)建及常見(jiàn)功能的實(shí)現(xiàn)

更新時(shí)間：2016年12月15日 14:20:06 作者：小僵尸

本文主要對(duì)節(jié)點(diǎn)的創(chuàng)建及常見(jiàn)功能的實(shí)現(xiàn)方法進(jìn)行介紹，希望會(huì)對(duì)大家學(xué)習(xí)javascript有所幫助，下面就跟小編一起來(lái)看下吧

新創(chuàng)建一個(gè)元素節(jié)點(diǎn)，并把該節(jié)點(diǎn)添加為文檔中指定節(jié)點(diǎn)的子節(jié)點(diǎn)

1，新創(chuàng)建一個(gè)元素節(jié)點(diǎn)，返回值為指向元素節(jié)點(diǎn)的引用

var liNode =document.creatElement("li");
var cityNode=document.getElementById("city");

新添加newChild子節(jié)點(diǎn)，該子節(jié)點(diǎn)將作為elementNode

cityNode.appendChild(liNode);

2,創(chuàng)建一個(gè)文本節(jié)點(diǎn) creatTextNode

var xmText=document.creatTextNode("廈門(mén)");

//需求: 點(diǎn)擊 submit 按鈕時(shí),　檢查是否選擇 type, 若沒(méi)有選擇給出提示: "請(qǐng)選擇類(lèi)型"; 
// 檢查文本框中是否有輸入(可以去除前后空格), 若沒(méi)有輸入,則給出提示: "請(qǐng)輸入內(nèi)容";
//若檢查都通過(guò), 則在相應(yīng)的 ul 節(jié)點(diǎn)中添加對(duì)應(yīng)的 li 節(jié)點(diǎn) 
//需求2: 使包括新增的 li 都能響應(yīng) onclick 事件: 彈出 li 的文本值. 
window.onload = function(){
function showContent(liNode){
alert("^_^#" + liNode.firstChild.nodeValue);
}
var liNodes = document.getElementsByTagName("li");
for(var i = 0; i < liNodes.length; i++){
liNodes[i].onclick = function(){
showContent(this);
}
}
//1. 獲取 #submit 對(duì)應(yīng)的按鈕 submitBtn
var submit = document.getElementById("submit");
//2. 為 submitBtn 添加 onclick 響應(yīng)函數(shù)
submit.onclick = function(){
//4. 檢查是否選擇 type, 若沒(méi)有選擇給出提示: "請(qǐng)選擇類(lèi)型"
//4.1 選擇所有的 name="type" 的節(jié)點(diǎn) types
var types = document.getElementsByName("type");
//4.2 遍歷 types, 檢查其是否有一個(gè) type 的 checked 屬性存在, 就可說(shuō)明
//有一個(gè) type 被選中了: 通過(guò) if(元素節(jié)點(diǎn).屬性名) 來(lái)判斷某一個(gè)元素節(jié)點(diǎn)是否有
//該屬性.
var typeVal = null;
for(var i = 0; i < types.length; i++){
if(types[i].checked){
typeVal = types[i].value;
break;
}
}
//4.3 若沒(méi)有任何一個(gè) type 被選中, 則彈出: "請(qǐng)選擇類(lèi)型". 響應(yīng)方法結(jié)束: 
//return false
if(typeVal == null){
alert("請(qǐng)選擇類(lèi)型");
return false;
}
//5. 獲取 name="name" 的文本值: 通過(guò) 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 和 "" 進(jìn)行比較, 若是 "" 說(shuō)明只出入了空格, 彈出 "請(qǐng)輸入內(nèi)容"
//方法結(jié)束: return false
if(nameVal == ""){
alert("請(qǐng)輸入內(nèi)容");
return false;
}
//7. 創(chuàng)建 li 節(jié)點(diǎn)
var liNode = document.createElement("li");
//8. 利用 nameVal 創(chuàng)建文本節(jié)點(diǎn)
var content = document.createTextNode(nameVal);
//9. 把 8 加為 7 的子節(jié)點(diǎn)
liNode.appendChild(content);
//11. 為新創(chuàng)建的 li 添加 onclick 響應(yīng)函數(shù)
liNode.onclick = function(){
showContent(this);
}
//10. 把 7 加為選擇的 type 對(duì)應(yīng)的 ul 的子節(jié)點(diǎn)
document.getElementById(typeVal)
.appendChild(liNode);
//3. 在 onclick 響應(yīng)函數(shù)的結(jié)尾處添加 return false, 就可以取消提交按鈕的
//默認(rèn)行為. 
return false;
}
}
</script>
</head>
<body>
<p>你喜歡哪個(gè)城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
<br><br>
<p>你喜歡哪款單機(jī)游戲?</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實(shí)況</li>
<li>極品飛車(chē)</li>
<li>魔獸</li>
</ul>
<br><br>
<form action="dom-7.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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: