认识DOM
DOM的英文全称是Document Object Model，即文档对象模型，DOM的作用在于它能够在所有浏览器早上提供一种一致的方式，通过代码访问HTML的结构和内容。
创建DOM
创建一个DOM的前提是要有一个格式正确的HTML5页面，如下所示
<!doctype html>
<html lang="en">
<head>
<title>My blog</title>
<meta charset="utf-8">
<script></script>
</head>
<body>
<h1>Hello World!</h1>
<div id="entry1">
<h2>What are you doing?</h2>
<p>
No big deal,just three stories.
</p>
<p>
Stay hungry,stay foolish!
</p>
</div>
</body>
</html>
创建上述HTML5页面DOM的步骤:
-
首先在最上面创建一个document节点
DOM1.png
-
接下来，取HTML最顶层的元素，在这里就是<html>元素，称之为当前元素，把它作为document的子节点增加到DOM。
DOM2.png
-
对于当前元素中嵌套的每一个元素，将该元素作为当前元素的子节点增加到DOM。
DOM3.png
-
对于刚增加的各个元素，返回第三步，重复这个工作，直到处理完所有元素。
JavaScript与HTML5通信
HTML和JavaScript完全来自两个不同的星球，HTML的DNA是由描述性标记构成，允许比描构成页面的一组嵌套元素。而JavaScript是由纯算法的基因构成，主要用来描述计算。
HTML和JavaScript能够通信的主要原因是DOM。完成这种通信的方式有很多。下面我们来介绍常用的几种。
DOM获取元素
getElmentById方法允许JavaScript访问DOM的任何元素。
获取元素的值
//获取元素
var planet = document.getElementById('greenplanet')
//获取元素的值
var x = planet.innerHTML;
修改元素的值
//获取元素
var planet = document.getElementById('greenplanet')
//修改元素的值
planet.innerHTML = "just do it";
更新DOM
示例如下，修改id为myHeader的元素的值：
<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
x.innerHTML = "hello world"
}
//表示页面完全加载时要执行getValue中的方法，如果不执行这个函数，则上面修改myHeader元素值将不会生效
window.onload = getValue;
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题，会提示出它的值。</p>
</body>
</html>
如代码所述，在这里，JavaScript会在浏览器第一次加载页面的head部分并且在加载页面其他部分之前执行，所有DOM还没有完全创建。因此这时DOM还没有创建id为myHeader的元素，此元素还不存在，因此x.innerHTML = "hello world"将会修改无效。由此我们加上这行代码window.onload = getValue;这会告诉浏览器在完全加载页面并创建DOM之后再运行我的代码，只要这样才会达到我们预期的效果。
当然，DOM能够的远远不止这些工作，以后会慢慢接触到DOM的其他功能。
网友评论