浅述节点的创建及常见功能的实现


Posted in Javascript onDecember 15, 2016

新创建一个元素节点,并把该节点添加为文档中指定节点的子节点

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
js实现无限级树形导航列表效果代码
Sep 23 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
js实现表格筛选功能
Jan 18 Javascript
js字符串处理之绝妙的代码
Apr 05 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JavaScript中的执行环境和作用域链
Sep 04 Javascript
vue中jsonp插件的使用方法示例
Sep 10 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 #Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 #Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 #Javascript
Bootstrap CSS布局之列表
Dec 15 #Javascript
BootStrap整体框架之基础布局组件
Dec 15 #Javascript
JS弹性运动实现方法分析
Dec 15 #Javascript
JS经典正则表达式笔试题汇总
Dec 15 #Javascript
You might like
星际RPG字典
2020/03/04 星际争霸
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
PHP Array交叉表实现代码
2010/08/05 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
vue中使用mxgraph的方法实例代码详解
2019/05/17 Javascript
vue实践---根据不同环境,自动转换请求的url地址操作
2020/09/21 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
[45:59]EG vs OG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python pickle 和 shelve模块的用法
2013/09/16 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
python入门前的第一课 python怎样入门
2018/03/06 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
python实现从wind导入数据
2019/12/03 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
社区矫正工作方案
2014/06/04 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
单位委托书范本(3篇)
2014/09/18 职场文书
全国助残日活动总结
2015/05/11 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
2016年五一国际劳动节活动总结
2016/04/06 职场文书