<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. ab的排列 aa , ab ba,bb

    package reverseList; public class Main { static void perm(char c[],int lev,char ans[]) { if(c.length ...

  2. C程序设计 习题之1-20 detab

    码农一定是最需要动手实操的行业之一.有一句话叫,好记性不如烂笔头,牵强附会引申到这里,变成看书百遍,不如码字运行一遍.是不是有那么一点味道?哈哈! 这几天看的<C程序设计>,看完每个章节还 ...

  3. 如何从Windows Phone 生成PDF文档

    我需要从我的Windows Phone应用程序生成PDF. 遗憾的是没有标准的免费的PDF生成库在Windows Phone上运行. 我不得不自己生成PDF,通过直接写入到文件格式. 这竟然是真的很容 ...

  4. ehcache在windows下使用RMI同步时出现的问题

    问题 最近的项目由于OP分配的机器没有配Redis或Mem,为了解决tomcat的集群问题,项目使用了Ehcache作为缓存.Ehcache使用RMI进行同步,但在本地测试时出现了缓存未同步的问题.最 ...

  5. ssh-copy-id password

  6. eclipse安装插件checkstyle

    最近听说了一个eclipse神器:checkstyle,可以帮助java开发人员规范代码,对我这种有代码洁癖的人来说,这有着不小的魔力啊,必然要安装试一试啊. 我最喜欢的安装方式是 输入一个安装网址, ...

  7. C++/C#/java开发支持求解

    本人大一学C语言,大二学VB,大三学VC,毕业后工作前两年用C++,接着两年用C#,最近几个月Android开发用Java. 以下本人总结以下,有些疑惑希望大师帮忙解答. 1. C语言,精简,灵活,适 ...

  8. 一步一步学android控件（之十六）—— CheckBox

    根据使用场景不同,有时候使用系统默认的CheckBox样式就可以了,但是有时候就需要自定义CheckBox的样式.今天主要学习如何自定义CheckBox样式.在CheckBox状态改变时有时需要做一些 ...

  9. 【面试虐菜】—— MongoDB知识整理

    为什么我们要使用MongoDB? 特点: 高性能.易部署.易使用,存储数据非常方便.主要功能特性有: 面向集合存储,易存储对象类型的数据. 模式自由. 支持动态查询. 支持完全索引,包含内部对象. 支 ...

  10. int 指令

    int n 也就是中断操作->根据中断类型码来查找中断向量表(中断向量表在0-3ffh这个内存空间) 调用int n 也就操作了下面的步骤 1)取中断类型码n: 2)标志寄存器入栈,IF=0,T ...