HTML DOM 導航

過 HTML DOM，您能夠使用節點關系在節點樹中導航。

HTML DOM 節點列表

getElementsByTagName() 方法返回節點列表。節點列表是一個節點數組。

下面的代碼選取文檔中的所有 <p> 節點：

實例

varx=document.getElementsByTagName("p");

可以通過下標號訪問這些節點。如需訪問第二個 <p>，您可以這么寫：

y=x[1];

嘗試一下 ?

注意：

下標號從 0 開始。

HTML DOM 節點列表長度

length 屬性定義節點列表中節點的數量。

您可以使用 length 屬性來循環節點列表：

實例

x=document.getElementsByTagName("p");for(i=0;i<x.length;i++){document.write(x[i].innerHTML); document.write("<br>");}

實例解析：

獲取所有 <p> 元素節點
輸出每個 <p> 元素的文本節點的值

導航節點關系

您能夠使用三個節點屬性：parentNode、firstChild 以及 lastChild ，在文檔結構中進行導航。

請看下面的 HTML 片段：

<html><head><metacharset="utf-8"></head><body><p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實例演示了節點的關系。</p></div></body></html>

首個 <p> 元素是 <body> 元素的首個子元素（firstChild）
<div> 元素是 <body> 元素的最后一個子元素（lastChild）
<body> 元素是首個 <p> 元素和 <div> 元素的父節點（parentNode）

firstChild 屬性可用于訪問元素的文本：

實例

<pid="intro">Hello World!</p><script>x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script>

嘗試一下 ?

DOM 根節點

這里有兩個特殊的屬性，可以訪問全部文檔：

document.documentElement - 全部文檔
document.body - 文檔的主體

實例

<p>Hello World!</p><div><p>DOM 是非常有用的!</p><p>這個實例演示了 <b>document.body</b> 屬性。</p></div><script>alert(document.body.innerHTML);</script>

嘗試一下 ?

childNodes 和 nodeValue

除了 innerHTML 屬性，您也可以使用 childNodes 和 nodeValue 屬性來獲取元素的內容。

下面的代碼獲取 id="intro" 的 <p> 元素的值：

實例

<pid="intro">Hello World!</p><script>txt=document.getElementById("intro").childNodes[0].nodeValue;document.write(txt);</script>

嘗試一下 ?

在上面的例子中，getElementById 是一個方法，而 childNodes 和 nodeValue 是屬性。

果圖

html部分：先寫用div畫好六個導航的卡片，再利用css添加響應效果

<div class='card-holder'>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-01'>
                <span class='card-content'>item #1</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-02'>
                <span class='card-content'>long menu item #2</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-03'>
                <span class='card-content'>menu item #3</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-04'>
                <span class='card-content'>item #4</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-05'>
                <span class='card-content'>menu item #5</span>
            </div>
        </a>
    </div>
    <div class='card-wrapper'>
        <a href='#'>
            <div class='card bg-06'>
                <span class='card-content'>long menu item #1</span>
            </div>
        </a>
    </div>
</div>

css部分：通過hover選擇器和transition屬性實現導航響應式操作，即可實現如圖效果

a:link,
a:hover,
a:visited,
a:active {
  color: #fff;
  text-decoration: none;
}
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
.card-holder {  
  position: fixed;
  width: 0px;
  overflow: visible;
}
.card-wrapper {
  display: inline-block;
  float: right;
  clear: both;
}
.card {
  position: relative;
  left: 32px;
  padding: 16px 32px 16px 64px;
  margin: 8px;  
  background: #fff;
  transition: all 0.3s ease-in-out 0.1s;
}
//添加導航的響應式效果
.card:hover {
  position: relative;
  left: 100%;
  margin-left: -32px;
  transition: all 0.3s ease-in-out;
}
.card-content {
  display: inline-block;
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.bg-01 { background: #539770; }
.bg-02 { background: #4B7D74; }
.bg-03 { background: #8DC2BC; }
.bg-04 { background: #EDD6B4; }
.bg-05 { background: #BE7467; }
.bg-06 { background: #E2AE63; }

然后就能實現我們這個實用又美觀的側邊導航欄啦

lt;!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>導航菜單</title>
<link rel="stylesheet" type="text/css" href="css/nav.css"/>
</head>
<body>

<header>
<div class="container">

<ul class="nav">
<li style="background-color: gold;">
<a href="#">首頁</a>
</li>
<li>
<a href="#">公司概況</a>
<ul class="nav-list">
<li>公司簡介</li>
<li>發展歷程</li>
<li>組織機構</li>
<li>總經理寄語</li>
</ul>
</li>
<li>
<a href="#">公司文化</a>
<ul class="nav-list">
<li>文化理念</li>
<li>員工活動</li>
<li>黨/工/團建設</li>
</ul>
</li>
<li>
<a href="#">公司新聞</a>
</li>
<li>
<a href="#">服務內容</a>
</li>
<li>
<a href="#">法律政策</a>
</li>
<li>
<a href="#">人才招聘</a>
</li>
<li>
<a href="#">聯系我們</a>
</li>
</ul>
</div>
</header>
</body>
</html>

nav.css

@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}

在線咨詢

上一篇：學習HTML5的學習方法大匯總，收藏帖
下一篇：如何簽出合法有效的電子合同？看這篇就夠了

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML DOM 導航

nav.css

您的項目需求