【JS实现JQuery方法】parents、parent、children、data

parent方法

function parent(node){
    return node.parentNode || null;
}

node是一个DOM元素。

还有一个方法，传入两个DOM元素，验证后者是否是前者的父元素。个人觉得不太实用，列出来供参考。

function parentUntil(node, parentNode){
    while(parent(node) != parentNode){
        node = parent(node);
    }
    return parentNode;
}

parents方法

这里实现的parents方法与JQ中的有所不同，主要区别在于，我实现的方法主要用于查找一个DOM元素，他的父元素中是否包含某个classname或者id。

/**
 * 查找dom的祖先元素 查看是否包含parentSelector的id或者样式的元素
 * @param el  传入的dom元素
 * @param parentSelector  要查找的祖先元素id名称或者类名
 * @returns boolean|HTMLElement
 * // getParents(document.getElementById('ResTableList'), '#main或者.main');
 */
export function getParents(el, parentSelector) {
  if (!parentSelector ||
      parentSelector === undefined) {
    throw new Error('请传入要搜索的父元素Id名或者类名#id或者.classname');
  }


  // 默认匹配的类型
  var type = 'className';
  var splitF = '.';
  // 如果第一个字符是#那么证明传入的是id
  if (parentSelector.indexOf('#') === 0) {
    type = 'id';
    splitF = '#';
  }
  // 根据类型拆分出字符串
  var selector = parentSelector.split(splitF)[1];

  function getP(el) {
    // 获取当前元素的父元素
    var p = el.parentNode;
    // 如果元素的父元素是document 那么证明已经到最后一层了 就是没有匹配到这个父元素
    if (p === document) {
      return false;
    }
    // 如果父元素的id或者class包含样式类
    if (p[type].indexOf(selector) > -1) {
      // 如果包含 那么返回这个元素
      return p;
    } else {
      // 如果不包含那么就递归 这里要return递归函数 否则会没有返回值
      return getP(p);
    }
  }

  var final = getP(el);

  return final;
}

使用：

getParents(document.getElementById('ResTableList'), '#main');
getParents(document.getElementById('ResTableList'), '.main');
如果他的某一个父元素中含有要查找的元素，则返回，没有则返回false

children

function children(parentNode){
    var children,
        length,
        nodeArray = [],
        i = 0;
    if(parentNode.nodeType === 1){
        //兼顾一下ff3.6以下的版本, 当然也可以不考虑了, 直接用children
        children = parentNode.children || parentNode.childNodes; 
        length = children.length;
        for(; i < length; i++){
            if(children[i].nodeType !== 1){
                continue;
            }
            nodeArray.push(children[i]);
        }
        return nodeArray;
    }
    else{
        return null;
    }
}

获取一个元素下所有的子元素，成功返回子元素的数组，否则返回Null。

getData

实现JQuery中的data方法，获取DOM元素上的data-*的属性值。

// 获取点击的元素的data-属性
export function getData(el, name, val) {
  const prefix = 'data-'
  name = prefix + name
  // 如果传val那么就是set一个data-属性，如果不传就是get一个data-的值，最后一个值决定get/set的设置技巧
  if (val) {
    return el.setAttribute(name, val)
  } else {
    return el.getAttribute(name)
  }
}

如果传val那么就是set一个data-属性，如果不传就是get一个data-的值，最后一个值决定get/set的执行方式。当然，如果不需要兼容低端浏览器，那么可以使用dataset函数（在《JS高级程序设计》P293页）：

<div id="myDIV" data-appid="12345" data-myname="wubin"></div>

var div = document.getElementById('myDIV');
// 获取值
var appid = div.dataset.appid;
var name = div.dataset.myname;

// 设置值
div.dataset.appid = 5678;
div.dataset.myname = 'vision3656';

// 判断是否有值
if (div.dataset.myname) {
    alert('存在值就输出');
}

自定义属性浏览器支持性dataset