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


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实现的图文高亮滚动切换特效实例
Aug 10 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
JavaScript实现斗地主游戏的思路
Feb 29 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 Javascript
详解如何用webpack4从零开始构建react开发环境
Jan 27 Javascript
JS原型与继承操作示例
May 09 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 Javascript
javascript实现页面的实时时钟显示示例
Aug 06 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
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
ASP 过滤数组重复数据函数(加强版)
2010/05/31 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
js数组循环遍历数组内所有元素的方法
2014/01/18 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
跟老齐学Python之用while来循环
2014/10/02 Python
Python多线程编程(一):threading模块综述
2015/04/05 Python
简单谈谈Python中的闭包
2016/11/30 Python
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
matplotlib绘制动画代码示例
2018/01/02 Python
python3实现单目标粒子群算法
2019/11/14 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
初中生学习生活的自我评价
2013/11/20 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
《沙漠中的绿洲》教学反思
2014/04/24 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
大专护理专业自荐信
2015/03/25 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js