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


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 问答知识整理
Feb 11 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
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
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
javascript[js]获取url参数的代码
2007/10/17 Javascript
页面版文本框智能提示JS代码
2009/11/20 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
Vue.js系列之项目结构说明(2)
2017/01/03 Javascript
用JavaScript实现让浏览器停止载入页面的方法
2017/01/19 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
react-native ListView下拉刷新上拉加载实现代码
2017/08/03 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python获取本机所有网卡ip,掩码和广播地址实例代码
2018/01/22 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
用Python爬取QQ音乐评论并制成词云图的实例
2019/08/24 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
python二维图制作的实例代码
2020/12/03 Python
介绍一下Ruby的多线程处理
2013/02/01 面试题
办公室主任竞聘演讲稿
2014/05/15 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
副总经理岗位职责
2015/02/02 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js