任鸟飞网站设计博客

文档对象模型（Docuement Object Model，简称DOM），是W3C组织推荐的处理XML的标准适配器。文档内容按照规定的格式标准按层级布局。

由于文档内容是按标准格式进行布局，我们可以利用Javascript DOM 来查找并控制对应标签元素的属性及行为。

例如：

<div id=”news”>some news list here</news>

如果想取得上面代码中的标签（news）只需在Javascript中调用 var news= document.getElementsById("news");

但是我们经常遇到

• 标签元素无 id 属性；
• 标签元素无 class属性；
• 需要控制一个标签的集合，例如我想定义所有Footer部分的<a>标签的属性及行为。

下面举例子说明

<div id="header">
  <h1>任鸟飞网页设计</h1>
</div>
<div id="sidebar">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">简介</a></li>
    <li><a href="#">业务</a></li>
    <li><a href="#">联系</a></li>
   </ul>
</div>
<div id="content">
  <h2>任鸟飞网页设计</h2>
  <p><a href="#">任鸟飞网页设计</a>
    设计类门户网站<p>
  <p><span style="color: red;">任鸟飞网页设计</span>
    设计类门户网站</p>
</div>
<div id="footer">
   <p>版权所有| <a href="#">联系我们</a> | <a href="#">隐私条款</a> |
      <a href="#">政策条款</a></p>
</div>

在整个文档中取出所有a标签，代码如下：

var myLinkCollection = document.getElementsByTagName("a");
for (i=0;i<myLinkCollection.length;i++) {
  // 根据需要来定为a标签的样式及行为}

从指定部分取出所有a标签，例如从footer中取出所有a标签，代码如下：

var myFooterElement = document.getElementById("footer");
var myLinksInFooter = myFooterElement.getElementsByTagName("a");
for (i=0;i<myLinksInFooter.length;i++) {
  // 定义footer部分所有a标签的样式及行为}

也可利用节点node的方法来实现：

var myLinkCollection = document.getElementsByTagName("a");

for (i=0;i<myLinkCollection.length;i++) {
  if (myLinkCollection[i].parentNode.parentNode.id === "footer") {
    // do something with footer anchor tags here
  }
}

也可与增加限制条件，比如说只取得含有href属性的a标签，代码如下：

var myLinkCollection = document.getElementsByTagName("a");

for (i=0;i<myLinkCollection.length;i++) {
  if (myLinkCollection[i].getAttribute("href")) {
    // 定义含有href属性的a标签的样式和行为
  }
}

我们也可以利用Javascript定义标签的属性，例如标签，代码如下：

var myLinkCollection = document.getElementsByTagName("span");

for (i=0;i<myLinkCollection.length;i++) {
  if (myLinkCollection[i].getAttribute("style")) {
    // 直接定义span标签的样式属性  }
}