<html>

<head>

	<title>DOM对象</title>

	<script type="text/javascript">

			function $(id) {

				return document.getElementById(id);

			}

			function insertText() {

				var val = window.prompt("请输入","");

				//alert(val);

				if(val == null || val == "")

					  return;

				//创建元素节点

				var op = document.createElement("p");

				//创建文本节点

				var ot = document.createTextNode(val);

				//添加子节点  设立关系

				op.appendChild(ot);

				var panel = $("opt");

				//添加到页面

				panel.appendChild(op);

			}

		   function insertImg () {

				var img = document.createElement("img");

				//设置属性

				img.setAttribute("src","2.gif");

				$("opt").insertBefore( img, $("opt").firstChild);

		   }

		   function deleteText() {

				//alert($("opt").lastChild.nodeName);

				var a = $("opt").childNodes;

				var b = new Array();

				var obj = null;

				for(var i = 0,j = 0; i < a.length; i++ ) {

					if(a[i].nodeType == Node.TEXT_NODE) {

					   continue;

					}

					b[j] = a[i];

					j++;

				}	

				$("opt").removeChild(b[b.length -1]);

		   }

	</script>

	</head>

	<body>

	<div >DOM对象操作</div>

	  1.</br>

		<div id="opt">

			  <p>javase</p>

			  <p>oracle</p>

			  <p>xml</p>

		</div>

		2.</br>

				 <input type="button" value="填加段落" onclick="insertText()"	/>

				 <input type="button" value="插入图片" onclick="insertImg()"	/>

				 <input type="button" value="删除最后" onclick="deleteText()"	/>

		</body>

</html>

javascript DOM操作 第19节的更多相关文章

  1. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  2. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  3. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  4. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  5. javascript DOM操作HTML文档

    文档对象模型(DOM)是W3C为解决浏览器混战时代不同浏览器环境之间的差别而制定的模型标准.W3C将文档对象模型定义为:是一个能让程序和脚本动态 访问和更新文档内容.结构和样式的语言平台.提供了标准的 ...

  6. 仅100行的JavaScript DOM操作类库

    如果你构建过Web引用程序,你可能处理过很多DOM操作.访问和操作DOM元素几乎是每一个Web应用程序的通用需求.我们我们经常从不同的控件收集信息,我们需要设置value值,修改div或span标签的 ...

  7. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  8. 常见的原生javascript DOM操作

    1.创建元素 创建元素:document.createElement() 使用document.createElement()可以创建新元素.这个方法只接受一个参数,即要创建元素的标签名.这个标签名在 ...

  9. Javascript DOM操作实例

          最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意.所以自己写一份实例,顺便巩固下学到的知识. ...

随机推荐

  1. linux驱动程序之电源管理之linux的电源管理架构（3）

    设备电源管理 Copyright (c) 2010 Rafael J. Wysocki<rjw@sisk.pl>, Novell Inc. Copyright (c) 2010 Alan ...

  2. 使用Visual Studio 2013编写可维护的本地可视化(natvis)

    在Visual Studio 2012中,我们介绍了创建可视化使用原生类型的能力natvis文件. Visual Studio 2013中包含了一些改进,使其更容易编写可视化的类,在内部利用收集来存储 ...

  3. Esper系列(六)子查询、Exists、In/not in、Any/Some、Join

    子查询 1   >= all (select salary from orderEvent.win:length_batch(5))"; 注意: 运行以上三个例句后的结果,刚开始让很费 ...

  4. HW2.3

    import java.util.Scanner; public class Solution { public static void main(String[] args) { final dou ...

  5. php数组相加 两个数组键名相同 后者不能覆盖前者

    array(“a”)+array(“b”)结果还是array(“a”) array(“a”)+array(“b”)的结果是 array(“a”) 因为,它们等效于array(“0″=>”a”)+ ...

  6. 程序员提高工作效率的15个技巧【Facebook】

    程序员提高工作效率的15个技巧[Facebook] 作者: habadog 日期: 2015 年 02 月 13 日发表评论 (0)查看评论 程序员提高工作效率的15个技巧[Facebook] 1,D ...

  7. redis多实例运行

    有的时候会遇到一种情况,在一台服务器,一个redis实例会出现不够用的情况 那么这时我们可以创建多个实例,以满足不同的业务需求和功能需求 1.首先创建一个运行redis的普通用户 useradd -s ...

  8. 拼接<a>标签相关属性

    <s:iterator value="#session.funcs" id="sonbean"> <s:if test="%{#so ...

  9. Linux守护进程的编程实现

    Linux 守护进程的编程方法 守护进程(Daemon)是执行在后台的一种特殊进程.它独立于控制终端而且周期性地执行某种任务或等待处理某些发生的事件.守护进程是一种非常实用的进程.Linux的大多数s ...

  10. oc中的类学习笔记1

    1.oc中的类和构造方法 NSAutoreleasePool * pool =[[NSAutoreleasePool alloc] init]; NSAutoreleasePool是一个类,alloc ...