js的精华即是操作DOM对象

【1】先看代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>

<p>JS之操作DOM对象</p>

<div id="parent">
	<div id="son">
		<font id="fon">:</font><input id="txt" name="" type="text" />
	</div>
</div>

<br>
<input type="button" value="修改DOM" onclick="modify();">
<input type="button" value="增加DOM" onclick="addDom();">
<input type="button" value="删除DOM" onclick="removeDom();">

</body>

<script>
function modify()
{
	var x=document.getElementById("fon");
	x.innerHTML="用户名：";
	var y=document.getElementById("txt");
	y.value="jack";

}
function addDom()
{
	var pre=document.createElement("p");
	var t=document.createTextNode("前面的");
	pre.appendChild(t);
	var parent=document.getElementById("parent");
	var son=document.getElementById("son");
	parent.insertBefore(pre,son);

	var pre2=document.createElement("p");
	var t2=document.createTextNode("后面的");
	pre2.appendChild(t2);
	parent.appendChild(pre2);
}
function removeDom()
{
	var parent=document.getElementById("parent");
	var child=document.getElementById("son");
	parent.removeChild(child);
}

</script>
</html>

　　

【2】

根据素材控制灯泡亮灭而来

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<img id="water" alt="alt" src="tobe.jpg" onclick="ch();">

</body>
<script type="text/javascript">

function ch()
{
	//控制 隐现 根据src图片的字符串索引进行判断
	var x=document.getElementById("water");
	if(x.src.indexOf("tobe.jpg")>=0)
		x.src="create.jpg";
	else
		x.src="tobe.jpg";

}
</script>
</html>

　　

【3】
修改DOM的CSS样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p id="sty" >修改DOM的CSS样式</p>
<input id="input" type="button" onclick="modifyStyle();" value="点击" />

</body>
<script type="text/javascript">

function modifyStyle()
{
	var x=document.getElementById("sty");
	//alert(x);
	x.style.color="red";
	//带有 - 需要首字母大写
	x.style.fontSize="30px";
	x.style.fontFamily="黑体";

}
</script>
</html>

　　【4】

JS的对象

可以动态的创建对象的属性和方法（或称为函数）

也可以动态的删除对象的属性和方法

删除时有delete和 赋值给undefined两种，

看第一种：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p>JS对象</p>

<script>
	function speak(str)
	{
		document.write(str+"<br>");
	}
	//定义对象，Object跟在JAVA中一样是所有类的父类，也就是老祖宗
	var obj=new Object();
	obj.name="smith";//动态创建了属性
	document.write(obj.name+"<br>");

	//动态添加函数
	obj.func=speak;
	obj.func("www.baidu.com");

	//动态删除属性分为 delete和赋值给undefined两种
	delete obj.name;
	document.write(obj.name+"<br>");//输出结果是undefined

</script>
</html>

　　输出结果：

输出的结果为undefined。所以也可以直接赋值

obj.name=undefined;
document.write(obj.name+"<br>");//输出结果也是undefined

删除方法：

delete obj.func;
obj.func("Allen");//此行提示错误

【5】

JS的构造方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p>JS构造方法（构造函数）</p>

<script>

	function func(title,price){
		this.title=title;
		this.price=price;
		document.write(this.title+"&nbsp"+this.price+"<br>");
	}

	//于是可以跟JAVA一样new了
	var book=new func("唐诗三百",21.5);

	//这样不new也可以
	func("宋词",45);

	//这样而return也可以
	function Person(name,age){
		this.name=name;
		this.age=age;
		return this.name+"<&nbsp>"+this.age+"<br>";
	}	

	//再次NEW
	var p=new Person("张三",24);
	document.write(p.name+"&nbsp"+p.age);

</script>
</html>

没什么可说的，JAVA SE基础掌握好一切都OK　

　【6】

JavaScript操作DOM对象的更多相关文章

  1. javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！

    DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE        2.HTM ...

  2. 第四章 JavaScript操作DOM对象

    第四章   JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...

  3. JavaScript 操作DOM对象

    1)JavaScript  操作DOM對象 1.DOM:是Document  Object  Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...

  4. JQuery制作网页—— 第三章 JavaScript操作DOM对象

    1. DOM:Document Object Model(文档对象模型):          DOM操作:                   ●DOM是Document Object Model的缩 ...

  5. 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象

    一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM    Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...

  6. accp8.0转换教材第7章JavaScript操作DOM对象理解与练习

    程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...

  7. 第三章 JavaScript操作Dom对象

    常用的方法: 1.访问节点: 通过Document.getElementByXXX()获得一个指定节点-->再通过以下属性节点访问节点:第一部分:节点属性a:parentNode 返回节点的父节 ...

  8. JavaScript 操作 DOM 常用 API 总结

    文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...

  9. 使用原生 JavaScript 操作 DOM

    原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...

随机推荐

  1. [转]处理程序“PageHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”

    今天安装了windows7 开发web项目需要安装IIS,当安装完以后,web程序已经映射到了本地IIS上,运行出现如下错误提示 处理程序“PageHandlerFactory-Integrated” ...

  2. [Android Pro] Android 打包流程

    Android 打包流程: 官网地址:http://developer.android.com/tools/building/index.html 具体的打包步骤如下: 1:生成R.java类文件:E ...

  3. July 26th, Week 31st Tuesday, 2016

    The best preparation for tomorrow is doing your best today. 对明天最好的准备就是今天做到最好. The road toward tomorr ...

  4. css3学习总结6--CSS3字体

    使用自己需要的字体 在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件. 如需为 HTML 元素使用字体,请通过 font-family ...

  5. vm 负责虚拟机出现“”适配器 的mac地址在保留地址范围内‘’

    我自己在windows中文件中,直接将一个虚拟机进行复制了一份,后用vm打开, 选择我已经移到,结果会出现了一下的情况, 导致了我无法ping 通,故我看到一下提示: 原来是我两台虚拟机的MaC ,即 ...

  6. Linux网络编程必看书籍推荐

    首先要说讲述计算机网络和TCP/IP的书很多. 先要学习网络知识才谈得上编程 讲述计算机网络的最经典的当属Andrew S．Tanenbaum的<计算机网络>第五版,这本书难易适中. &l ...

  7. 二、JavaScript语言--JS基础--JavaScript进阶篇--流程控制语句

    1.if语句--做判断 if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件) { 条件成立时执行代码} 注意:if小写,大写字母(IF)会出错! 假设你应聘web前端技术开发岗位, ...

  8. Linux中获取当前程序的绝对路径

    代码如下: char current_absolut_path[MAX_SIZE] = ""; memset(current_absolut_path,,MAX_SIZE); // ...

  9. jquery easy ui 1.3.4 快速入门（1）

    什么是easyui jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂 ...

  10. select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET(转)

    select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供select函数来实现多路复用输入/输出模型, 原型: int select(int maxfd,fd_set *rds ...