JavaScript与DOM的关系

时间 2019-11-18

原文原文链接

JavaScript与浏览器的工做

1.浏览器获取并加载你的页面，从上至下解析它的内容。html

　遇到JavaScript时，浏览器会解析代码，检查它的正确性，而后执行代码。浏览器

　浏览器还会创建一个HTML页面的内部模型（DOM）。服务器

2.JavaScript继续执行，使用DOM检查页面、完成修改、从页面接受事件，或者要求浏览器从Web服务器获取其它数据。dom

JavaScript如何与页面交互？

JavaScript是代码，HTML是标记，彻底不一样的东西spa

怎么让它们交互呢？code

答案是使用文档对象模型（Docunment Object Model，简称DOM）。htm

DOM的妙处在于：它可以在全部浏览器上提供一种一致的方式，经过代码访问HTML的结构和内容。对象

一、在浏览器加载一个页面时，浏览器会解析HTML，并建立文档的一个内部模型，其中包含HTML标记的全部元素。blog

二、JavaScript能够与DOM交互（JavaScript使用DOM建立或删除元素等等）事件

　　document是一个反映HTML的对象，经过调用document的方法改变DOM的状态，也就是改变HTML页面

三、JavaScript修改了DOM时，浏览器会随着动态更新页面。

自制DOM

材料：格式正确的HTML5页面，WEB浏览器

作法：

　一、在最上面建立一个document节点

　二、取HTML页面的最顶层元素，在这里就是<HTML>元素，把它做为document的子节点加到DOM中

　三、对于当前元素中嵌套的每个元素，将该元素做为当前元素的子节点增长到DOM

　四、对于刚增长的元素，执行第三步，重复工做，直处处理完全部元素

HTML页面以下　　
 1 <!DOCTYPE html>
 2 <html lang="helloworld">
 3 
 4 <head>
 5     <title>DOM</title>
 6     <meta cherset="utf-8">
 7     <script src="dom.js" ></script>
 8 </head>
 9 
10 <body>
11     <h1>My Dom</h1>
12     <div id="entry1">
13         <h2>hello</h2>
14         <p>
15             Today, I am making a dom!!!
16         </p>
17     </div>
18 </body>
19 
20 </html>
获得的DOM以下图