JavaScript教程（四）JavaScript中获取页面元素的方法

一.charAT():表示是把字符串中的每一个字母按照字符转换输出.
例:

<script type="text/javascript">
	var str=\'i love javascript\';
	for(var i=0;i<str.length;i++){
//	alert(str.length);//输出值为17,获取数组的长度
//		alert(str[i]);//输出i
//		document.write(str[i]);//输出i love javascript
		var chars=str[0];
//		alert(typeof chars);//输出结果string
//		if(str[i]<=\'o\'){   //在这里的判断是根据字母的大小顺序来判断输出
//			document.write(str[i]);//输出结果为i loe jaaci
//		}
//		if(str.charAt(i)>="o"){//charAt(i):表示是把字符串中的每一个字母  按照字符转换输出
//			continue;
//		}
//		document.write(str.charAt(i));//结果i le jaaci
		alert(str.indexOf(\'o\'));  //查询字符串中或是数组中字符的索引
		if(i<3){
			document.write(str[i]);
		}
	}

二.获取页面元素的方式
1.通过js的dom方法:可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了 id 属性的元素,获取到的是一个 html 对象,然后将它赋值给一个变量.
获取页面元素那么必须将获取元素的代码块放置在事件中
如果把 javascript 写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript 去页面上获取元素 div1 的时候,元素 div1还没有加载,解决方法有两种：
(1)将 javascript 语句放到 window.onload 触发的函数里面,获取元素的语句会在页面加载完后才执行.
例:

<script type="text/javascript">
	window.onload=function(){
		var div=document.getElementById(\'div1\');
//		alert(div);//输出结果为[object HTMLDivElement]
		div.style.width=200+\'px\';
		div.style.height=200+\'px\';
		div.style.background=\'red\';
//		div.style.border=\'5px dashed black\';//两种书写格式
		div.style.borderWidth=5+\'px\';
		div.style.borderColor=\'red\';
		div.style.borderStyle=\'dashed\';
//		获取页面中div的值(innerHTML与innerTEXT)
		var divContent=div.innerHTML;//获取页面元素中的内容(包含元素中的HTML的子元素)
		alert(divContent);//输出结果为 Hello JavaScript<p>爱学习</p>
//		var divContent=div.innerText;//获取页面中文本内容
//		alert(divContent);
	}
</script>
................
<body>
		<div id="div1">Hello JavaScript<p>爱学习</p></div>
</body>

innerHTML与innertext
在这里插入图片描述

(2)：将 javascript 放到页面最下边 (写入body中)
例:

<body>
		<div class="div1"   id="div1">Hello JavaScript<p>爱学习</p></div>
		<script type="text/javascript">	
//			1,通过id来获取页面元素
//			获取页面元素,那么必须将获取元素的代码块放置到事件中
			var div=document.getElementById(\'div1\');
//			alert(div);  返回的结果为: [object HTMLDIVElement]
			div.style.width=200+\'px\';
			div.style.height=200+\'px\';
			div.style.background=\'red\';
//			div.style.border=\'10px dashed black\';
			div.style.borderColor=\'black\';
			div.style.borderWidth=10+\'px\';
			div.style.borderStyle=\'dashed\';	
			
//			获取页面中div的值
//			innerHTML: 获取页面元素中的内容(包含元素中的html子元素)
//			var divContent =div.innerHTML;
				
//			innerText:获取页面元素中的文本内容
//			var divContent=div.innerText;
//			alert(divContent);
				
				
//			var divWidth=div.innerWidth;
//			alert(divWidth);
			div.innerHTML=\'<a href="#">超链接</a>学的不仅是技术\'
		</script>
	</body>

2.通过getElementsByclassName()根据元素的class获取元素
因为getElementsByClassName()获取到的结果是一个集合,要想获取单个的元素使用索引的方式获取
例:

<script type="text/javascript">
	window.onload=function(){
		var div=document.getElementsByClassName(\'div1\')[0];
//		alert(div);//输出结果为undefined
		div.style.width=200+\'px\';
		div.style.height=200+\'px\';
		div.style.background=\'green\';
	}
</script>

在这里插入图片描述
3.通过getElementsByTagname():根据元素标签名称获取元素
例:

<script type="text/javascript">
	window.onload=function(){
		var div=document.getElementsByTagName(\'div\')[0];
		div.style.width=200+\'px\';
		div.style.height=200+\'px\';
		div.style.background=\'green\';
		var divcontent=div.innerText;
		alert(divcontent);
	}
</script>