您的位置：首页 > Web前端 > JavaScript

js遍历json对象

2018-03-02 00:00 218 查看

摘要: js遍历json对象
原始js创建dom节点

遍历json对象，初始化dom节点，完成自己定义的导航的页面

可以自行添加一些属性，完成定制化的导航页面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link href="imgs/link.png" rel="shortcut icon"/>
<title>常用链接</title>
<style>
#nav > li{ float:left; margin-left:20px; list-style-type:none;}
.link_list{
margin-left:0;
margin-top: 10px;
padding-left: 0;
list-style-type:none;
}
a{
text-decoration: none;
margin-top:10px;
font:normal 20px Cursive;
}
a.nav_link:link{
color: blue;
}
a.nav_link:hover{
color: red;
}
a.nav_link:active{
color:black;
}
a.nav_link:visited{
color: blue;
}
</style>

</head>
<body>

<script>
function init_page(){
var pages = {"API":[{"name":"JDK1-6","link":"http://tool.oschina.net/apidocs/apidoc?api=jdk_6u30","target":"_blank"},
{"name":"JDK1-7英文","link":"http://tool.oschina.net/apidocs/apidoc?api=jdk_7u4","target":"_blank"},
{"name":"JDK中文","link":"http://tool.oschina.net/apidocs/apidoc?api=jdk-zh","target":"_blank"}
]
"SearchTool":[
{"name":"Google","link":"https://www.google.com/","target":"_blank"},
{"name":"Bing","link":"http://cn.bing.com","target":"_blank"},
{"name":"Baidu","link":"https://www.baidu.com","target":"_blank"}
],
target_def :'_blank'
};

var area = document.createElement("ul");
area.id = "nav";
for(var key in pages){
var links = pages[key];
if(!(typeof links === 'object')){
continue;
}
var links_dom = document.createElement("ul");
links_dom.setAttribute("class","link_list");
var series = document.createElement("li");
var node = document.createElement("b");
var text = document.createTextNode(key);
node.appendChild(text);
series.appendChild(node);
for(var i = 0; i < links.length; i++){
var link = links[i];
var href = link["link"];
if(typeof href === 'undefined' || href.length < 1){
continue;
}
var name = link["name"];
if(typeof name === 'undefined' || name.length < 1){
name = href;
}
var target = link["target"];
if(typeof target === 'undefined' || target.length < 1){
target = pages['href_def'];
}
var link_dom = document.createElement("li");
var a_dom = document.createElement("a");
a_dom.setAttribute("style",".nav_link");
a_dom.setAttribute("href", href);
a_dom.setAttribute("target", target);
var a_text = document.createTextNode(name);
a_dom.appendChild(a_text);
link_dom.appendChild(a_dom);
links_dom.appendChild(link_dom);
series.appendChild(links_dom);
}
area.appendChild(series);
}
document.body.appendChild(area);
}
init_page();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JSON DOM 原生js

相关文章推荐

新的分享

章节导航