DOM
HTML DOM节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
注意：
DOM 处理中的常见错误是希望元素节点包含文本。
在本例中：titleDOM 教程title，元素节点 title，包含值为 “DOM 教程” 的文本节点。
可通过节点的 innerHTML 属性来访问文本节点的值。
您将在稍后的章节中学习更多有关 innerHTML 属性的知识。
HTML DOM 方法
编程接口
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
方法是您能够执行的动作（比如添加或修改元素）。
属性是您能够获取或设置的值（比如节点的名称或内容）。
getElementByid()方法
getElementById() 方法返回带有指定 ID 的元素：
var element = docunmet.getElementById("ls");
HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
一些 DOM 对象方法
innerHTML属性
实例：
<body>
<p id="ls">
伤过的心 就像玻璃碎片
爱情的蠢 永远不会复原
过去的事 把他装进怀念
p>
<script type="text/javascript">
var txt = document.getElementById('ls').innerHTML;
document.write(txt)
script>
body>
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
注意 nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
实例
<body>
<p id="ls">
伤过的心 就像玻璃碎片
爱情的蠢 永远不会复原
过去的事 把他装进怀念
p>
<script type="text/javascript">
var txt = document.getElementById('ls');
document.write(txt.firstChild.nodeName)
document.write('
')
document.write(txt.firstChild.nodeValue)
script>
body>
访问 HTML 元素（节点）
访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素：
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
getElementsByTagName() 方法
getElementsByTagName() 返回带有指定标签名的所有元素。
实例
<body>
<p id="ls">
伤过的心 就像玻璃碎片
爱情的蠢 永远不会复原
过去的事 把他装进怀念
p>
<p >
我祝你快乐幸福 平安
那么突然
没有预演
你再次来到我的面前
脸上的笑虽然有点肤浅
可你说像是一如从前
p>
<script type="text/javascript">
var x = document.getElementsByTagName('p');
document.write(x[0].innerHTML);
document.write('
')
document.write(x[1].innerHTML);
document.write('
')
document.write(x[1].nodeType);
document.write(x[1].nodeName);
document.write(x[1].nodeValue);
script>
body>
下面的例子返回包含文档中所有 p 元素的列表，并且这些 p 元素应该是 id=“main” 的元素的后代（子、孙等等）：
<body>
<div id="admin">
<p id="ls">伤过的心 p>
<p id="test"> 就像玻璃碎片p>
<p id="root">爱情的蠢p>
div>
<p id="hah">永远不会复原p>
<script type="text/javascript">
x = document.getElementById('admin').getElementsByTagName('p');
document.write(x[0].innerHTML);
script>
body>
getElementsByClassName() 方法
如果您希望查找带有相同类名的所有 HTML 元素，请使用这个方法：
修改HTML元素
修改 HTML 元素
修改 HTML DOM 意味着许多不同的方面：
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件（处理程序）
创建HTML内容
实例：
<body>
<p id="ls">
伤过的心就像玻璃片
p>
<script type="text/javascript">
document.getElementById('ls').innerHTML='爱情的蠢不能复原'
script>
body>
改变HTML样式
<body>
<p id="ls">
伤过的心就像玻璃片
p>
<script type="text/javascript">
document.getElementById('ls').style.color='red'
script>
body>
创建新的HTML元素
<body>
<div id="d1">
<P id="p1">这个第一个段落P>
<P id="p1">这个第二个段落P>
div>
<script type="text/javascript">
var para = document.createElement('p');
var node = document.createTextNode('这是第三个段落');
para.appendChild(node);
var element = document.getElementById('d1');
element.appendChild(para)
script>
body>
改变HTML内容
<body>
<div id="d1">
<P id="p1">这个第一个段落P>
div>
<script type="text/javascript">
document.getElementById('p1').innerHTML='伤过的心就像玻璃碎片';
script>
body>
使用DOM事件
HTML DOM 允许您在事件发生时执行代码。
当 HTML 元素”有事情发生“时，浏览器就会生成事件：
- 在元素上点击
- 加载页面
- 改变输入字段
实例：
<input type="button" onclick="document.body.style.backgroundColor='red';
value='改变后的按钮'">
<body>
<script type="text/javascript">
function gb() {
document.body.style.backgroundColor='red';
}
script>
创建新的HTML元素
appendChild()
<body>
<div id="d1">
<p id="p1">你给我的爱就像紫色烟花p>
<p id="p2">爱情的蠢不会复原p>
div>
<script type="text/javascript">
var para = document.createElement('p');
var node= document.createTextNode('伤过的心就像玻璃碎片');
para.appendChild(node);
var element = document.getElementById('d1');
element.appendChild(para);
script>
body>
创建HTML元素insertBefore()
<body>
<div id="d1">
<p id="p1">你给我的爱就像紫色烟花p>
<p id="p2">爱情的蠢不会复原p>
div>
<script type="text/javascript">
var para = document.createElement('p');
var node= document.createTextNode('伤过的心就像玻璃碎片');
para.appendChild(node);
var element = document.getElementById('d1');
var chid = document.getElementById('p1');
element.insertBefore(para,chid);
script>
body>
删除已有的HTML元素
实例：
<body>
<div id="d1">
<p id="p1">你给我的爱就像紫色烟花p>
<p id="p2">爱情的蠢不会复原p>
div>
<script type="text/javascript">
var para = document.getElementById('d1');
var chid = document.getElementById('p1');
para.removeChild(chid);
script>
body>
替换HTML元素
replaceChild()
<body>
<div id="d1">
<p id="p1">你给我的爱就像紫色烟花p>
<p id="p2">爱情的蠢不会复原p>
div>
<script type="text/javascript">
var para1 = document.createElement('p');
var chid1 = document.createTextNode('伤过的心就像玻璃碎片');
para1.appendChild(chid1);
var para = document.getElementById('d1');
var chid = document.getElementById('p1');
para.replaceChild(para1,chid);
script>
body>
HTMLDOM事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。
对事件做出反应
当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时。
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
实例
点击改变h1的内容
<h1 onclick="this.innerHTML='别点我好吗，我想静静！'">不要点我！h1>
<body>
<h1 onclick="this.innerHTML='别点我好吗，我想静静！'">不要点我！h1>
<h2 onclick="changetext(this)">来点我，来点！h2>
<script type="text/javascript">
function changetext(id)
{
id.innerHTML="让你点你就点啊!";
}
script>
body>
HTML事件属性
如需向 HTML 元素分配事件，您可以使用事件属性。
实例
向button元素分配一个onclick事件
<body>
<button onclick="displayDate()">获取时间button>
<script type="text/javascript">
function displayDate() {
document.getElementById('ls').innerHTML=Date();
}
script>
<p id="ls">p>
body>
onload和onumload事件
onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。
onload 和 onunload 事件可用于处理 cookies。
实例：
<html>
<head>
<meta charset="UTF-8">
head>
<body onload="checkCookies()">
<script type="text/javascript">
function checkCookies() {
if(navigator.cookieEnabled==true){
alert("Cookies are enabled")
}else {
alert("Cookies are not enabled")
}
}
script>
<p>加载网页后会弹出alert窗口告诉我们是否启用了Cookiesp>
body>
html>
onchang事件
onchange 事件常用于输入字段的验证。
实例：
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
script>
head>
<body >
请输入您等英文名字：<input type="text" id="fname" onchange="myFunction">
<p>当你离开输入框时，被触发的函数会把你输入的文本转换为大写字母。p>
body>
html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。
HTML DOM导航
childNodes 和 nodeValue
除了 innerHTML 属性，您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。