document
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
document树
HTML DOM 模型被结构化为对象树：
特点
- document 管理所有的 HTML 文档内容
- document 是树型结构，有层级关系
- 把所有的标签 都 对象化
- 通过 document 访问所有的标签对象
访问标签对象
注意： 下面方法 要在页面加载完成之后执行，否则无法获取标签对象
getElementById( elementId ) （最常用）
通过标签的 id 属性 查找标签 dom 对象
<input type="text" id="username" value="李雷"><br>
<script>
var username = document.getElementById("username");
console.log(username.value)
</script>
getElementsByName( elementName )
通过标签的 name 属性 查找标签 dom 对象
由于 html 标签的 name 属性可以同名，所以通过 该方法 返回的是 数组
<input type="text" name="like" value="吃鸡"><br>
<input type="text" name="like" value="原神"><br>
<script>
var likes = document.getElementsByName("like");
console.log(likes.length)
console.log(likes[0].value)
console.log(likes[1].value)
</script>
getElementsByTagName( tagname )（最少用）
通过 标签名 查找标签 dom 对象
因为 在html页面中，同名标签太多，所以通过该方法 返回的是 数组。并且，很有可能获取一些不想要的标签，所以使用最少
<input type="text" name="like" value="吃鸡"><br>
<input type="text" name="like" value="原神"><br>
<script>
var likes = document.getElementsByTagName("input");
console.log(likes.length)
console.log(likes[0].value)
console.log(likes[1].value)
</script>