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


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在一段文字中的光标处插入其他文字
Aug 26 Javascript
28个JS验证函数收集
Mar 02 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
javascript解析json实例详解
Nov 05 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
Nov 05 Javascript
详解JS实现简单的时分秒倒计时代码
Apr 25 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
js实现限定区域范围拖拉拽效果
Nov 20 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
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
CodeIgniter常用知识点小结
2016/05/26 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
javascript列表框操作函数集合汇总
2013/11/28 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
jstree的简单实例
2016/12/01 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
2019/02/01 Javascript
Vue快速实现通用表单验证功能
2019/12/05 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
如何把python项目部署到linux服务器
2020/08/26 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
PHP如何调用MYSQL存储过程
2014/05/30 面试题
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
应届中专生自荐书范文
2014/02/13 职场文书
新店开张活动方案
2014/08/24 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
给朋友的道歉短信
2015/05/12 职场文书
话题作文之自信作文
2019/11/15 职场文书
Python实现制作销售数据可视化看板详解
2021/11/27 Python