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>

　　输出结果：

JavaScript操作DOM对象

输出的结果为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对象

相关文章