JS DOM与BOM操作详解-优快云博客

Js的DOM操作

DOM:Document object Modle, 文档对象操作

每个HTML页面就是一个文档,可以给每个标签/元素当作对象

获得DOM对象

通过id获得Dom对象，Var id = Document.getElementById()；

<body>
	<div>
	 	div1
	 		<div>
	 		div1-1
	 			<p id = "p1">div-div-p</p>
	 		</div>
	</div>

</body>
<!-- js -->
<script type="text/javascript">
//根据id获得元素对象
var id = document.getElementById("p1");
alert(id.nodeName);
//获得标签名
</script>

通过标签名获得Dom对象，如果有同名的标签,会获得多个对象 vardivArr = document.getElementsByTagName("div");

//根据标签名数组,返回存储所有同名标签的集合
var divArr = document.getElementsByTagName("div");
//获得集合长度
//alert(divArr.length);
//遍历
for(var i=0;i<divArr.length;i++){
	//item(index);通过下标获得集合中的元素对象
	//alert(divArr.item(i));
	//通过元素对象,获得标签名
	alert(divArr.item(i).nodeName);//DIV
}

通过标签的class值选择与标签名类似,会返回具有相同class值的所有标签集合.var objArr =document.getElementByClassName(“classvalue”);

var objArr = document.getElementsByClassName("cp");
for(var i=0;i<objArr.length;i++){
		//innerHTML获得/设置 标签内的内容
alert(objArr.item(i));
}

通过Dom对象改变标签内的内容

innerHTML后设置的字符串的值,里面可以设置标签内的内容为其他标签

Js的函数

类似Java的方法，用于执行某个功能

普通函数定义格式

function 方法名(形参){

函数体

[return 1;]//可写可不写

}

调用:[var r = ]方法名(实参);//可以接受返回值

js的函数定义中没有返回值类型
如果函数想返回数据，直接使用return 值;的形式返回即可，调用函数就可以接收返回值
参数列表中定义参数,不需要写数据类型,也不需要写var ，直接写变量名,多个用”，”隔开

<script type="text/javascript">
	//1无参无返回值
	function fun1(){
		console.log("1无参无返回值");
	}
	//2无参有返回值
	function fun2(){
		console.log("2有参有返回值");
		var a = "我是返回值";
		return a;
	}
	//3有参无返回值
	function fun3(a){
		console.log("3有参无返回值= "+a);
	}
	//4有参有返回值
	function fun4(a){
		console.log("4有参有返回值 = "+(a*a));
		return a*a;	
	}
	//5多个参数
	function fun5(a,b,c){
		console.log("a = "+a+", b= "+b+", c = "+c);
	}
//调用函数
//fun1();
//==============================
/* var r = fun2();
alert(r); */
//==============================
//	fun3(222);
//fun3("java");
//==============================
	//alert(fun4(3));
//==============================
	//是参与形参个数一致,正常
	fun5(1,2,3);
	//实参比形参个数少,没有没赋值的形参属于undefined未定义
	fun5(1,2);
	//实参此=比形参个货数多,正常赋值的正常使用,多出的实参,舍弃
	fun5(1,2,3,4);
	fun5();
</script>

//匿名函数使用方法1
var a = function(){
		console.log("匿名函数");
	}
	a();//调用匿名函数
//匿名函数使用方法2
p1.onclick = function(){
		console.log("匿名函数");
	}