Javascript HTML DOM

时间：2017-08-25 14:04:36 阅读：241 评论：0 收藏：0 [点我收藏+]

JavaScript HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML DOM 模型被构造为对象的树：

技术分享

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
- 通过 id 查找 HTML 元素
  
  在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
  
  本例查找 id="intro" 元素：
  
  实例
  
  var x=document.getElementById("intro");
  
  尝试一下 ?
  
  如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
  
  如果未找到该元素，则 x 将包含 null。
- 通过标签名查找 HTML 元素
  
  本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
  实例
```
<body>
<p>你好，世界!</p>
<div id="main">
    <p>DOM是非常有用的</p>
    <p>该实例展示了<b>getElementsByTagName</b>方法</p>
</div>
<script>
       var x=document.getElementById("main");
       var y=x.getElementsByTagName("p");
       document.write(‘id="main"元素中的第一个段落为：‘+y[1].innerHTML);
</script>
</body>
显示结果为：
```
  解析此例：想找到div中的第二个p元素，并修改其里面的内容。我们先通过id找到其父类元素div:var x=
```
document.getElementById("main").然后再根据标签在父类元素中寻找：var y=x.getelementbytagname("p");此时，y里面存储着div里面的所有p标签,从下表0开始，也相当于一个数组。我们要找第二个p标签，也就是y[1]；。想修改第二个p标签里面的内容，那就是y[1].innerHTML.

当然上述实例，我们还可以同一下代码来实现：
```
```
body>
<p>你好，世界!</p>
<div id="main">
    <p>DOM是非常有用的</p>
    <p>该实例展示了<b>getElementsByTagName</b>方法</p>
</div>
<script>
       var x=document.getElementsByTagName("p");
       document.write(‘id="main"元素中的第一个段落为：‘+x[2].innerHTML);
</script>
</body>
```
  这段代码和上面的唯一区别就是找到p元素的范围不一样。这个例子我们是以docunment（整个页面文档）为范围寻找p，找到页面中所有的p元素，存储在x中。我们要得到第三个p标签，因此为x[2].上面的例子是以其id=main的div中寻找p标签，因此找到两个p，第二个p当然是y[1].
  
  ***仔细观察，我们发现通过id寻找就是在document中寻找唯一的某个元素，因此getelementbyid中的是element。而，通过标签寻找，getelementsbytagname中的是elements。
  
  通过类名找到 HTML 元素
  
  本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：
  实例
  
  var x=document.getElementsByClassName("intro");
  
  通过上面3种方式，我们找到了我们想要找的标签等等（当然，上面例子中也进行了改变HTML内容，我们为了表现出找到，只有显示出来才能看到效果。）。那么接下来，我们将展现找到都进行的操作。
  
  JavaScript HTML DOM - 改变 HTML
  
  HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
  
  （一）改变 HTML 输出流（document.write）
  
  JavaScript 能够创建动态的 HTML 内容：
  
  在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
  
  实例
  
  <!DOCTYPE html>
  <html>
  <body>
  
  <script>
  document.write(Date());
  </script>
  
  </body>
  </html>
  
  绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。
  
  （二）
  1.改变 HTML 内容（text）
  
  修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
  
  如需改变 HTML 元素的内容，请使用这个语法：
  
  本例改变了 <p>元素的内容：
  
  实例
  
  <html>
  <body>
  
  <p id="p1">Hello World!</p>
  
  <script>
  document.getElementById("p1").innerHTML="New text!";
  </script>
  
  </body>
  </html>
  
  本例改变了 <h1> 元素的内容：
  
  实例
  
  <!DOCTYPE html>
  <html>
  <body>
  
  <h1 id="header">Old Header</h1>
  
  <script>
  var element=document.getElementById("header");
  element.innerHTML="New Header";
  </script>
  
  </body>
  </html>
  
  实例讲解：
  
  上面的 HTML 文档含有 id="header" 的 <h1> 元素
  
  我们使用 HTML DOM 来获得 id="header" 的元素
  
  JavaScript 更改此元素的内容 (innerHTML)
  
  2.改变 HTML 属性（attribute）
  
  如需改变 HTML 元素的属性，请使用这个语法：
  
  document.getElementById(id).attribute=new value
  
  本例改变了 <img> 元素的 src 属性：
  
  实例
  
  <!DOCTYPE html>
  <html>
  <body>
  
  <img id="image" src="smiley.gif">
  
  <script>
  document.getElementById("image").src="landscape.jpg";
  </script>
  
  </body>
  </html>
  
  （三）
  
  JavaScript HTML DOM - 改变CSS
  
  HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
  
  改变 HTML 样式
  
  如需改变 HTML 元素的样式，请使用这个语法：
  
  document.getElementById(id).style.property=new style
  
  下面的例子会改变 <p> 元素的样式：
  
  html>
  <body>
  
  <p id="p2">Hello World!</p>
  
  <script>
  document.getElementById("p2").style.color="blue";
  </script>
  
  <p>The paragraph above was changed by a script.</p>
  
  </body>
  </html>
  
  显示和隐藏文本