JavaScript操作DOM对象
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+" "+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+"< >"+this.age+"<br>";
}
//再次NEW
var p=new Person("张三",24);
document.write(p.name+" "+p.age);
</script>
</html>
没什么可说的，JAVA SE基础掌握好一切都OK
【6】
JavaScript操作DOM对象的更多相关文章
- javaScript操作DOM对象（看三遍，敲三遍，写三遍！ 不会你找我）！！
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- 第四章 JavaScript操作DOM对象
第四章 JavaScript操作DOM对象 一.DOM操作 DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API接口,1988年,W3C发布了第一级 ...
- JavaScript 操作DOM对象
1)JavaScript 操作DOM對象 1.DOM:是Document Object Model 的缩写,及文档对象模型 2.DOM通常分为三类:DOM Core(核心).HTML-DOM 和 ...
- JQuery制作网页—— 第三章 JavaScript操作DOM对象
1. DOM:Document Object Model(文档对象模型): DOM操作: ●DOM是Document Object Model的缩 ...
- 使用jQuery快速高效制作网页交互特效-----JavaScript操作DOM对象
一.DOM操作分类 使用JavaScript操作DOM时通常分为三类:DOM Core.HTMl--DOM和CSS-DOM 二.访问节点 节点属性 三.节点信息 四.操作节点的属性 语法: ge ...
- accp8.0转换教材第7章JavaScript操作DOM对象理解与练习
程序调试,chrome开发人员工具,DOM操作,节点和节点间的关系,节点信息,操作节点,获取元素 一.单词部分 ①alert警告②prompt提示③parentNode父节点④childNode子节点 ...
- 第三章 JavaScript操作Dom对象
常用的方法: 1.访问节点: 通过Document.getElementByXXX()获得一个指定节点-->再通过以下属性节点访问节点:第一部分:节点属性a:parentNode 返回节点的父节 ...
- JavaScript 操作 DOM 常用 API 总结
文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前, ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
随机推荐
- HDU 2841 Visible Trees 数论+容斥原理
H - Visible Trees Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u S ...
- duapp获取mysql用户名密码等等……
duapp呵呵,又是云!比起新浪,这个免费.下面是:(你懂的) <?php/*数据库名称写自己创建的*/$dbname = 'rjKagJvksJdyUKfyPfjY'; /*从环境变量里取出数 ...
- SpringMVC详细示例实战
一.SpringMVC基础入门,创建一个HelloWorld程序 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 1 2 3 4 5 6 ...
- OD使用心得
查看堆栈 从返回前面的竖线 到 竖线结束 也就是到 (从返回 msconfig.0065a318) 全看.这样不会丢失些东西 或者 看堆栈 直接将堆栈框拉大 避免有些东西没有看到
- 电赛总结（二）——AD芯片总结之AD7705
1.特性参数 (1)16位无丢失代码性AD转化器 (2)只需要3.3V供电(即只需要单片机即可供电) (3)双通道差分输入 (4)基准电压为2.5V时,在单极性信号下,输入范围是0到2.5V,在双极性 ...
- 简单的Java Web服务器
import java.io.FileInputStream; import java.io.OutputStream; import java.net.ServerSocket; import ja ...
- Swift版iOS游戏框架Sprite Kit基础教程下册
Swift版iOS游戏框架Sprite Kit基础教程下册 试读下载地址:http://pan.baidu.com/s/1qWBdV0C 介绍:本教程是国内唯一的Swift版的Spritekit教程. ...
- 二分搜索 UVALive 6076 Yukari's Birthday (12长春K)
题目传送门 题意:问使得sum (k^i) = n || n -1 (1 <= i <= r) 的min (r*k)组合的r和k 分析:r的最大不会超过40,枚举r,二分搜索k.注意会爆 ...
- POJ1780 Code（欧拉路径）
n位密码,要用尽可能短的序列将n位密码的10n种状态的子串都包括,那么要尽量地重合. 题目已经说最短的是10n + n - 1,即每一个状态的后n-1位都和序列中后一个状态的前n-1位重合. 这题是经 ...
- JSTL 的 if else : 有 c:if 没有 else 的处理
jstl的c:if 没有else 想要实现if...else...: 可以用下面的解决 -------------------------------------------------------- ...