javascript遍历子元素
最近写代码时需要获取符合某些条件的节点子元素,用firstChild之类的方法会包含文本节点,所以包装了一个简单的类:
//子元素遍历器
function ElementWalker(node) {
if(typeof node === 'string')
node = document.getElementById(node);
this.node = node;
}
ElementWalker.prototype = {
//获取第一个指定tagName的子元素,如果tagName没定义,则返回第一个子元素
first: function(tagName) {
if((typeof tagName === 'undefined') && this.node.firstElementChild) {
return new ElementWalker(this.node.firstElementChild);
}
for(i = 0; i < this.node.childNodes.length; i++) {
if(this.checkChild(i,tagName)) {
return new ElementWalker(child);
}
}
},
//获取最后一个指定tagName的子元素,如果tagName没定义,则返回最后一个子元素
last: function(tagName) {
if((typeof tagName === 'undefined') && this.node.lastElementChild) {
return new ElementWalker(this.node.lastElementChild);
}
for(i = parent.childNodes.length - 1; i >= 0; i--) {
var child = this.node.childNodes[i];
if(this.checkChild(child,tagName)) {
return new ElementWalker(child);
}
}
},
//返回所有指定tagName的子元素,如果tagName没定义,则返回所有子元素
all: function(tagName) {
var children = [];
for(i = 0; i < this.node.childNodes.length; i++) {
var child = this.node.childNodes[i];
if(this.checkChild(child,tagName)) {
children.push(new ElementWalker(child));
}
}
return children;
},
//校验child是否是指定tagName的元素
checkChild : function(child,tagName) {
var isOK = (typeof tagName === 'undefined') && child.nodeType == 1;
isOK = isOK || (child.tagName && child.tagName.toLowerCase() === tagName);
return isOK;
}
}
javascript遍历子元素的更多相关文章
- Javascript禁止子元素继承父元素的事件
3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...
- JQuery 遍历子元素+ each函数的跳出+提取字符串中的数字
最近脑袋迷糊的如同一团浆糊,一直出错. HTML代码如下图,现在想实现的功能是根据Ajax请求,获取到具体的button,以更新其样式.由于Button较多,每个Button都设置id,没有意义,想通 ...
- javascript阻止子元素继承父元素事件
$('.box').on('click', function (e) { if(e.target == this) { console.log(e.target) } })
- jquery根据(遍历)html()的内容/根据子元素的内容(元素文本)来选择(查询),在子元素前加入元素
<ul> <li>First</li> <li>second</li> <li>third</li> </ul ...
- Javascript事件模型(二):Javascript事件的父元素和子元素
DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...
- 原生JavaScript如何解决父元素查找指定类名的子元素的问题
问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...
- javascript判断一个元素是另外一个元素的子元素
javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...
- js遍历 子节点 子元素
Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); v ...
- DOM操作-倒排序子元素
代码: —————————————————————————————— <script type="text/javascript"> // ...
随机推荐
- PHP-POSIX正则表达式函数
1.ereg() 格式:ereg("条件",<原始字符串>) ereg()查找字符串,是严格区分大小写的 <?php $string="apples a ...
- 模拟新浪微博textarea,刷新页面输入信息保留
今天我们的产品经理提出一个新需求,模拟新浪微博textarea框,输入内容刷新页面保留信息. 我是用的方法是Html5 LocalStorage存储的,开始计划用cookie.或mysql存储,尝试了 ...
- 从零开始之ecshop基础篇(17)
目标:基于自定义的mvc框架开发的案例(项目) 项目周期 需求分析 典型的业务逻辑: 电子商务:商城(京东),B2C,C2C(淘宝),团购,秒杀,代购 内容管理:新浪门户类,优酷视频管理, ...
- Java输出1~1000之间所有可以被3整除又可以被5整除的数
主要在于判断是否能被整除,思路是用取余运算符%,取余结果为0就表示能被整除. 代码如下: public class NumDemo { public static void main(String a ...
- 在Javascript操作JSON对象,增加 删除 修改
在Javascript操作JSON对象,增加删除修改全有的,详情见代码 <script type="text/javascript"> var jsonObj2 = { ...
- C# 程序开始主要是写类和方法 的基本步骤和调用方法
主程序的使用方式以及调用方法字段.属性.方法 using System; using System.Collections.Generic; using System.Linq; using Syst ...
- C# 平时碰见的问题【3】
今天发现一个问题纳闷了半个小时, 需求是处理project文件里边的数据内容,其中需要判断任务名称不存在重复; 在测试的时候弄了两行一样的任务,如预想: 任务[xxx]重复 然后删掉重复的任务行,继续 ...
- python分片
刚刚学习,很新 >>> numbers = [1,2,3,4,5,6,7,8,9,10] >>> numbers[0:10:2] [1,3,5,7,9] >& ...
- Java 控制台执行带自定义包定义的类,出现“Exception in thread "main" java.lang.NoClassDefFoundError: ConnectSQLServer (wrong name: sine/ConnectSQLServer)”
1.先说明一下代码实现:自定义package sine, 源代码保存路径为:E:\JSP\HibernateDemo\HibernateDemoProject\src\sine\ConnectSQLS ...
- SQL Server实现数据的递归查询
在一次项目中遇到一种需求,需要记录某产品的替换记录. 实际应用举例为:产品101被201替换,之后201又被303替换,303又被109替换:产品102被202替换,之后202又被105替换. 现在我 ...