DOM对象
一、DOM简述
DOM (Document Object Model）文档对象模型文档：标记型文档（HTML 等）
DOM 是将标记型文档中所有内容（标签、文本、属性）都封装成对象，
通过操作对象的属性或者方法，来达到操作或者改变 HTML 展示效果的目的。
DOM树
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href="">我的链接</a>
<h1>
我的标题
</h1>
</body>
</html>
每个标签会被加载成 DOM 树上的一个元素节点对象。
每个标签的属性会被加载成 DOM 树上的一个属性节点对象
每个标签的内容体会被加载成 DOM 树上的一个文本节点对象
整个 DOM 树，是一个文档节点对象，即 DOM 对象。
1个 HTML 文档加载到内存中就会形成一个 DOM 对象
DOM树的特点：
必定会有一个根节点
扫描二维码关注公众号，回复：
11006629 查看本文章
每个节点都是节点对象
常见的节点关系：父子节点关系
文本节点对象没有子节点-叶子节点
每个节点都有一个父节点，零到多个子节点
只有根节点没有父节点
二、获取元素对象的四种方式
1、getElementById();
通过元素ID获取对应元素对象
如果找不到则返回null
var t1 = document.getElementById("t1");
2、geElementsByName();
通过元素的name属性获取符合要求的所有元素
返回一个数组，找不到返回空数组
var arr = document.getElementsByName("hobby");
3、getElementsByTagName();
通过元素的元素名属性获取符合要求的所有元素
返回一个数组，找不到返回空数组
var arr = document.getElementsByTagName("li");
4、getElementsByClassName();
通过元素的class属性获取符合要求的所有元素
返回一个数组，找不到返回空数组
三、元素对象常见属性
1、value
修改元素的值
元素对象.value //获取元素对象的value属性值
元素对象.value = 属性值 //设置元素对象的属性值
var t1 = document.getElementById("t1");
t1.value = "你好"
2、className
修改元素的样式
与value用法差不多
3、checked
标识复选框
HTML中checked=“checked”,js中返回true，false
t1.checked = true
4、innerHTML
操作元素的内容体
t1.innerHTML = "算法算法" //设置标签内容体
t1.innerHTML +="sfaf" //追加内容体信息
