对象 - Dom元素对象 ¶

本文导航

不存在时会返回null值
标签有很多,元素对象也有很多
通过JS来创建元素并添加到文档中

作者：KK
发表日期：2016.2.19

Dom元素简单地说就是标签元素,HTML代码中的标签是可以进行程序操作的,操作之前就需要先将它转化成JS对象来调用一些方法或者属性进行操作

其实前面介绍document对象已经初步演示了一下,我这里正式讲解

假设文档中有一个id="xxx"的标签时,使用document.getElementById('xxx')就可以得到这个对象,比如:

<script>
var xxxDiv = document.getElementById('xxx');
alert(xxxDiv); //会提示一个字符串说明这是一个什么对象
xxxDiv.innerHTML = '修改的内容';
</script>
<div id="xxx">原始内容</div>
<button onclick="test()" type="button">操作标签元素</button>

而为了证明它是一个对象,你可以试下alert(typeof(div))看看它的变量类型,绝对不是string类型(字符串)和number类型(数字)

不存在时会返回null值 ¶

如果传递一个不存在的id给getElementById方法则会查找不到对象,会返回null值:

testId = 'xxx222';
var xxxDiv2 = document.getElementById(testId); //修改下这个ID参数
if(xxxDiv == null){
	alert(testId + ' 这个ID的标签元素不存在!');
}else{
	alert(testId + ' 这个ID是存在的!');
}

然后通常新手会遇到这种问题,因为他们学的教程可能没提到这个问题或者没注意到,下面代码就是取得了一个null值

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>注意文档加载顺序</title>
<script type="text/javascript">
var contentDiv = document.getElementById('content');
alert(contentDiv); //null
contentDiv.innerHTML = '修改后的内容'; //这句代码会执行失败,因为contentDiv不是一个对象,而是null
</script>
</head>
<body>
	<div id="content">原始内容</div>
</body>
</html>

原因是文档加载顺序,之前介绍事件时已经略有提到过,浏览器对网页代码是从上到下加载的,所以运行上面那段JS代码的时候,下面body都还没出生呢,更别说#content啦

解决办法就是在页面加载完成之后才执行你的代码,以现在所学到的知识,应该先将代码放在一个函数里,然后body的onload属性执行这个函数即可,例子:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>注意文档加载顺序</title>
<script type="text/javascript">
function modifyContent(){
	var contentDiv = document.getElementById('content');
	alert(contentDiv); //object HtmlDivElement
	contentDiv.innerHTML = '修改后的内容';
}
</script>
</head>
<body onload="modifyContent()"><!--重点是这个onload属性执行函数-->
	<div id="content">原始内容</div>
</body>
</html>

后面还有很多对元素操作的演示代码,你复制我的代码到文件中进行测试时,注意要在onload之后执行,不然只会得不到对象而无法操作的哦

不过其实只要被操作的目标元素"出生了"就可以了是不是?告诉你哦,你只要把script标签放到要操作的标签后面就可以了

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>注意文档加载顺序</title>
</head>
<body onload="modifyContent()"><!--重点是这个onload属性执行函数-->
	<div id="content">原始内容</div>
	<p>中间插个p标签</p>

	<!--我上面加个p标签是为了证明这个script标签只要放在#content后面任何位置就行,不是要紧跟着#content-->
	<script type="text/javascript">
	var contentDiv = document.getElementById('content');
	alert(contentDiv); //object HtmlDivElement
	contentDiv.innerHTML = '修改后的内容';
	</script>
</body>
</html>

标签有很多,元素对象也有很多 ¶

不是所有标签都是同一种元素对象来的

<script>
function test(){
	var div = document.getElementById('div');
	alert(div); //显示 object HtmlDivElement

	var a = document.getElementById('link');
	alert(a); //直接显示网址

	var img = document.getElementById('img');
	alert(img); //显示 object HtmlImageElement
}
</script>
<button onclick="test()">点我测试</button>

<div id="div">div的内容</div>
<a id="link" href="http://www.kkh86.com/it/index.html">野生程序员学习大纲</a>
<img id="img" src="/it/face/cahan.gif"/>

并且不同的元素对象也有不同的属性

<script>
function test(){
	var div = document.getElementById('div');
	alert('尝试访问div.value属性,结果是:' + div.value);

	var input = document.getElementById('age');
	alert('尝试访问input.value属性,结果是:' + input.value); //结果是18,说明访问value属性成功,也就是标签上的value属性
	input.value = 99; //此时标签上显示的数字也变成了这个值

	var img = document.getElementById('img');
	alert(img.src); //就是标签的src属性值
	img.src = 'http://www.kkh86.com/it/face/cahan.gif';
}
</script>
<button onclick="test()">点我测试</button>

<div id="div" value="333">div的内容</div>
<img id="img" src="http://www.kkh86.com/it/face/jingkong.gif"/>
<input id="age" value="18" />

所以,访问元素对象的属性之前要先看看你这个是什么元素的对象,如果是div就不会有value属性了,并且你在div里加value属性也是没用的,比如<div id="div" value="333">div的内容</div>,那么访问div.value是还是undefined,因为在HTML标准的规定中,div就是没有value的,除非你用点别的手段去实现

元素可以通过其它方式获取,不一定要document.getElementById,这个后面我们学了数组之后再告诉你~

通过JS来创建元素并添加到文档中 ¶

var link = document.createElement('a'); //创建一个标签元素对象,这个参数字符串 a 就是标签名称,表示创建a标签
link.href = 'http://www.kkh86.com/it/index.html'; //设置链接地址
link.innerHTML = '野生程序员的成长之路'; //设置链接文字

//调用document.body的appendChild方法来将这个链接添加到文档流中,还记得CSS样式知识中提到的"文档流"吗?
document.body.appendChild(link);

也就是说,本来只是一个内存变量var link = ...,但是通过appendChild将它从内存添加到了浏览器窗口的HTML文档元素中,进入了页面