DOM元素
我们可以通过HTML DOM ，JavaScript能够访问和改变HTML文档的所有元素。
HTMLＤＯＭ（文档对象模型）
网页被加载时，浏览器会创建页面的文档对象模型
HTML DOM 模型被结构化为对象树：
对象的HTML DOM树：
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
- JavaScript 能改变页面中的所有 HTML 元素
- JavaScript 能改变页面中的所有 HTML 属性
- JavaScript 能改变页面中的所有 CSS 样式
- JavaScript 能删除已有的 HTML 元素和属性
- JavaScript 能添加新的 HTML 元素和属性
- JavaScript 能对页面中所有已有的 HTML 事件作出反应
- JavaScript 能在页面中创建新的 HTML 事件
什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准。
DOM 定义了访问文档的标准：
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
HTML DOM是关于如何获取、更改、添加或者删除HTML元素的标准。
<body>
<h2>dom</h2>
<p id="demo"></p>
<!-- 注意：将js放在web页面你要编辑的元素的后面，我是放在body的最后，问题解决。 -->
<script>
document.getElementById("demo").innerHTML = 'hello world';
</script>
</body>
getElementById方法：
访问HTML元素最常用的方法是使用元素的id
在上面的例子中，getElementById方法使用id="demo"来查找元素
innerHTML属性
获取元素内容最简单的方法是使用有innerHTML属性：
innerHTML属性可用于获取或者替换HTML元素的内容
InnerHTML属性可用于获取或改变任何HMTL元素，包括<html>和<body>
Document对象：
文档对象代表您的网页。
如果您希望访问HTML页面中的任何元素，那么您问题从访问document对象开始。
查找元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素id来查找 |
| document.getElementsByTagName(name | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
改变HTML元素
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html contenet | 改变元素的inner HTML |
| element.attribute = new value | 改变HTML元素的属性值 |
| element.setAttribute(attribute.value) | 改变HTML元素的属性值 |
| element.style.property = new style | 改变ＨＴＭＬ元素的样式 |
添加和删除元素
| 方法 | 描述 |
|---|---|
| document.createElement(element) | 创建HTML元素 |
| document.removeChild(element) | 删除HTML元素 |
| document.appendChild(element) | 添加HTML元素 |
| document.replaceChild(element) | 替换HTML元素 |
| document.write(text) | 写入HTML输出流 |
添加事件处理程序
| 方法 | 描述 |
|---|---|
| document.getElementById(id).onclick = function(){code} | 向onclick事件添加事件处理程序 |
查找HTML对象
首个 HTML DOM Level 1 (1998)，定义了 11 个 HTML 对象、对象集合和属性。它们在 HTML5 中仍然有效。
后来，在 HTML DOM Level 3，加入了更多对象、集合和属性。
使用DOM查找HTML元素：
- 通过id查找HTML元素
- 通过标签名查找HTML元素
- 通过类名查找HTML元素
- 通过CSS选择器查找HTML元素
- 通过HTML对象集合查找HTML元素
通过id查找HTML元素
DOM中查找HTML元素最简单的方法是，使用元素的id。
例如：
<h2>dom</h2>
<p id="intro">Hello World!</p>
<p>本例演示：<b>getElementById</b>方法。</p>
<p id="demo"></p>
<!-- 注意：将js放在web页面你要编辑的元素的后面，我是放在body的最后，问题解决。 -->
<script>
document.getElementById("demo").innerHTML = 'hello world';
var myElement = document.getElementById("intro");
document.getElementById('demo').innerHTML =
"来自 intro段落的文本是："+myElement.innerHTML;
</script>
通过标签名查找HTML元素
本例中查找的是p元素
<body>
<h1>通过标签名查找HTML元素</h1>
<!-- <p id="intro">Hello World!</p> -->
<p>Hello World!</p>
<p>本例演示：<b>getElementsByTagName</b>方法。</p>
<p id="demo"></p>
<!-- 注意：将js放在web页面你要编辑的元素的后面，我是放在body的最后，问题解决。 -->
<script>
// document.getElementById("demo").innerHTML = 'hello world';
// var myElement = document.getElementById("intro");
// document.getElementById('demo').innerHTML =
// "来自 intro段落的文本是："+myElement.innerHTML;
var x = document.getElementsByTagName("p");
//innerHTML属性可用于获取或者替换HTML元素的内容
document.getElementById("demo").innerHTML =
'第一段中的文本(index 0)是：'+x[0].innerHTML;
</script>
</body>
通过标签名查找HTML元素
<body>
<h1>通过标签名查找HTML元素</h1>
<div id="main">
<p>DOM 很有用</p>
<p>本例演示<b>getElementsByTagName</b>方法。</p>
</div>
<p id="demo"></p>
<!-- <p id="intro">Hello World!</p> -->
<!-- <p>Hello World!</p>
<p>本例演示：<b>getElementsByTagName</b>方法。</p>
<p id="demo"></p> -->
<!-- 注意：将js放在web页面你要编辑的元素的后面，我是放在body的最后，问题解决。 -->
<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML =
'"main"中的第一段(索引0)是：'+y[0].innerHTML;
</script>
</body>
通过类名查找HTML元素
如果您需要找到拥有相同类名的所有HTML元素，请使用getElementsByClassName()。
本例返回包含class="intro"的所有元素的列表：
<h1>通过类名查找HTML元素</h1>
<p>Hello World!</p>
<p class="intro"> DOM很有用</p>
<p class="intro">本例演示：<b>getElementsByClassName</b>方法。</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML =
'class = "intro"第一段（索引0）：'+x[0].innerHTML;
</script>
通过类名查找元素不适用于 Internet Explorer 8 及其更早版本。
通过CSS选择器查找HTML元素
如果您需要查找匹配指定CSS选择器(id,类名、属性、属性值等等)的所有HTML元素，请使用querySelectorAll()方法。
<h1>按查询选择器查找 HTML 元素</h1>
<p>Hello World!</p>
<p class="intro"> DOM很有用</p>
<p class="intro">本例演示：<b>getElementsByClassName</b>方法。</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML =
'class = "intro" 的第一段（索引0）：'+x[0].innerHTML;
</script>
querySelectorAll() 不适用于 Internet Explorer 8 及其更早版本。
通过HTML对象选择器查找HTML对象
本例中查找id="frm1"的form元素，在forms集合中，然后显示所有元素值：
例如：
<body>
<h1>使用document.forms 查找HTML元素</h1>
<form id="frm1" action="/demo/action_page.php">
First name:<input type="text" name="fname" value="hkk">
<br/>
Last name :<input type="text" name="lname" value="Gates">
<br><br>
<input type="submit" value="提交">
</form>
<p>单击“试一试”按钮，显示表单中每个元素的值。</p>
<button onclick="myFunction()">试一试</button>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value+"<br>";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
