代码改变世界

JavaScript实用主义[2]--基本的DOM操作

2011-07-09 13:16  Zhang_Chen  阅读(1612)  评论(6编辑  收藏  举报

JavaScript是一种语言,我们看不到它,在浏览器中我们使用JavaScript改变Html元素的属性、Html代码或文本,来实现我们需要的效果,实现我们需要的功能。

在Google中我搜索“JS实现?”在第一页中相关的结果是

JS实现页面跳转

JS实现浏览器菜单命令

JS实现下拉框跳转

JS实现联动下拉框

JS实现select对div隐藏与显示

JS实现联动导航菜单

我暂时不谈页面跳转、菜单命令和导航菜单(里面涉及到最多的其实是布局的问题)的话题,说一下关于下拉框。

JS实现联动下拉框

假如我们要实现这样的功能:让用户选择想要购买的商品,为了方便查找,我们给予了分类

电器:电视机、洗衣机、冰箱

厨房用品:燃气灶、烤箱、无烟锅

初始的html代码如下,id为category的为一级,item为二级:

image

我们有了第一级菜单,要做的就是当用户选择了某一项时向二级下拉框(#item)中添加指定的项目。

数据结构

上面的数据结构该如何写?按照实用的原则:使用JSON

image

items在运行时究竟是什么样子?打开调试工具我们看一下

SNAGHTML9590ec

由于我们的items为全局变量,所以在控制台中我输入it时开发工具给我提示items,很不错,回车之后,得到items,可以看到它是一个Object,有两个属性,每个属性值分别是长度为3的数组:

SNAGHTML99b4d0

此时我们再看上面写的JSON

image

你可以看到JSON的表现力是多么的优秀,原生的JavaScript支持,极强的可读性。

程序编写

我们需要知道用户什么时候选中了一级菜单,select为我们提供onchange事件通知JavaScript用户变更了选项。于是,我们编写一个函数,当事件触发时调用它:

image

补充完毕为

image

 

调试

我们试着运行一下

image

image

看起来不错,当我们选择第一项空白时

image

显然这不是我们需要的效果,看看到底出了什么问题打开 开发工具

SNAGHTMLc45f23

点击错误信息后面的代码行数

SNAGHTMLc5c007

提示信息为不能读取undefined的length属性,显然availableItems为undefined。

重复上面的动作,选一个类别,我们加一个断点,再选回空项目:

SNAGHTMLcabe05

我们看到availableItems确实为undefined。观察上面的代码:

availableItems是读取items名的属性,当前currentCategory为空值所以导致availableItems为undefined,我们加一些判断

image

问题解决。

总结

要实现特定的功能我们就用JavaScript修改Html元素的属性或HTML,步骤:

  1. 找到代码的切入点,动作的起点在哪里,什么时候需要执行动作
  2. 根据条件获取需要显示的数据,并拼接成指定的Html格式
  3. 修改目标元素的HTML,显示最终结果

当然,期间不要忘记做好充分的判断,增强代码的健壮性。

JS实现select对div隐藏与显示

有了上面的基础,我相信这一个已经十分容易了,还以上面的功能为例,我直接给出代码

html:

image

CSS:

image

JavaScript:

image

最终效果:

image

image

总结:

当选项变化时,使用了div style属性来控制div的显示状态,隐藏全部的div,仅显示指定的div。

上面的东西虽然较基础,但是却涵盖了JavaScript在浏览器中应用的大部分过程。希望对初学者有所帮助。

待续。。。