当前位置:首页 > 编程教程 > javascript技术文章 > JavaScript结合HTML DOM实现联动菜单

JavaScript结合HTML DOM实现联动菜单实例详解

  • 发布时间:
  • 作者:码农之家
  • 点击:185

这篇文章主要知识点是关于JavaScript、HTML、DOM、联动菜单、详解JavaScript操作HTML DOM的基本方式 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF作者:大卫·索耶·麦克法兰德
立即下载

JavaScript结合HTML DOM实现联动菜单

本文实例为大家分享了js三级联动菜单展示的具体代码,供大家参考,具体内容如下

效果图:

JavaScript结合HTML DOM实现联动菜单

代码:

<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script>
  /*使用 HTML DOM 的方式实现联动菜单*/
  var categories=[
  {
   "id":10,
   "name":'男装',
   "children":[
    {"id":101,"name":'正装'},
    {"id":102,"name":'T恤'},
    {"id":103,"name":'裤衩'}
   ]
  },
  {
   "id":20,
   "name":'女装',
   "children":[
    {"id":201,"name":'短裙'},
    {"id":202,"name":'连衣裙'},
    {
     "id":203,
     "name":'裤子',
     "children": [
      {"id":2031,"name":'长裤'},
      {"id":2031,"name":'九分裤'},
      {"id":2031,"name":'七分裤'}
     ]
    },
   ]
  },
  {"id":30,"name":'童装',"children":[
   {"id":301,"name":'帽子'},
   {"id":302,"name":'套装',"children":[
    {"id":3021,"name":"0-3岁"},
    {"id":3021,"name":"3-6岁"},
    {"id":3021,"name":"6-9岁"},
    {"id":3021,"name":"9-12岁"}
   ]},
   {"id":303,"name":'手套'}
  ]}
];
   
</script>
</head>
<body>
  <div id="category"></div>
 <script>
  //查找id为category的div保存在div中
   var div=document.getElementById("category");
  //定义函数createSelect,接收一个数组参数arr
  function createSelect(arr){
   //创建一个select
   var sel=document.createElement("select");
   //创建一个option,设置其内容为"-请选择-",值为-1,将option添加到select中
    sel.add(new Option("--请选择--",-1));
   //遍历arr
   for(var i=0;i<arr.length;i++){
    //创建一个option,设置内容为当前元素的name属性,设置value为当前元素的id属性,将新option添加到select中
    sel.add(new Option(arr[i].name,arr[i].id));   
   }//(遍历结束)
   //为sel绑定onchange事件
   sel.onchange=function(){
    //反复:只要当前select不是div的lastChild
    while(this!=div.lastChild)
     //让div删除其lastChild
      div.removeChild(div.lastChild);
    //获得当前选中项的下表-1,保存在i中
    var i=this.selectedIndex-1;
    //如果arr中i位置的商品类别有children
     if(i>=0&&arr[i].children!==undefined)
     //用arr中i位置的商品类别的children数组创建下一个select
     createSelect(arr[i].children);
    
   }
   //将select添加到div中
    div.appendChild(sel);
  }
  createSelect(categories);
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

详解JavaScript操作HTML DOM的基本方式

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树:
详解JavaScript操作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> 元素:
实例

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:
实例

var x=document.getElementsByClassName("intro");

改变 HTML
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容:
今天的日期是: Wed Oct 21 2015 14:43:25 GMT+0800 (中国标准时间)
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
实例

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>


lamp 绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:
document.getElementById(id).innerHTML=new 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)

改变 HTML 属性
如需改变 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>

