javascript中document对象的知识点

javascript中document对象的知识点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript中document对象的知识点,雪豹软件工作室</title>
<script type="text/javascript">
	/*document对象的方法*/
	//document.write("hello");//向浏览器窗体的body内写入内容,一般做项目的时候用的比较少
	//关于<!-- //-->注释的知识，可参考http://blog.csdn.net/qq_33107435/article/details/77099204
	<!--
	function testGetElementById(){
		//document.getElementById("");
		alert("test");
	}
	//-->
	
	/*getElementById方法的使用*/
	function testGetElementById(){
		//document.getElementById("控件或者对象的id属性的值")这句话,可以获得控件或对象
		var xiaowugui = document.getElementById("myXiaowugui");
		/*
		其实document.getElementById("控件或者对象的id属性的值")这句话可以不写,直接使用控件的id属性的值来得到控件，如下例子
		*/
		//alert("通过控件的id属性的值的方式直接得到" + myXiaowugui.width + " " + myXiaowugui.height);
		/*
		通过控件的id属性的值直接得到控件，这样的方式不能保证所有的浏览器都支持，可能有的浏览器不支持这种写法，所以为了规范起见，最好还是按
		照document.getElementById("控件或者对象的id属性的值")这种方式来写。
		*/
		alert("通过getElementById方式得到" + xiaowugui.width + " " + xiaowugui.height);
		xiaowugui.width = 480;
		xiaowugui.height = 480;
	}
	
	/*getElementsByName方法的使用*/
	function testGetElementsByName(){
		var userNames = document.getElementsByName("userName");
		alert(userNames.length);
		for (var i = 0; i < userNames.length; i++) {
			alert(userNames[i].value);
		}
	}
	
	/*getElementsByTagName方法的使用*/
	function testGetElementsByTagName(){
		var inputs = document.getElementsByTagName("input");
		for (var i = 0; i < inputs.length; i++) {
			alert(inputs[i].type + " - " + inputs[i].name + " - " + inputs[i].value);
			alert(inputs[i].size);
			inputs[i].size = inputs[i].size * 2; 
			alert(inputs[i].size);
		}
	}

	function changeBackgroundColor(){
		var obj = document.getElementById("myTest");
		obj.style.backgroundColor = "#EED2EE";//改变div的背景颜色
		//obj.style.border = "solid";
		//在javascript中访问控件的属性需要去掉-中划线，然后再把中划线后面的每个单词的开头字母改成大写(即骆驼式或者叫驼峰式写法)
		//obj.style.borderColor = "red";
		//obj.style.borderWidth = "6px";
		obj.style.border = "8px solid #CD0000";
		var obj2 = document.getElementById("myTr");
		obj2.bgColor = "#CDCD00";//改变table控件中的tr的背景颜色
	}
</script>
</head>
<body>
<br><br>
<!-- 测试A链接标签内title属性,鼠标悬停,提示内容换行,可参考网页http://www.divcss5.com/jiqiao/j510.shtml  -->
<div id="myTest" style="width: 240px;height: 240px;background-color: #7CCD7C;" >测试改变div的背景颜色</div><br>
	<table>
		<tr id="myTr" bgcolor="#C67171">
			<td>测试改变背景颜色</td>
		</tr>
	</table>
	<input type="button" value="改颜色" onclick="changeBackgroundColor()"><br><br>
<input name="userName"><br><br>
<input name="userName"><br><br>
<input name="userName"><br><br>
<input name="userName"><br><br>
<a href="#" title="电影名称:战狼2&#13;导演:吴京&#10;上映时间:2017-07-28&#10;类型：战争、动作">战狼2</a><br><br>
<input type="button" value="测试" onclick="testGetElementById()"><br><br>
<input type="button" value="测试getElementById" onclick="testGetElementById()"><br><br>
<input type="button" value="测试testGetElementsByName" onclick="testGetElementsByName()"><br><br>
<input type="button" value="测试testGetElementsByTagName" onclick="testGetElementsByTagName()"><br><br>
<img title="动漫小乌龟壁纸" src="img/xiaowugui.jpg" id="myXiaowugui" alt="壁纸"><br><br>
<img title="动漫小乌龟壁纸" src="img/cry6.gif" id="myXiaowugui" alt="壁纸"><br><br>
</body>
</html>
javascript中document对象的知识点

猜你喜欢
