对象 - document对象 ¶

作者：KK
发表日期：2016.2.19

接下来我们开始学习一些常见的JS对象

document对象就是文档对象,代表了HTML元素文档,先看一些例子了解下它有什么用:

获取文档元素并对元素内容进行修改: ¶

以下代码用到的知识点:

调用getElementById方法指定ID得到一个元素对象,这个是你未来编程中经常经常经常经常接触到的方法!
设置innerHTML的值来修改元素的内容

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>document对象学习</title>
<script type="text/javascript">
function change(){
	var text = prompt('请输入你要修改成的内容');
	var div = document.getElementById('content');
	if(text.trim().length > 0){
		div.innerHTML = text;
	}else{
		div.innerHTML = '修改后的内容';
	}
}
</script>
</head>
<body>
	<div id="content">2222</div>
	<button type="button" onclick="change()">修改#content的内容</button>
</body>
</html>

以上代码中,使用了document的getElementById方法获取了一个id为content的元素对象(就是body里面那个id="content"的div)

直接修改body的内容 ¶
多余的HTML代码我就不写了,直接来核心的JS代码:
```
document.body.innerHTML = '新的body内容!';

//可以直接设置一段HTML哦!
//document.body.innerHTML = '<div><button type="button">按钮</button><a href="#">链接</a></div>';
```
(注意要将这句代码放在函数里通过click事件触发,或者放在body的onload属性里,不能放在body加载之前,因为那时候还没有body)

该方法在实际开发中偶尔会接触

修改网页标题 ¶
document.title = 'aaa_新的网页标题,看看标签是不是变了'; 演示这个方法只是为了让你多些了解document对象,但这个标题操作会比较少用

对象 - document对象 ¶

获取文档元素并对元素内容进行修改: ¶

直接修改body的内容 ¶

修改网页标题 ¶