javascript初学总结_6

不念不忘少年蓝@ 2022-07-15 06:39 168阅读 0赞

<!DOCTYPE>
    <html>
    <head>
    <title>添加节点</title>
    <script type=text/javascript>
    window.οnlοad=function()
    {
    	var t=new Date().getTime();
    	var oBtn=document.getElementById('btn1');
    	var oUl=document.getElementById('ul1');
    	var oTxt=document.getElementById('txt1');
    	var aLi=document.getElementsByTagName('li');
    	var aA=document.getElementsByTagName('a');
    	oBtn.οnclick=function()
    	{
    		var oLi=document.createElement('li');
    		var oA=document.createElement('a');
    		oA.href="javascript:;";
    		oA.innerHTML="删除";
    		oLi.innerHTML=oTxt.value;
    		oLi.appendChild(oA);
    		if(aLi.length!=0)
    		{
    			oUl.insertBefore(oLi,aLi[0]);
    		}
    		else
    		{
    			oUl.appendChild(oLi);
    		}
    		for(var i=0;i<aA.length;i++)
    		{
    			aA[i].οnclick=function()
    			{
    				this.parentNode.parentNode.removeChild(this.parentNode);
    			}
    		}
    	}
    	for(var i=0;i<aA.length;i++)
    	{
    		aA[i].οnclick=function()
    		{
    			this.parentNode.parentNode.removeChild(this.parentNode);
    		}
    	}
    	var t_end=new Date().getTime()-t;
    	alert('运行时间:'+t_end+'毫秒');
    }
    </script>
    </head>
    
    <body>
    <input type="text" id="txt1">
    <button type="button" id="btn1">
    添加
    </button>
    <ul id="ul1">
    	<li>a<a href="javascript:;">删除</a></li>
    	<li>b<a href="javascript:;">删除</a></li>
    </ul>
    </body>
    </html>

收获：

1.当程序加载完以后，已存在的每一个a标签里都会有一个删除事件，当后来再添加一个li标签以后，该标签没有删除事件，所以必须重新执行一遍删除事件的添加；

2.可以通过new Date().getTime()得出程序运行的时间；

发表评论取消回复

表情：

评论列表（有 0 条评论，168人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript初学学习笔记6：JavaScript之克隆（浅层克隆，深度克隆）

浅层克隆要将对象 obj 克隆给对象 obj1 //浅层克隆实现 var obj = { name: 'abc',

爱被打了一巴掌/ 2022年11月24日 14:21/ 0 赞/ 145 阅读

相关 javascript初学总结_2

1.longdesc属性：使用 longdesc 属性，指向一个包含图像描述信息的页面： <img src="eg_logo_w3school.gif"

「爱情、让人受尽委屈。」/ 2022年07月15日 15:57/ 0 赞/ 193 阅读

相关 javascript初学总结_1

1.cursor(光标)属性该属性定义了鼠标指针放在一个元素边界范围内时所用光标的形状，如：cursor:pointer("一只手") 2.overflow属性该属性

柔光的暖阳◎/ 2022年07月15日 14:55/ 0 赞/ 181 阅读

相关 javascript初学总结_3

1.Document.creatDocumentFragment() 定义：创建一个新的空白文档片段DocumentFragment (ps:DocumentFra

冷不防/ 2022年07月15日 13:09/ 0 赞/ 166 阅读

相关 javascript初学总结_7_封装

<!DOCTYPE> <html> <head> <meta charset='utf-8'> <title>隐藏</title>

阳光穿透心脏的1/2处/ 2022年07月15日 07:22/ 0 赞/ 164 阅读

相关 javascript初学总结_6

<!DOCTYPE> <html> <head> <title>添加节点</title> <script type=text/javas

不念不忘少年蓝@/ 2022年07月15日 06:39/ 0 赞/ 169 阅读

相关 javascript初学总结_5

<!DOCTYPE HTML> <html> <head> <title>css函数</title> <style type="text

曾经终败给现在/ 2022年07月15日 06:16/ 0 赞/ 172 阅读

相关 javascript初学总结_4

1.placeholder 定义和用法： placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦

绝地灬酷狼/ 2022年07月15日 00:28/ 0 赞/ 207 阅读

相关 Python初学6-循环

1、for循环普通遍历 a = ['aaa','bbb','ccc'] for x in a: print(x) 嵌套列表遍历

待我称王封你为后i/ 2022年05月21日 23:51/ 0 赞/ 171 阅读

相关 netty初学总结

netty初学笔记阻塞与非阻塞同步与异步 BIO、NIO与AIO Springboot整合netty pom依赖目

短命女/ 2022年03月18日 15:20/ 0 赞/ 262 阅读