位置: 编程技术 - 正文

基于JavaScript创建动态Dom(基于javascript创建导航页面)

编辑:rootadmin

推荐整理分享基于JavaScript创建动态Dom(基于javascript创建导航页面),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:javascript基于什么的语言,基于javascript创建导航页面,javascript基于什么的语言,用javascript,编写javascript,javascript基于什么的语言,编写javascript,基于javascript创建导航页面,内容如对您有帮助,希望把文章链接给更多的朋友!

动态脚本

我们在页面中使用<script>元素就可以向页面中插入javascript代码。有两种方式:一种是通过src属性引用外部的JS文件,一种是用这个元素来包含一段js代码。所谓的动态脚本,就是指这个脚本在页面加载时不存在,在将来的某一个时刻通过修改DOM来动态的添加脚本。与操作html元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript代码。

动态加载的外部JavaScript代码可以立刻被执行,例如下面的代码:

从上图的结果中可以看到,上面代码在<body>元素中生成了一个<script>节点:

需要注意的是,在执行最后一行代码把<script>添加到页面之前,是不会下载外部脚本文件的。

另一种指定JavaScript代码的方式是行内方式,例如:

上面的代码会在<body>元素中插入一段JavaScript代码:

执行上面的代码后会弹出提示框,显示“hello world!”文本。

在Firefox、Safari、Chrome和Opera浏览器中,上面操作的DOM代码是可以正常执行的。但是在旧版本的IE浏览器中,这些代码会发生错误。旧版本的IE浏览器将<script>元素看做特殊元素,不允许DOM访问它的子节点。不过,可以使用<script>元素的text属性来指定JavaScript代码,例如:

像上面这样修改代码之后,在IE、Firefox、Safari3.0、Chrome和Opera浏览器中都可以运行。Safari3.0之前的浏览器虽然不能正确的执行text属性,但是可以使用文本节点来指定代码。所以如果需要支持旧版本的浏览器,可以像下面这样书写代码:

上面的代码首先尝试标准的DOM文本节点方法,因为除了旧版本的IE浏览器之外,其它浏览器都支持这种方式。如果这行代码抛出异常,那么说明是旧版本的IE浏览器,那就必须使用text属性。

我们可以将动态添加脚本的代码封装到一个函数中,通过不同的参数来动态加载不同的脚本。

要调用这个函数,可以像下面的样子:

这种方式加载的代码会在全局作用域中执行,而且当脚本执行后立刻可用。实际上,这样执行代码与在全局作用域中把相同的字符串传递给eval()函数是一样的。

动态样式

通常可以将CSS样式包含到HTML页面中的元素有两个:一个是<link>元素,用于包含来自外部的文件;另一个是<style>元素,用于指定嵌入样式。与动态脚本类似,动态样式是指在页面加载时并不存在的样式。动态样式是在页面加载完成后动态添加到页面中的脚本。例如下面的例子:

以上的代码在所有主流的浏览器中都可以正常运行。需要注意的是<link>元素要添加到<head>元素中,而不是<body>元素中,才能保证在所有浏览器中的行为一致。

另外要注意的是,加载外部样式文件的过程是异步的,也就是说加载样式和执行JavaScript代码的过程没有固定的次序。

另外一种定义样式的方式是使用<style>元素来包含嵌入式的CSS样式。例如下面的代码:

基于JavaScript创建动态Dom(基于javascript创建导航页面)

上面的代码执行后可以在<head>元素中动态添加下面的节点:

以上的代码可以在Firefox、Safari、Chrome和Opera浏览器中正常运行,在旧版本的IE浏览器中会报错。旧版本的IE浏览器会将<style>元素看做一个特殊的节点,不允许访问它的子节点。要解决旧版本IE的问题,就是访问元素的styleSheet属性,该属性又有一个cssText属性,可以接受CSS代码。例如下面的代码:

同样,我们也可以将动态添加样式的代码封装到一个函数中,通过不同的参数来动态加载不同的样式。

JavaScript对表格的操作

在JavaScript中,为了使我们能够方便的构建表格,HTML DOM为表格的<table>、<tbody>和<tr>提供了一些属性和方法。

表格的<table>元素的属性和方法有:

caption:保存<caption>元素的引用的指针。tBodies:是一个<tbody>元素的HTMLCollection。tFoot:保存<tfoot>元素的引用的指针。tHead:保存<thead>元素的引用的指针。rows:是表格中所有行的HTMLCollection。createTHead():创建<thead>元素,将它放入表格中,并返回其引用。createTFoot():创建<tfoot>元素,将它放入表格中,并返回其引用。createCaption():创建<caption>元素,将它放入表格中,并返回其引用。deleteTHead():删除<thead>元素。deleteTFoot():删除<tfoot>元素deleteCaption():删除<caption>元素deleteRow(pos):删除指定位置的表格行。insertRow(pos):向rows集合中指定位置插入一行。

表格的<tbody>元素的属性和方法有:

rows:保存着<tbody>元素中行的HTMLCollection。deleteRow(pos):删除指定位置的表格行。insertRow(pos):向rows集合中指定位置插入一行。

表格的<tr>元素的属性和方法有:

cells:保存着<tr>元素中单元格的HTMLCollection。deleteCell(pos):删除指定位置的单元格。insertCell(pos):向cells集合中指定位置插入一个单元格,并返回新插入单元格的引用。

使用上面的这些属性和方法,可以使我们轻松的使用JavaScript来创建表格,例如下面的代码:

