位置: 编程技术 - 正文

JavaScript DOM学习第四章 getElementByTagNames(js dom方法)

编辑:rootadmin
getElementByTagNames(注意是复数的names)会获得一些tag的元素,然后按照他们的顺序保存在一个数组中。这非常的有用,比如在上一章的TOCScript中,就需要获得整个文章里面的所有的H3和H4。 我非常希望在node原型中加入这个功能,但是在IE和Safari里面不行。所以只能把他当做一个普通函数。 使用 getElementByTagNames有两个参数: 1、一个用逗号分隔的tag名称字符串。 2、一个可选的开始元素。如果存在则在该元素的子元素中查找这些tag,如果不存在则在整个文档中查找。 这个函数根据要求的tag名称返回一个数组(而不是节点列表),按照他们在源代码中的出现顺序排列。对于这个排序需要浏览器支持sourceIndex或者compareDocumentPosition。如果都不支持(Safari)那么就按照调用getElementByTagNames()函数时候的tag名称的顺序。 实例1 现在headerList就是文档里包含H1-H4的数组,按照他们出现的顺序排序。 实例2 现在formFieldList就是包含在ID为test的元素下的所有子元素中的input,select,TEXTAREA的数组,并且按照他们出现的书序排列。 解释 首先定义开始元素obj,如果没有给出,那么默认就是document。 将这些tag名称以逗号分割。用一个数组来保存结果。 现在我们遍历所有的tag名称,就用最简单的getElementByTagName()方法,然后把结果传入resultArray。这里的一个要点是,因为getElementByTagName返回的是节点列表,所以我就不能使用array.concat()来建立新的数组。把元素一个一个的压入是我能找到的最好的办法。 我们得到了一个所需的tag名称的元素的指针数组存储在resultArray中,但是这些元素还是按照我们所给的tag的顺序排列的。我们需要再排个序。 现在我们开始排序。我们需要知道浏览器是否支持sourceIndex或者compareDocumentPosition,然后我们对于我们的得到的原始数据做一些检测 如果这里没有第一个节点(也就是说结果里并没有我们需要的元素),就返回一个空数组。 背景:array.sort() array.sort()方法有一个可选函数的参数。这个函数用来比较两个元素(通常称为a和b)。如果第一个应该在前那么这个函数就返回一个负数,如果第二个应该在前那么就返回一个正值。 sourceIndex 如果浏览器支持sourceIndex,我们就根据元素的sourceIndex来排序。sourceIndex是微软的一个非常有用的扩展,可以用来知道元素在源代码中的索引值。页面种的第一个元素(<HTML>)的索引值就是0,第二个(<head>)就是1,等等。sourceIndex也是getElementByTagName(*)中的元素的索引值。 我们用第一个元素的sourceIndex值减去第二个元素的sourceIndex,如果是负值,那么第一个元素就排在前面,如果是正值,那么第二个元素排在前面。这就是sort()需要的。现在resultArray中的元素就是根据他们在文档中的位置来排序的。 compareDocumentPosition 如果浏览器支持compareDocumentPosition,那么就用这个办法来排序。compareDocumentPosition是level3的核心方法,他可以比较两个节点在文档中的位置,然后返回一个值: 1 没有找到 2 在前 4 在后 8 包含 被包含 比如,如果一个标签被包含并且在另一个标签的后面,那么就返回+4=。 我们只对compareDocumentPosition的值中的2、4感兴趣:在前或者在后。所以我们将结果和6进行与运算,这样结果就会是2或者4(当然结果不能是6,因为一个元素不能即在一个元素之前又在一个元素之后) 如果b在a之后则返回4,但是sort()需要一个负数。如果b在a之前则返回2,但是sort()需要一个正数。为了给sort()一个正确的结果我把他们用3来减。这样就得到1或者-1,这样sort()就能对元素进行正确的排序,resultArray中的元素也按照他们在文档种的出现顺序排列。 然后我们返回resultArray给调用它的函数。记住如果浏览器不支持sourceIndex或者compareDocumentPosition数组就没有排序。 翻译地址: 转载请保留以下信息 作者:北玉(tw:@rehawk)

推荐整理分享JavaScript DOM学习第四章 getElementByTagNames(js dom方法),希望有所帮助,仅作参考,欢迎阅读内容。

JavaScript DOM学习第四章 getElementByTagNames(js dom方法)

