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则承载着整 ...
随机推荐
- css基础
一. web标准化 (1).内容与样式,行为分离 (2).html用来定义语义内容,以及内容的结构 (xhtml) (3).xhtml标准 a.xhtml 必须强制指定文档类型 DocType,HTM ...
- SharePoint 是哪些人设计、开发的?
闲下来的时候,我有时候会想:SharePoint 是哪些人设计.开发的? 毕竟,你说一个单选的字段,你从列表里面添加的时候,字段类型选的是 “Yes/No”:而如果你是通过编程把它加入列表的时候,字段 ...
- Stimulsoft入门视频
.NET框架下最全面的报表解决方案,支持多种报表导出格式,拥有简单且强大的报表引擎.本系列教程适合Stimulsoft Reports上手入门. 001 Stimulsoft Reports. ...
- 解决NSTimer存在的内存泄漏的问题
创建定时器会在一定的间隔后执行某些操作,一般大家会这样创建定时器,这样创建的定时,self对定时器有个引用,定时器对self也有个引用,造成了循环引用,最终造成了内存泄漏,如果定时器在做下载的操作就会 ...
- JokeClient-Swift 仿写学习
required init?(coder aDecoder: NSCoder) 可失败构造器 在init关键字后面添加问号(init?). 可失败构造器会创建一个类型为自身类型的可选类型的对象.你通过 ...
- Oracle导出excel
oracle导出excel(非csv)的方法有两种,1.使用sqlplus spool,2.使用包体 现将网上相关代码整理后贴出以备不时之需: 使用sqlplus: 使用sqlplus需要两个文件: ...
- Java 条形码 二维码 的生成与解析
Barcode简介 Barcode是由一组按一定编码规则排列的条,空符号,用以表示一定的字符,数字及符号组成的,一种机器可读的数据表示方式. Barcode的形式多种多样,按照它们的外观分类: Lin ...
- Spring类型转换 ConversionSerivce Convertor
以String转Date为例: 定义转换器: import java.text.ParseException; import java.util.Date; import org.apach ...
- ubuntu无限卡在logo界面
ubuntu默认的是lightdm显示管理器,GDM就是Gnome display manager,lightdm是ubuntu开发的代替gdm的显示管理器.如果ubuntu进不去图形界面,除了重新安 ...
- 编译安装zabbix3.2
1.1 环境准备 系统环境准备:redhat 6.6 64位mysql-5.6.34php-5.6.28zabbix-3.2.1配置前先关闭iptables和SELINUX,避免安装过程中报错. # ...