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


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 相关文章推荐
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
javascript变量声明实例分析
Apr 25 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
Mar 31 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 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
根德YB400的电路分析
2021/03/02 无线电
PHP生成sitemap.xml地图函数
2013/11/13 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
JS字符串拼接在ie中都报错的解决方法
2014/03/27 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
Python中的with...as用法介绍
2015/05/28 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
设置python3为默认python的方法
2018/10/31 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
中国跨境海淘网站:考拉海购
2016/08/01 全球购物
请介绍一下Ant
2016/07/22 面试题
个人找工作的自我评价
2013/10/17 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
欧元符号 €
2022/02/17 杂记