文章相关热门搜索词:js dom操作方法,javascript中的dom,javascriptdom编程,javascript的dom,js中dom的用法,js domcontentloaded,js dom操作方法,js dom操作方法,内容如对您有帮助,希望把文章链接给更多的朋友!

JavaScript DOM 学习第五章 表单简介 因为每一个表单的检测项都不同,所以我也不能给你一个万能的代码。你需要用我在这一章介绍的这些元素构建自己的检测函数。我在后面一张还有一

JavaScript DOM学习第六章 表单实例 表单实例这是一个表单的实力。这里有一个小问题:因为我的服务器现在不支持,所以表单不能提交。我会打印出你的输入,然后返回一个false,这样表

JavaScript DOM 学习第七章 表单的扩展 想法假设你有一个在线的CD评级工具。你希望用户查看他们喜欢的所有CD。但是你怎么知道用户平均会查看多少张呢?你在这个页面上需要添加多少字段

标签: js dom方法

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

上一篇:JavaScript DOM 学习第三章 内容表格(javascript的dom)

下一篇:JavaScript DOM 学习第五章 表单简介(javascript的dom)

  • 人力资源外包可以选择简易计税吗
  • 交强险必须交车船使用税吗
  • 小规模租金可以按1%
  • 科研材料怎么买
  • 汇算清缴结束后,税务机关发现企业应当取得
  • 电子发票开票方怎么做账
  • 受托加工费直接计入生产成本
  • 以前年度已付的现金
  • 非公益捐赠如何调整应纳税所得额?
  • 房地产开发企业预收款预缴增值税
  • 原材料盘盈审批后冲减
  • 预售房提前还款需要去解押吗
  • 收回的材料赔偿款怎么处理?
  • 材料采购成本差异属于什么科目
  • 什么情况下需要写答
  • 海关进口增值税专用缴款书是发票吗
  • 餐饮发票增值税税率是多少
  • 未在规定期限内发出追索通知
  • 在建工程摊销是啥意思
  • 赊购商品一批
  • 个人接受捐赠要开发票吗
  • 房地产预缴税金附加可以计提吗
  • 营改增后城建税和教育费附加包含在哪里
  • 小规模纳税人核定征收标准
  • 贴现利息计算器
  • 库存股股本属于什么科目,借贷方向
  • 发票遗失如何补开
  • 操作系统不同
  • 阻止系统蓝屏后怎么恢复
  • Mac系统怎么设置ftp
  • 应交增值税的会计科目
  • win10重启按什么键重置
  • Mysql的GROUP_CONCAT()函数使用方法
  • PHP:pg_connection_status()的用法_PostgreSQL函数
  • 留抵增值税可以冲营业外支出吗
  • 公司购置办公楼自用
  • php处理excel
  • 实收资本印花税税率多少
  • querywrapper多表联查
  • 权重函数公式
  • 其他非流动资产包括哪些
  • vue缓存路由组件相关的两个生命周期函数是
  • php str
  • thinkphp框架设计原理
  • 帝国cms怎么加自己的名字
  • 如何测试php
  • 进项税加计抵减是什么意思
  • vue 鼠标移入移出(hover)切换显示图片问题
  • java中同步有两种方法
  • 房地产企业所得税计算方法
  • 员工的生日津贴怎么发
  • SQL Server通过重建方式还原master数据库
  • 企业所得税汇算清缴操作流程
  • sql表添加字段
  • 信用减值损失在贷方表示什么
  • 股权激励具体解释是什么
  • 租赁行业的增值税率
  • 事业单位职工福利费
  • 未计提坏账准备的应收账款
  • 税控设备维护费会计分录
  • 公司企业名称变更流程
  • 商品过期怎么做分录
  • sqlserver2012安装失败原因
  • 如何禁用windows defender service
  • win8.1如何更改开始菜单
  • centos libcrypto.so.1.0.0
  • 批处理在windows中的典型应用
  • input和button按钮合到一起
  • unity 读取txt
  • unity如何操作
  • egret引擎基础入门
  • python3m
  • js中的require用法
  • 智能图片制作
  • python flask 路由
  • 税务举报被泄漏怎么办
  • 个体工商户税务申报怎么操作流程
  • 广州电子税务局官网登录入口网址
  • 技术进出口指什么技术
  • 12345市民热线什么时候有的
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设