<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. Java笔记(二十三)……Map集合

    Map接口 Map<K,V> 该集合存储的是键值对,成对往集合里存,而且要保证键的唯一性 常用方法 添加 Vput(K key, V value) voidputAll(Map<? ...

  2. Java笔记(二十)……线程间通信

    概述 当需要多线程配合完成一项任务时,往往需要用到线程间通信,以确保任务的稳步快速运行 相关语句 wait():挂起线程,释放锁,相当于自动放弃了执行权限 notify():唤醒wait等待队列里的第 ...

  3. Weka 入门3

    这次我们介绍Evaluation类.在上一次中我们只是单纯的预测了分类值,并没有其他评价数据.这场我们使用Evalution类.首先初始化一个Evaluation对象,Evaluation类没有无参的 ...

  4. 【Java基础】Java中的多态

    什么是多态 多态是一个对象的多种实现,是建立在继承的基础上的,即对象“人”,有老师和学生不同的实现,其实总结起来就是允许将子类类型的指针赋值给父类类型的指针. 多态的发生条件 多态发生的前提是:1. ...

  5. mongodb的固定集合（优化效率）

    mongodb固定集合(Capped Collection)和大文件管理(GridFS)   Capped Collection   固定集合(Capped Collection)是性能出色的有着固定 ...

  6. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  7. 使用freemarker生成html

    http://herryhaixiao.iteye.com/blog/677524 由于freemarker这个技术很久很久就有了,注释我就没写得很详细了,相信大家都看得懂.下面就直接上代码以及一些代 ...

  8. ubuntu14.04如何卸载qq

    ubuntu安装了wine qq怎么去卸载呢?现在wine qq 比较好用的有ubuntukylin官网与deepin linux官网使用的deepin版本wine qq 2012国际版,还有Long ...

  9. 横竖屏事件响应（viewWillLayoutSubviews和通知）两种方式

    转载:http://blog.csdn.net/nogodoss/article/details/17246489 最近搞横竖屏,获得一些心得,特记录下来. 做横竖屏最重要的是确定横竖屏响应的接口.目 ...

  10. http://xss.heimaoseoer.com/TIqiri?1413093855

    http://xss.heimaoseoer.com/TIqiri?1413093855 xss教程地址