DOM：Document Object Model 文档对象模型 （让JS有能力操作页面的元素）
1.使用JS获取页面上的某些元素
var elem = document.getElementById("元素ID")
2.修改 / 获取 标记内的内容
属性：innerHTML
ex：
var elem = document.getElementById("d1");
elem.innerHTML = "你好 世界！";
console.log(elem.innerHTML);
练习：
在页面中创建一个 div ，设置内容为 Hello World ，并设置ID为 d1，添加两个按钮，一个按钮用于获取 d1 元素中HTML内容，并打印在控制台上，另一个按钮将 d1的内容更改为 “这是我的第一个DOM操作”
<script type="text/javascript">
function printDiv(){
var elem = document.getElementById("d1");
console.log(elem.innerHTML);
}
function upDate(){
var elem = document.getElementById("d1");
elem.innerHTML = "这是我的第一个DOM操作";
console.log(elem.innerHTML);
console.log(elem);
}
</script>
<div id="d1">Hello World!</div>
<button type="button" onclick="printDiv()">打印d1元素</button>
<button type="button" onclick="upDate()">修改d1内容</button>
3.获取 / 设置表单控件的数据
<input type="text/password" value="">
在DOM中，文本框，密码框，... ...也都是通过value属性来获取或设置控件的值
练习：
在页面中创建一个文本框，一个 div，一个按钮，点击按钮时，将文本框中的数据，以一级标题的形式显示在 div 中
<script type="text/javascript">
function showUname(){
var value = document.getElementById("uname").value;
document.getElementById("show").innerHTML = "<h1>"+value+"</h1>";
}
</script>
<div id="show"></div>
<input type="text" id="uname" value="" />
<button type="button" onclick="showUname()">显示</button>
4.简化 document.getElementById()
document.getElementById 作用：根据“指定ID值”获取对应的“HTML元素”
编写一个函数
function $(id){
return document.getElementById(id);
}
练习：
创建一个common.js 的文件，封装 $ 函数，负责接受一个id值作为参数，并且返回对应的对象。在页面中创建一个文本框，一个 div，一个按钮，点击按钮时，将文本框中的数据，以一级标题的形式显示在 div 中
<script src="common.js" type="text/javascript"></script>
<script type="text/javascript">
function showUname(){
var value = $("uname").value;
$("show").innerHTML = "<h1>"+value+"</h1>";
}
</script>
<div id="show"></div>
<input type="text" id="uname" value="" />
<button type="button" onclick="showUname()">显示</button>
5.HTML元素事件
文本框和密码框事件
（1）onblur 事件：鼠标失去焦点时要执行的操作
（2）onfocus 事件：获取焦点时要执行的操作
练习：
在页面中创建一个文本框，后面再创建一个 span，文本框失去焦点时，判断文本框中的数据是否为空，如果为空，在span中提示用户名不能为空，否则提示通过
<script src="common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
function chackUname(){
var uname = $("uname").value;
if(uname ==""){
$("uname-show").innerHTML = "用户名不能为空";
}else{
$("uname-show").innerHTML = "通过";
}
}
</script>
<input type="text" id="uname" value="" onblur="chackUname()"/>
<span id="uname-show"></span>
<body>的事件 - onload
在网页加载的时候，要执行的操作，可以封装在 onload 中
原文：https://www.cnblogs.com/hourglas/p/13769986.html