1. alert弹窗，会中断代码执行
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<meta charset="utf-8">
<style>
#box {
width: 150px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div id='box'></div>
</body>
<script>
var box = document.getElementById('box');
alert(box)
</script>
</html>
2. document.write()将内容写到HTML文档中，会覆盖原来页面
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<meta charset="utf-8">
<style>
#box {
width: 150px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div id='box'></div>
</body>
<script>
var box = document.getElementById('box');
document.write(box)
</script>
</html>
3. console.log()会在浏览器控制台打印出信息
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<meta charset="utf-8">
<style>
#box {
width: 150px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div id='box'></div>
</body>
<script>
var box = document.getElementById('box');
console.log(box)
</script>
</html>
4. console.dir()，可以显示一个对象的所有属性和方法
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<meta charset="utf-8">
<style>
#box {
width: 150px;
height: 150px;
background-color: red;
}
</style>
</head>
<body>
<div id='box'></div>
</body>
<script>
var box = document.getElementById('box');
console.dir(box)
</script>
</html>