getElementsByClassName兼容(只支持单个className查找)
/*
* node {节点名称}
*
* classname {需要查找的class名称}
*/
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) {
// 使用现有方法
return node.getElementsByClassName(classname)
}
else {
var results = new Array();
var elems = node.getElementsByClassName('*')
for (var i=0;i<elems.length;i++) {
if (elems[i].className.indexOf(classname) !== -1) {
return results[results.length] = elems[i]
}
}
return results;
}
}
getElementsByClassName兼容(支持多个className查找)
/*
* node {节点名称}
*
* className {一个或多个类名,用空格分隔。多个类名称要求每个匹配都具有指定的所有类} {必须}
* tag {指定要匹配的元素的标签名称} {可选}
* elm {引用DOM元素以查看其子项中的匹配项} {可选}
*/
var getElementsByClassName = function (className,tag,elm) {
// 使用现有方法
if (document.getElementsByClassName) {
getElementsByClassName = function(className,tag,elm) {
// 获取节点
elm = elm || document;
// 获取查找到的元素 className参数
var elements = elm.getElementsByClassName(className);
// 获取节点名称 tag参数
var nodeName = (tag) ? new RegExp('\\b' + tag + '\\b', 'i') : null;
// 返回查找到的节点
var returnElements = [];
// 当前节点
var current;
for (var i=0,il=elements.length;i<il;i++) {
current = elements[i];
if (!nodeName || nodeName.test(current.nodeName)) {
returnElements.push(current);
}
}
return returnElements;
}
}
// 用于提升查找性能
else if (document.evaluate) {
getElementsByClassName = function(className,tag,elm) {
tag = tag || '';
elm = elm || document;
// 分割多个 className
var classes = className.splice(' ');
var classesToCheck = '';
// 检查页面名称空间
var xhtmlNamespace = 'http://www.w3.org/1999/xhtml';
var namespaceResolve = (document.documentElement.namespaceURI === xhtmlNamespace) ? xhtmlNamespace : null;
var returnElements = [];
var elements;
var node;
for (var j=0,jl=classes.length;j<jl;j++) {
classesToCheck += "[contains(concat(' ',@class,' '),'" + classes[j] + " ')]";
}
/*
* xpathExpression {是表示要评估的XPath的字符串}
* contextNode {指定查询的上下文节点,通常document作为上下文节点传递}
* namespaceResolver {用于解析XPath本身中的前缀,以便它们可以与文档匹配}
* resultType {一个整数,对应于XPathResult要返回的结果的类型}
* result {一个现有的XPathResult用于结果}
*/
try {
elements = document.evaluate('.//' + tag + classesToCheck, elm, namespaceResolve, 0, null);
}
catch (e) {
elements = document.evaluate('.//' + tag + classesToCheck, elm, null, 0, null);
}
// elements.iterateNext {访问返回的节点}
while ((node = elements.iterateNext())) {
returnElements.push(node)
}
return returnElements;
}
}
else {
getElementsByClassName = function(className,tag,elm) {
tag = tag || '';
elm = elm || document;
// 分割多个 class
var classes = className.splice(' ');
var classesToCheck = '';
// 查找所有节点
var elements = (tag === '*' && elm.all) ? elm.all : elm.getElementsByTagName(tag);
// 当前节点
var current;
// 结果数组
var returnElements = [];
// 判断节点是否匹配条件
var match;
for (var k=0,kl=classes.length;k<kl;k++) {
classesToCheck.push(new RegExp('(^|\\s)' + classes[k] + '(\\s|$)'));
}
for (var l=0,ll = elements.length;l<ll;l++) {
current = elements[i];
match = false;
for (var m=0,ml=classesToCheck.length;m<ml;m++) {
match = classesToCheck[m].test(current.className);
if (!match) {
break;
}
}
if (match) {
returnElements.push(current);
}
}
return returnElements;
}
}
return getElementsByClassName(className, tag, elm);
}
insertAfter(在现有元素后面插入一个新元素)
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
// 检查目标元素是不是 parent 的最后一个子元素
if (parent.lastChild === targetElement) {
// 把新元素追加到 parent 元素上
parent.appendChild(newElement);
}
else {
// 把新元素插入到目标元素和目标元素的下一个兄弟元素之间
parent.insertBefore(newElement, targetElement.nextSibling);
}
}