dom 节点篇---模块
改写成如下代码:
var creatTag=(function(){
//var count=5;
var oUl=document.createElement('ul');
var oDiv=document.createElement('div');
var oText=document.createTextNode('添加新项:');
var oInpu=document.createElement('input');
var oBtn=document.createElement('button');
var oTxt=document.createTextNode('点击');
var oBtn1=document.createElement('button');
var oTx=document.createTextNode('删除');
var appChd=function(){
oBtn.appendChild(oTxt);
oBtn1.appendChild(oTx);
oDiv.appendChild(oInpu);
oDiv.insertBefore(oText,oInpu);//insertbefore 添加一个参数是总是报错,得两个参数
//oUl.appendChild(oDiv);
document.body.appendChild(oUl);
document.body.appendChild(oDiv);
document.body.appendChild(oBtn);
document.body.appendChild(oBtn1);
};
var addTag=function(){
var intV=oInpu.value;//获取到的值
var aLi=document.createElement('li');
var intN=document.createTextNode(intV);//创建一个文本节点,把获取到的值,放进去
aLi.appendChild(intN);
//oUl.appendChild(aLi);新添加的节点都放到最后了
if(oUl.childNodes.length==0){ //判断一下,父结点里面的子节点是否存在,如果不存在执行append语句
//alert(1);
oUl.appendChild(aLi);
}else{
oUl.insertBefore(aLi,oUl.firstChild);
}
};
var revTag=function(){
if(oUl.hasChildNodes()){
//oUl.removeChild(oUl.firstChild);//删除父节点里面的第一个节点
oUl.removeChild(oUl.lastChild);//删除父结点里面的最后一个节点
//oUl.removeChild(oUl.childNodes[3]);//删除父节点里面任意一个位置的子节点,oUl.childNodes[i],i可以为任意值
}
};
return {
appChd:appChd,
addTag:addTag,
revTag:revTag,
obtn:oBtn,
obtn1:oBtn1
};
})();
//创建元素函数
creatTag.appChd();
//添加节点
creatTag.obtn.onclick=function(){
creatTag.addTag();
}
//删除节点,函数被事件绑定以后,函数名后面不加括号
creatTag.obtn1.onclick= creatTag.revTag;
//插入节点,有两种方式,appendChild 和insertbefore 二者的区别比较 appendChild是在指定节点里面插入一个新节点,位置是在最后面,insertBefore(新节点,已存在节点的位置);插在指定节点里面的第一个节点位置
</script>
重点,两种不同写法的事件调用函数
dom 节点篇---模块的更多相关文章
- dom 节点篇 ---单体模式
<script> var creatTag={ oUl:document.createElement('ul'), oDiv:document.createElement('div'), ...
- dom 节点篇
1,创建元素 document.createElement('要创建的元素名'); 2.插入节点 appendChild 和insertBefore 3.删除节点 removeChild 用法 re ...
- 深入理解DOM节点类型第五篇——元素节点Element
× 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...
- 深入理解DOM节点类型第六篇——特性节点Attribute
× 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...
- 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
× 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...
- 深入理解DOM节点类型第一篇——12种DOM节点类型概述
× 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...
- Javascript进阶篇——(DOM—节点---属性、访问节点)—笔记整理
节点属性在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType : ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
随机推荐
- js类型转换
1.js中有六种基本类型,分别是object.number.string.Boolean.null.undefined,其中number.string.Boolean为基本类型,有时使用会强制转换成对 ...
- CentOS7 查看IP、Gateway、DNS、Hostname
1.查看IP# ip addr 2.查看路由# ip route 3.查看DNS# cat /etc/resolv.conf 4.查看主机名# hostname
- Android中使用AsyncTask实现文件下载以及进度更新提示
Android提供了一个工具类:AsyncTask,它使创建需要与用户界面交互的长时间运行的任务变得更简单.相对Handler来说AsyncTask更轻量级一些,适用于简单的异步处理,不需要借助线程和 ...
- Android 手机卫士--导航界面3、4和功能列表界面跳转逻辑处理
刚刚花了一点时间,将导航界面3.4的布局和相应的跳转逻辑写了一下: Setup3Activity代码如下: /** * Created by wuyudong on 2016/10/10. */ pu ...
- 【代码笔记】iOS-字符串的分割
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...
- SQL Server 进阶 01 数据库的设计
SQL Server 进阶 01 数据库的设计 本篇目录 课程内容回顾及介绍 为什么需要规范的数据库设计 设计数据库的步骤 绘制E-R(实体-关系)图 实体-关系模型 如何将E-R图转换为表 数据规范 ...
- T-SQL 转义select … like中的特殊字符(百分号)
众所周知,T-SQL中LIKE运算符使用%符号表示通配符.很多时候可能需要查询包含有%的数据,比如需要查询字段coupon中含有5%的数据.那么如何使用已经有百分号(%)符号的LIKE搜索字符串呢? ...
- ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock
ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock 通过终端安装程序sudo apt-get install xxx时出错:E: Could not ...
- hibernate注解CascadeType
http://blog.csdn.net/strong8808/article/details/6318994(参考) CascadeType.REFRESH:级联刷新,当多个用户同时作操作一个实体, ...
- SQL*Plus环境下创建PLUSTRACE角色
普通用户在SQL*Plus中开启AUTOTRACE报告时,遇到SP2-0618: Cannot find the Session Identifier. Check PLUSTRACE role is ...