1.JS DOM简介
HTML DOM (文档对象模型)，当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM 模型被构造为对象的树：
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
通常，通过 JavaScript，需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
1.1 通过 id 找到 HTML 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS简单学习</title>
</head>
<body>
<p id="demo">你好世界！！！</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("demo");
document.write("<p>文本来自 id 为 demo 段落: " + x.innerHTML + "</p>");
</script>
</body>
</html>
1.2 通过标签名找到 HTML 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS简单学习</title>
</head>
<body>
<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了 <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=document.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>
</body>
</html>
1.3 通过类名找到 HTML 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS简单学习</title>
</head>
<body>
<p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write('<p>文本来自 class 为 "intro" 段落: ' + x[0].innerHTML + "</p>");
</script>
</body>
</html>
2.通过DOM修改HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
主要为这几点：改变 HTML 输出流、改变 HTML 内容、改变 HTML 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS简单学习</title>
</head>
<body>
<p>在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。</p>
<script>
document.write(Date());
</script>
<hr />
<p>修改 HTML 内容的最简单的方法是使用 innerHTML 属性。</p>
<p id="demo1">Hello World!!!</p>
<script>
var x=document.getElementById("demo1");
x.innerHTML="Hello JS DOM";
</script>
<hr />
<p>改变 HTML 元素的属性：document.getElementById(id).attribute=新属性值</p>
<img id="demo2" src="img/images/tx.jpg" width="120" height="120" />
<script>
document.getElementById("demo2").src="img/images/hetao.jpg";
</script>
</body>
</html>
3.通过DOM修改CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS简单学习</title>
</head>
<body>
<p id="css1">Hello World!!!</p>
<p id="css2">Hello World!!!</p>
<p id="css3">Hello World!!!</p>
<script>
document.getElementById("css1").style.color="red";
document.getElementById("css2").style.fontFamily="微软雅黑";
document.getElementById("css3").style.fontSize="xx-large";
</script>
<p>以上段落的样式均已通过脚本修改。</p>
<hr />
<h2 id="css4">这是一个标题</h2>
<button type="button" onclick="document.getElementById('css4').style.color='blue'">点击这里</button>
<hr />
<p id="html">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('html').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('html').style.visibility='visible'" />
</body>
</html>
