整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
过 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; }然后就能实现我们这个实用又美观的侧边导航栏啦
SS3导航栏展开动画效果,实现不一样的手风琴菜单展开收缩动画效果！效果如下：
实现代码
html：
css：
javascript：
*请认真填写需求信息，我们会在24小时内与您取得联系。
