JavaScript获取元素的方法

时间 2019-12-10

标签 javascript 获取元素方法栏目 JavaScript 繁體版

原文原文链接

获取页面元素的方式javascript

1.经过js的dom方法:可使用内置对象 document 上的 getElementById 方法来获取页面上设置了 id 属性的元素,获取到的是一个 html 对象,而后将它赋值给一个变量.html

获取页面元素那么必须将获取元素的代码块放置在事件中java

若是把 javascript 写在元素的上面,就会出错,由于页面上从上往下加载执行的,javascript 去页面上获取元素 div1 的时候,元素 div1尚未加载,解决方法有两种：数组

(1)将 javascript 语句放到 window.onload 触发的函数里面,获取元素的语句会在页面加载完后才执行.浏览器

注:属性的操做包括bash

属性的读和写。dom

操做属性的方法函数

“.” 操做
“[ ]”操做

属性的写法学习

一、html 的属性和 js 里面属性写法同样

二、“class” 属性写成 “className”

三、“style” 属性里面的属性，有横杠的改为驼峰式，好比：`font-size`，改为 `style.fontSize`
复制代码

经过.操做属性：ui

经过[ ]操做属性：

<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>
复制代码

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>		
</head>
	<body>
		<div class="div1"   id="div1">Hello JavaScript<p>爱学习</p></div>
		<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='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>
</html>
复制代码

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
//				如下是根据索引获取页面中第二个div
				var div=document.getElementsByClassName('div1')[1];
//				alert(div);
				div.style.width=200+'px';
				div.style.height=200+'px';
				div.style.background='red';	
			}
		</script>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div1"></div>
	</body>
</html>
复制代码

3.经过getElementsByTagname():根据元素标签名称获取元素(返回集合对象数组,能够经过*方式获取页面上全部的元素)

<body>
<div id="div1">好好学习每天向上<p>请认真听讲</p></div>
<div id="div1">好好学习每天向上<p>请认真听讲</p></div>
<div id="div1">好好学习每天向上<p>请认真听讲</p></div>
<script type="text/javascript">
   var div=document.getElementsByTagName('*').innerHTML;
   alert(div1);
</script>
</body>
复制代码

innerHTML和innerText的区别:

共同点：innerHTML和innerText都会把元素内内容替换掉。

不一样点：

(1)innerHTML:也就是从对象的起始位置到终止位置的所有内容,包括Html标签。

(2)innerText:从起始位置到终止位置的内容, 但它去除Html标签

innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，所以，尽量地去使用innerHTML。