浅述节点的创建及常见功能的实现
程序员文章站
2023-11-14 20:59:10
新创建一个元素节点,并把该节点添加为文档中指定节点的子节点
1,新创建一个元素节点,返回值为指向元素节点的引用
var linode =document.cre...
新创建一个元素节点,并把该节点添加为文档中指定节点的子节点
1,新创建一个元素节点,返回值为指向元素节点的引用
var linode =document.createlement("li"); var citynode=document.getelementbyid("city");
新添加newchild子节点,该子节点将作为elementnode
citynode.appendchild(linode);
2,创建一个文本节点 creattextnode
var xmtext=document.creattextnode("厦门");
//需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型"; // 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容"; //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 //需求2: 使包括新增的 li 都能响应 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 对应的按钮 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); //11. 为新创建的 li 添加 onclick 响应函数 linode.onclick = function(){ showcontent(this); } //10. 把 7 加为选择的 type 对应的 ul 的子节点 document.getelementbyid(typeval) .appendchild(linode); //3. 在 onclick 响应函数的结尾处添加 return false, 就可以取消提交按钮的 //默认行为. return false; } } </script> </head> <body> <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="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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
上一篇: 对vue中v-if的常见使用方法详解
下一篇: element form 校验数组每一项