最近写代码时需要获取符合某些条件的节点子元素,用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遍历子元素的更多相关文章

  1. Javascript禁止子元素继承父元素的事件

    3种方法1.在父元素事件的function中加if(event.target==this){ }2.子元素事件function最后加event.stopPropgation():// 阻止事件冒泡3. ...

  2. JQuery 遍历子元素+ each函数的跳出+提取字符串中的数字

    最近脑袋迷糊的如同一团浆糊,一直出错. HTML代码如下图,现在想实现的功能是根据Ajax请求,获取到具体的button,以更新其样式.由于Button较多,每个Button都设置id,没有意义,想通 ...

  3. javascript阻止子元素继承父元素事件

    $('.box').on('click', function (e) { if(e.target == this) { console.log(e.target) } })

  4. jquery根据(遍历)html()的内容/根据子元素的内容(元素文本)来选择(查询),在子元素前加入元素

    <ul> <li>First</li> <li>second</li> <li>third</li> </ul ...

  5. Javascript事件模型(二):Javascript事件的父元素和子元素

    DOM事件标准定义了两种事件流,分别是捕获和冒泡.默认情况下,事件使用冒泡事件流,不使用捕获事件流.你可以指定使用捕获事件流,方法是在注册事件时传入useCapture参数,将这个参数设为true. ...

  6. 原生JavaScript如何解决父元素查找指定类名的子元素的问题

    问题:已知一个元素的类名是right并且这个元素的祖先元素的类名为parent,现在想通过原生JavaScript获得这个类名为right的元素. 我的思路:利用递归.先判断已知的祖先元素(题中的pa ...

  7. javascript判断一个元素是另外一个元素的子元素

    javascript判断一个元素是另外一个元素的子元素用途有很多,最常用的就是当点击页面的空白处去执行某些操作,比如弹出层等. function isParent (obj,parentObj){ w ...

  8. js遍历 子节点 子元素

    Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); v ...

  9. DOM操作-倒排序子元素

    代码: —————————————————————————————— <script type="text/javascript">                // ...

随机推荐

  1. PHP CURL访问HTTPS使用详解

    三年前写过一篇<一个简陋的支持HTTPS的PHP CURL封装函数>,当时只是知其然不知其所以然,今天来详细梳理一下. https服务器post数据 代码如下 复制代码 function ...

  2. QQ分组实现,可收缩---ExpandableListView

    activity: package com.zzw.qqgroup; import java.util.ArrayList; import java.util.HashMap; import java ...

  3. 复习后台代码(与前面clentHttp连接网络结合)

    package com.zzw.LoginServelt; import java.io.IOException; import java.io.PrintWriter; import javax.s ...

  4. htaccess rewrites重写规则实例

    1..htaccess rewrite实例开始部分 Options +FollowSymLinksRewriteEngine OnRewriteBase / 2.把不带www的域名地址重定向到带www ...

  5. 第十六章 调试及安全性(In .net4.5) 之 调试程序

    1. 概述 本章内容包括 如何选择合适的构建类型.创建和管理编译指令.管理程序数据文件(pdb)和指令. 2. 主要内容 2.1 构建类型 .net中默认的两种生成模式是 发布(Release)模式 ...

  6. selenium+python登录登出百度,等待页面加载,鼠标定位

    #coding:gbk from selenium import webdriver from selenium.webdriver.common.keys import Keys from sele ...

  7. WPF DragDrop事件元素跟随

    前一段时间项目里面要实现一个鼠标拖动一个元素到另外一个元素上面并且赋值的功能,由于要在surface上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...

  8. Android SDK API (2.2,2.3,3.0)中文版文档

    转的一篇.觉得很有用. Android SDK API (2.2,2.3,3.0)中文版文档 地址:http://android.laoguo.org固定连接:http://www.laoguo.or ...

  9. Excle快速输入√与×

    如何在EXCLE中快速输入√与×呢 很简单的一个小技巧,只需要在EXCLE单元格中输入P(O) 然后将其字体设置为Wingdings 2,接着就出现符号了 不信你可以试试的哦.

  10. Oracle Database Links解析

    什么是Database Links呢? 首先我们阐述下它的作用:使用户可以通过一个数据库访问到另外一个远程数据库. 那么Database Link是存储着远程数据库的连接信息. 如下图所示: 用户Sc ...