实例讲解:

  • 上面的 HTML 文档含有 id="image" 的 <img> 元素
  • 我们使用 HTML DOM 来获得 id="image" 的元素
  • JavaScript 更改此元素的属性(把 "smiley.gif" 改为 "landscape.jpg")

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • js实现HTML中Select二级联动的代码方法
  • JavaScript结合HTML DOM 相关电子书
    学习笔记
    网友NO.697219

    使用Javascript实现选择下拉菜单互移并排序

    本文给大家介绍使用js实现下拉菜单可选择互相移动并实现菜单排序,代码简单易懂,具有参考价值,先给大家展示下效果图,感觉还很满意请参考本段代码。 代码如下: htmlheadtitle使用Javascript实现选择下拉菜单互移并排序/titlemeta http-equiv="Content-Type" content="text/html; charset=gb2312"/headbodyp选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选),或在选择项上双击进行添加和移除。/pform method="post" name="myform"table border="0" width="300"trtd width="40%"select multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)"option value="北京"北京/optionoption value="上海"上海/optionoption value="山东"山东/optionoption value="安徽"安徽/optionoption value="重庆"重庆/optionoption value="福建"福建/optionoption value="甘肃"甘肃/optionoption value="广东"广东/optionoption value="广西"广西/optiono……

    网友NO.561581

    JavaScript实现三级联动菜单效果

    三级联动考察的应该是对于数据的处理,只要清楚其中的关系,再多几级都是一样的: html部分: !DOCTYPE htmlhtmlhead meta charset="utf-8" / title3级联动菜单/title script var region = { 广东: { "广州":["广州1","广州2","广州3"], "珠海":["珠海1","珠海2","珠海3"], "佛山":["佛山1"] }, 湖南: { "常德":["石门","桃源","临澧","汉寿"], "益阳":["益阳1","益阳2","益阳3"] } } /script/head body select id="province" onchange="change(this.value);" option请选择省份/option /select select id="city" onchange="countyChange(this.value);" option请选择地市/option /select select id="county" option请选择县城/option /select script src='test.js'/script /body/html js部分: var province = document.querySelector("#province"); var city = document.querySelector("#city"); var county = document.querySelector("#county"); //二级联动不用定义你选的省份,直接用省份(key)来决定下面的市(value)值 var province……

    网友NO.984183

    JavaScript实现图片连播以及联级菜单的知识点

    !DOCTYPE htmlhtml head title图片轮播/title style div{ border: 1px solid red; width:218px; height: 218px; } .show{ display: inline-block; } .hide{ display: none; } /style meta charset=UTF-8 /head body !-- onmouseover= 鼠标悬停事件 onmouseout= 鼠标离开事件-- div onmouseover=pause1(); onmouseout=lunbo(); img src=../images/01.jpg class=show/ img src=../images/02.jpg class=hide/ img src=../images/03.jpg class=hide/ img src=../images/04.jpg class=hide/ img src=../images/05.jpg class=hide/ img src=../images/06.jpg class=hide/ /div script //轮播 var id = null; var index = 0; function lunbo() { //轮播次数 id = setInterval(function () { index++; //获取所有图片 var imgs = document.getElementsByTagName(img); //将他们隐藏 for (var i = 0; i imgs.length; i++) { imgs[i].className = hide; } //将下一张隐藏 var next = index % imgs.length; imgs[next].className = show; }, 2000); } function pause1() { clearInterval(id); } //在页面加载后自动轮播 lunbo(); /scri……

    网友NO.693954

    JavaScript实现带有子菜单和控件的slider轮播图效果

    大家或许做过(照片轮播)无限滚动图片的项目,但是,如果使用普通的滚动,当到达最后一张时,便会滚动回第一张,这是一个非常不好的用户体验。下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果,具体实现代码如下所示: 实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // 4. 鼠标放到ol的li上切换图片 // 5. 添加定时器 // 6. 左右切换图片(鼠标放上去隐藏,移开显示) 实现代码: !DOCTYPE htmlhtmlhead title轮播图/title meta charset="utf-8" style type="text/css" *{ padding: 0; margin: 0; list-style: none; border: 0; } .all{ width: 500px; height: 200px; padding: 7px; margin: 100px auto; position: relative; box-shadow: 1px 1px 5px #2d2d2d; } .screen{ width: 500px; height:……

    <
    1
    >

    Copyright 2018-2020 www.xz577.com 码农之家

    投诉 / 推广 / 赞助:QQ:520161757