使用上面的代码可以动态的在页面中创建一个表格。其中在创建表格行的时候,通过<tbody>元素调用了insertCell()方法,并传入参数0(表示将插入的行放在什么位置上)。执行了这一行代码后,会自动创建一个表格行,并将它插入到<tbody>元素的0位置上,此时就可以通过tbody.rows[0]来引用新插入的行。

创建单元格的方式也与创建表格行的方式相同。通过<tr>元素来调用insertCell()方法,并传入要放置单元格的位置。然后就可以通过tbody.rows[0].cells[0]来引用新插入的单元格。

关于NodeList

理解NodeList和NamedNodeMap、HTMLCollection是从整体上理解DOM的关键所在。这3个集合都是动态的,也就是说,每当文档结构发生了变化,它们始终都会保存最新的信息。从本质上来说,所有的NodeList对象都是在访问DOM文档时实时运行的查询。例如下面的代码会导致死循环的出现:

上面的代码首先获取了所有<div>元素的HTMLCollection,保存在一个变量中。由于这个集合是动态的,所以只要有新的<div>被添加到页面中,新的<div>元素就会被添加到这个集合中。这样导致的后果是div.length值是不断变化的,每次循环会在页面中添加一个<div>元素,length的值也会递增。这样i < divs.length条件就永远不会成立,导致死循环的发生。

如果我们要迭代一个NodeList,最好将length属性初始化为第二个变量,然后将迭代器和这个变量做比较,例如:

由于len中保存了divs.length在循环开始时的一个快照,因此会避免死循环情况的发生。

更多示例:

html dom树:

javascript如何写热点图 在gis中,你如果用js来写热点图不借助后台怎么搞,as的话比较容易有相应的类库甚至官方都有。而且用js不借助arcgis发布rest服务,(注:热点图可以借

js实现卡片式项目管理界面UI设计效果 这是一款非常有创意的卡片式项目管理界面UI设计效果。该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该

JavaScript常用基础知识强化学习 首先,还是用比较官方的文字描述来解释下JavaScript:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解

标签: 基于javascript创建导航页面

本文链接地址:https://www.jiuchutong.com/biancheng/387152.html 转载请保留说明!

上一篇:JS判断当前页面是否在微信浏览器打开的方法(js判断网页链接是否可用)

下一篇:javascript如何写热点图(javascript如何写操作命令)

  • 固定资产转让怎么做账
  • 收到增值税发票怎么认证
  • 可明确区分的商品
  • 销售货物和服务流程 事前检查单上
  • 100万劳务费发票多少税
  • 二季度申报时间
  • 缴纳销项税额要交税吗
  • 取得不动产权证书时间是指哪个时间
  • 出纳工人借支与贷款区别
  • 会计折旧法有哪几种
  • 招标代理资质办理好办吗
  • 存货计提减值准备是什么原则
  • 咨询服务企业发展瓶颈期
  • 旅行社开哪里比较好
  • 别人的项目挂靠我公司怎么做账?
  • 企业减免6%的税的营业范围有哪些?
  • 企业自建房转让如何交土地增值税
  • 实物返利缴纳所得税吗?
  • 小规模纳税人差额征税
  • 股权转让有溢价怎么做账
  • 营改增后还有建筑业发票吗
  • 个税多申报了实发没有这么多,如何处理
  • 享受企业所得税税额抵免优惠的设备包括
  • 折价购买债券是什么意思
  • 注册会计师考点分析
  • 公司绿化购买的苗木如何进行账务处理?
  • 派遣员工发生工伤这钱谁出
  • 怎么做汇算清缴报表
  • 网络共享每次都要输入密码
  • 车间管理人员工资记什么费用
  • 华为mate手机sim卡怎么插
  • 同一年可以先娶后嫁吗
  • 全月应纳税所得额什么意思
  • word要打印保存在哪个类型
  • yii2.0实现验证用户名与邮箱功能
  • 员工出差补贴怎么入账
  • php字符串处理函数
  • php require的用法
  • php的数组函数
  • 购进原材料款项怎么入账
  • 最早的笔记本是512m内存
  • php处理大量数据
  • 大学送礼物该送多少钱的
  • vue高级函数
  • linux系统中安装auto dock
  • 深度学习参数初始化(二)Kaiming初始化 含代码
  • 语义分割用途
  • 存货报废如何处理方案
  • 个体户转账到法人账户要交税吗
  • 应收利息可以计入其他应收款吗
  • 开票软件密码和口令锁定了,怎么解锁
  • 社保公司承担部分计入哪个科目
  • sql2008还原到2012
  • mysql死锁的处理方法
  • 茶叶企业所得税减免
  • 固定资产卡片账是明细账吗
  • 土地使用权的核算
  • 移动怎么开当月发票
  • 公司买的车如何入账举例说明
  • 饭店卖烟酒需要什么手续
  • 退回拨款会计分录怎么做
  • 投资性房地产的范围
  • 个人到税务局开普票要交多少税
  • mysql怎么把列变成行
  • xbox预览系统
  • xp开机延时启动程序
  • xp更改dns
  • win10的win+tab
  • php.exe是什么
  • win7双击有声音
  • 铁嘴王指什么动物
  • ExtJS扩展 垂直tabLayout实现代码
  • android开发环境安装步骤
  • android 界面滑动
  • vue自定义组件v-html
  • nodejs拼接路径的方法
  • jquery轮播图自动播放
  • javascript中的数据类型分为两大类
  • 劳务合同和劳务协议的区别和联系
  • 增值税有哪些税目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设