淘先锋技术网

首页 1 2 3 4 5 6 7

生活明朗,万物可爱?

1、 document.getElementById(id)用法

1、 document.getElementById(id);
[作用] 通过当前元素节点的id,获取对应的元素节点

 

2、元素节点属性

通过这个节点对象,访问它的一系列属性。
tagName 获取元素节点的标签名
innerHTML 获取元素节点标签中的内容,解析标签
 

3、HTML中的属性和方法

id
title
style
className 对应的是class
访问这些节点的方法
元素节点.属性名
或者
元素节点(属性名)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom_byid元素</title>
		<script type="text/javascript">
			/* 
			 document.getElementById(id);
			 [作用] 通过当前元素节点的id,获取对应的元素节点。
			 
             元素节点属性
			 通过这个节点对象,访问它的一系列属性。
			 tagName 获取元素节点的标签名
			 innerHTML 获取元素节点标签中的内容,解析标签
			 
			 HTML属性的属性
			 id
			 title
			 style
			 className 对应的是class
			 
			 访问这些节点
			 元素节点.属性名
			 或者
			 元素节点(属性名)
			 
			 */
		/* 	var oDiv1=document.getElementById("Div1");
			alert(oDiv1);//运行结果为null,原因为代码自上而下运行,因此我们运行这部分的内容并没有加载
			 解决办法:直接将整个script标签放入body中(语法规范,一般放入head中)
			 或者用window.onload
			 */
			window.onload=function(){/* 在页面加载完成以后的函数 */
				var oDiv1=document.getElementById("Div1");
					// alert(oDiv1.tagName); 获取标签名
					// alert(oDiv1.innerHTML);/* 获取标签中的内容 */
					// oDiv1.innerHTML="<h1>测试</h1>";/* innerHTML赋值时如果含有标签会直接解析 */
					// alert(oDiv1.id);
					// alert(oDiv1.title);
					// alert(oDiv1.className); 这三个为取值操作
					/* oDiv1.title="tt";
					oDiv1.className="obt"; */
					// alert(oDiv1.style);//(object MStyeCSSPropries css样式
					// alert(oDiv1.style.width);
				/* 	oDiv1.style.width="400px"; */
				
				/* 
				 在style样式中,background-color属性需要去掉-,然后再将单个单词color的首字母大写
				 */
                 // alert(oDiv1.style.backgroundColor);输出red;
				 oDiv1.style.backgroundColor="yellow";
			}
			
		</script>
	</head>
	<body>
		<div id="Div1" title="helloworld" class="box" style="width: 300px;height: 300px; background-color: red;"><en>测试div</en></div>
	</body>
</html>