JavaScript与DOM

认识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的步骤:

  1. 首先在最上面创建一个document节点


    DOM1.png
  2. 接下来,取HTML最顶层的元素,在这里就是<html>元素,称之为当前元素,把它作为document的子节点增加到DOM。


    DOM2.png
  3. 对于当前元素中嵌套的每一个元素,将该元素作为当前元素的子节点增加到DOM。


    DOM3.png
  4. 对于刚增加的各个元素,返回第三步,重复这个工作,直到处理完所有元素。

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的其他功能。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容