*
*
*
*
* ```
*/
findParent:function (node, filterFn, includeSelf) {
if (node && !domUtils.isBody(node)) {
node = includeSelf ? node : node.parentNode;
while (node) {
if (!filterFn || filterFn(node) || domUtils.isBody(node)) {
return filterFn && !filterFn(node) && domUtils.isBody(node) ? null : node;
}
node = node.parentNode;
}
}
return null;
},
/**
* 查找node的节点名为tagName的第一个祖先节点， 查找的起点是node节点的父节点。
* @method findParentByTagName
* @param { Node } node 需要查找的节点对象
* @param { Array } tagNames 需要查找的父节点的名称数组
* @warning 查找的终点是到body节点为止
* @return { Node | NULL } 如果找到符合条件的节点， 则返回该节点， 否则返回NULL
* @example
* ```javascript
* var node = UE.dom.domUtils.findParentByTagName( document.getElementsByTagName("div")[0], [ "BODY" ] );
* //output: BODY
* console.log( node.tagName );
* ```
*/
/**
* 查找node的节点名为tagName的祖先节点， 如果includeSelf的值为true，则查找的起点是给定的节点node，
* 否则， 起点是node的父节点。
* @method findParentByTagName
* @param { Node } node 需要查找的节点对象
* @param { Array } tagNames 需要查找的父节点的名称数组
* @param { Boolean } includeSelf 查找过程是否包含node节点自身
* @warning 查找的终点是到body节点为止
* @return { Node | NULL } 如果找到符合条件的节点， 则返回该节点， 否则返回NULL
* @example
* ```javascript
* var queryTarget = document.getElementsByTagName("div")[0];
* var node = UE.dom.domUtils.findParentByTagName( queryTarget, [ "DIV" ], true );
* //output: true
* console.log( queryTarget === node );
* ```
*/
findParentByTagName:function (node, tagNames, includeSelf, excludeFn) {
tagNames = utils.listToMap(utils.isArray(tagNames) ? tagNames : [tagNames]);
return domUtils.findParent(node, function (node) {
return tagNames[node.tagName] && !(excludeFn && excludeFn(node));
}, includeSelf);
},
/**
* 查找节点node的祖先节点集合， 查找的起点是给定节点的父节点，结果集中不包含给定的节点。
* @method findParents
* @param { Node } node 需要查找的节点对象
* @return { Array } 给定节点的祖先节点数组
* @grammar UE.dom.domUtils.findParents(node) => Array //返回一个祖先节点数组集合，不包含自身
* @grammar UE.dom.domUtils.findParents(node,includeSelf) => Array //返回一个祖先节点数组集合，includeSelf指定是否包含自身
* @grammar UE.dom.domUtils.findParents(node,includeSelf,filterFn) => Array //返回一个祖先节点数组集合，filterFn指定过滤条件，返回true的node将被选取
* @grammar UE.dom.domUtils.findParents(node,includeSelf,filterFn,closerFirst) => Array //返回一个祖先节点数组集合，closerFirst为true的话，node的直接父亲节点是数组的第0个
*/
/**
* 查找节点node的祖先节点集合， 如果includeSelf的值为true，
* 则返回的结果集中允许出现当前给定的节点， 否则， 该节点不会出现在其结果集中。
* @method findParents
* @param { Node } node 需要查找的节点对象
* @param { Boolean } includeSelf 查找的结果中是否允许包含当前查找的节点对象
* @return { Array } 给定节点的祖先节点数组
*/
findParents:function (node, includeSelf, filterFn, closerFirst) {
var parents = includeSelf && ( filterFn && filterFn(node) || !filterFn ) ? [node] : [];
while (node = domUtils.findParent(node, filterFn)) {
parents.push(node);
}
return closerFirst ? parents : parents.reverse();
},
/**
* 在节点node后面插入新节点newNode
* @method insertAfter
* @param { Node } node 目标节点
* @param { Node } newNode 新插入的节点， 该节点将置于目标节点之后
* @return { Node } 新插入的节点
*/
insertAfter:function (node, newNode) {
return node.nextSibling ? node.parentNode.insertBefore(newNode, node.nextSibling):
node.parentNode.appendChild(newNode);
},
/**
* 删除节点node及其下属的所有节点
* @method remove
* @param { Node } node 需要删除的节点对象
* @return { Node } 返回刚删除的节点对象
* @example
* ```html
*
*
*
* ```
*/
/**
* 删除节点node，并根据keepChildren的值决定是否保留子节点
* @method remove
* @param { Node } node 需要删除的节点对象
* @param { Boolean } keepChildren 是否需要保留子节点
* @return { Node } 返回刚删除的节点对象
* @example
* ```html
* 你好
*
*
*
* ```
*/
remove:function (node, keepChildren) {
var parent = node.parentNode,
child;
if (parent) {
if (keepChildren && node.hasChildNodes()) {
while (child = node.firstChild) {
parent.insertBefore(child, node);
}
}
parent.removeChild(node);
}
return node;
},
/**
* 取得node节点的下一个兄弟节点， 如果该节点其后没有兄弟节点， 则递归查找其父节点之后的第一个兄弟节点，
* 直到找到满足条件的节点或者递归到BODY节点之后才会结束。
* @method getNextDomNode
* @param { Node } node 需要获取其后的兄弟节点的节点对象
* @return { Node | NULL } 如果找满足条件的节点， 则返回该节点， 否则返回NULL
* @example
* ```html
*
* 你好
*
*
*
* xxx
*
*
* ```
* @example
* ```html
*
*
*
* xxx
*
* xxx
*
*
* ```
*/
/**
* 取得node节点的下一个兄弟节点， 如果startFromChild的值为ture，则先获取其子节点，
* 如果有子节点则直接返回第一个子节点；如果没有子节点或者startFromChild的值为false，
* 则执行getNextDomNode(Node node)的查找过程。
* @method getNextDomNode
* @param { Node } node 需要获取其后的兄弟节点的节点对象
* @param { Boolean } startFromChild 查找过程是否从其子节点开始
* @return { Node | NULL } 如果找满足条件的节点， 则返回该节点， 否则返回NULL
* @see UE.dom.domUtils.getNextDomNode(Node)
*/
getNextDomNode:function (node, startFromChild, filterFn, guard) {
return getDomNode(node, 'firstChild', 'nextSibling', startFromChild, filterFn, guard);
},
getPreDomNode:function (node, startFromChild, filterFn, guard) {
return getDomNode(node, 'lastChild', 'previousSibling', startFromChild, filterFn, guard);
},
/**
* 检测节点node是否属是UEditor定义的bookmark节点
* @method isBookmarkNode
* @private
* @param { Node } node 需要检测的节点对象
* @return { Boolean } 是否是bookmark节点
* @example
* ```html
*
*
* ```
*/
isBookmarkNode:function (node) {
return node.nodeType == 1 && node.id && /^_baidu_bookmark_/i.test(node.id);
},
/**
* 获取节点node所属的window对象
* @method getWindow
* @param { Node } node 节点对象
* @return { Window } 当前节点所属的window对象
* @example
* ```javascript
* //output: true
* console.log( UE.dom.domUtils.getWindow( document.body ) === window );
* ```
*/
getWindow:function (node) {
var doc = node.ownerDocument || node;
return doc.defaultView || doc.parentWindow;
},
/**
* 获取离nodeA与nodeB最近的公共的祖先节点
* @method getCommonAncestor
* @param { Node } nodeA 第一个节点
* @param { Node } nodeB 第二个节点
* @remind 如果给定的两个节点是同一个节点， 将直接返回该节点。
* @return { Node | NULL } 如果未找到公共节点， 返回NULL， 否则返回最近的公共祖先节点。
* @example
* ```javascript
* var commonAncestor = UE.dom.domUtils.getCommonAncestor( document.body, document.body.firstChild );
* //output: true
* console.log( commonAncestor.tagName.toLowerCase() === 'body' );
* ```
*/
getCommonAncestor:function (nodeA, nodeB) {
if (nodeA === nodeB)
return nodeA;
var parentsA = [nodeA] , parentsB = [nodeB], parent = nodeA, i = -1;
while (parent = parent.parentNode) {
if (parent === nodeB) {
return parent;
}
parentsA.push(parent);
}
parent = nodeB;
while (parent = parent.parentNode) {
if (parent === nodeA)
return parent;
parentsB.push(parent);
}
parentsA.reverse();
parentsB.reverse();
while (i++, parentsA[i] === parentsB[i]) {
}
return i == 0 ? null : parentsA[i - 1];
},
/**
* 清除node节点左右连续为空的兄弟inline节点
* @method clearEmptySibling
* @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
* 则这些兄弟节点将被删除
* @grammar UE.dom.domUtils.clearEmptySibling(node,ignoreNext) //ignoreNext指定是否忽略右边空节点
* @grammar UE.dom.domUtils.clearEmptySibling(node,ignoreNext,ignorePre) //ignorePre指定是否忽略左边空节点
* @example
* ```html
*
*
*
*
*
* xxx
*
*
*
* ```
*/
/**
* 清除node节点左右连续为空的兄弟inline节点， 如果ignoreNext的值为true，
* 则忽略对右边兄弟节点的操作。
* @method clearEmptySibling
* @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
* @param { Boolean } ignoreNext 是否忽略忽略对右边的兄弟节点的操作
* 则这些兄弟节点将被删除
* @see UE.dom.domUtils.clearEmptySibling(Node)
*/
/**
* 清除node节点左右连续为空的兄弟inline节点， 如果ignoreNext的值为true，
* 则忽略对右边兄弟节点的操作， 如果ignorePre的值为true，则忽略对左边兄弟节点的操作。
* @method clearEmptySibling
* @param { Node } node 执行的节点对象， 如果该节点的左右连续的兄弟节点是空的inline节点，
* @param { Boolean } ignoreNext 是否忽略忽略对右边的兄弟节点的操作
* @param { Boolean } ignorePre 是否忽略忽略对左边的兄弟节点的操作
* 则这些兄弟节点将被删除
* @see UE.dom.domUtils.clearEmptySibling(Node)
*/
clearEmptySibling:function (node, ignoreNext, ignorePre) {
function clear(next, dir) {
var tmpNode;
while (next && !domUtils.isBookmarkNode(next) && (domUtils.isEmptyInlineElement(next)
//这里不能把空格算进来会吧空格干掉，出现文字间的空格丢掉了
|| !new RegExp('[^\t\n\r' + domUtils.fillChar + ']').test(next.nodeValue) )) {
tmpNode = next[dir];
domUtils.remove(next);
next = tmpNode;
}
}
!ignoreNext && clear(node.nextSibling, 'nextSibling');
!ignorePre && clear(node.previousSibling, 'previousSibling');
},
/**
* 将一个文本节点textNode拆分成两个文本节点，offset指定拆分位置
* @method split
* @param { Node } textNode 需要拆分的文本节点对象
* @param { int } offset 需要拆分的位置， 位置计算从0开始
* @return { Node } 拆分后形成的新节点
* @example
* ```html
* abcdef
*
* ```
*/
split:function (node, offset) {
var doc = node.ownerDocument;
if (browser.ie && offset == node.nodeValue.length) {
var next = doc.createTextNode('');
return domUtils.insertAfter(node, next);
}
var retval = node.splitText(offset);
//ie8下splitText不会跟新childNodes,我们手动触发他的更新
if (browser.ie8) {
var tmpNode = doc.createTextNode('');
domUtils.insertAfter(retval, tmpNode);
domUtils.remove(tmpNode);
}
return retval;
},
/**
* 检测文本节点textNode是否为空节点（包括空格、换行、占位符等字符）
* @method isWhitespace
* @param { Node } node 需要检测的节点对象
* @return { Boolean } 检测的节点是否为空
* @example
* ```html
*
*
*
*
* ```
*/
isWhitespace:function (node) {
return !new RegExp('[^ \t\n\r' + domUtils.fillChar + ']').test(node.nodeValue);
},
/**
* 获取元素element相对于viewport的位置坐标
* @method getXY
* @param { Node } element 需要计算位置的节点对象
* @return { Object } 返回形如{x:left,y:top}的一个key-value映射对象， 其中键x代表水平偏移距离，
* y代表垂直偏移距离。
*
* @example
* ```javascript
* var location = UE.dom.domUtils.getXY( document.getElementById("test") );
* //output: test的坐标为: 12, 24
* console.log( 'test的坐标为： ', location.x, ',', location.y );
* ```
*/
getXY:function (element) {
var x = 0, y = 0;
while (element.offsetParent) {
y += element.offsetTop;
x += element.offsetLeft;
element = element.offsetParent;
}
return { 'x':x, 'y':y};
},
/**
* 为元素element绑定原生DOM事件，type为事件类型，handler为处理函数
* @method on
* @param { Node } element 需要绑定事件的节点对象
* @param { String } type 绑定的事件类型
* @param { Function } handler 事件处理器
* @example
* ```javascript
* UE.dom.domUtils.on(document.body,"click",function(e){
* //e为事件对象，this为被点击元素对戏那个
* });
* ```
*/
/**
* 为元素element绑定原生DOM事件，type为事件类型，handler为处理函数
* @method on
* @param { Node } element 需要绑定事件的节点对象
* @param { Array } type 绑定的事件类型数组
* @param { Function } handler 事件处理器
* @example
* ```javascript
* UE.dom.domUtils.on(document.body,["click","mousedown"],function(evt){
* //evt为事件对象，this为被点击元素对象
* });
* ```
*/
on:function (element, type, handler) {
var types = utils.isArray(type) ? type : utils.trim(type).split(/\s+/),
k = types.length;
if (k) while (k--) {
type = types[k];
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
if (!handler._d) {
handler._d = {
els : []
};
}
var key = type + handler.toString(),index = utils.indexOf(handler._d.els,element);
if (!handler._d[key] || index == -1) {
if(index == -1){
handler._d.els.push(element);
}
if(!handler._d[key]){
handler._d[key] = function (evt) {
return handler.call(evt.srcElement, evt || window.event);
};
}
element.attachEvent('on' + type, handler._d[key]);
}
}
}
element = null;
},
/**
* 解除DOM事件绑定
* @method un
* @param { Node } element 需要解除事件绑定的节点对象
* @param { String } type 需要接触绑定的事件类型
* @param { Function } handler 对应的事件处理器
* @example
* ```javascript
* UE.dom.domUtils.un(document.body,"click",function(evt){
* //evt为事件对象，this为被点击元素对象
* });
* ```
*/
/**
* 解除DOM事件绑定
* @method un
* @param { Node } element 需要解除事件绑定的节点对象
* @param { Array } type 需要接触绑定的事件类型数组
* @param { Function } handler 对应的事件处理器
* @example
* ```javascript
* UE.dom.domUtils.un(document.body, ["click","mousedown"],function(evt){
* //evt为事件对象，this为被点击元素对象
* });
* ```
*/
un:function (element, type, handler) {
var types = utils.isArray(type) ? type : utils.trim(type).split(/\s+/),
k = types.length;
if (k) while (k--) {
type = types[k];
if (element.removeEventListener) {
element.removeEventListener(type, handler, false);
} else {
var key = type + handler.toString();
try{
element.detachEvent('on' + type, handler._d ? handler._d[key] : handler);
}catch(e){}
if (handler._d && handler._d[key]) {
var index = utils.indexOf(handler._d.els,element);
if(index!=-1){
handler._d.els.splice(index,1);
}
handler._d.els.length == 0 && delete handler._d[key];
}
}
}
},
/**
* 比较节点nodeA与节点nodeB是否具有相同的标签名、属性名以及属性值
* @method isSameElement
* @param { Node } nodeA 需要比较的节点
* @param { Node } nodeB 需要比较的节点
* @return { Boolean } 两个节点是否具有相同的标签名、属性名以及属性值
* @example
* ```html
* ssss
* bbbbb
* ssss
* bbbbb
*
*
* ```
*/
isSameElement:function (nodeA, nodeB) {
if (nodeA.tagName != nodeB.tagName) {
return false;
}
var thisAttrs = nodeA.attributes,
otherAttrs = nodeB.attributes;
if (!ie && thisAttrs.length != otherAttrs.length) {
return false;
}
var attrA, attrB, al = 0, bl = 0;
for (var i = 0; attrA = thisAttrs[i++];) {
if (attrA.nodeName == 'style') {
if (attrA.specified) {
al++;
}
if (domUtils.isSameStyle(nodeA, nodeB)) {
continue;
} else {
return false;
}
}
if (ie) {
if (attrA.specified) {
al++;
attrB = otherAttrs.getNamedItem(attrA.nodeName);
} else {
continue;
}
} else {
attrB = nodeB.attributes[attrA.nodeName];
}
if (!attrB.specified || attrA.nodeValue != attrB.nodeValue) {
return false;
}
}
// 有可能attrB的属性包含了attrA的属性之外还有自己的属性
if (ie) {
for (i = 0; attrB = otherAttrs[i++];) {
if (attrB.specified) {
bl++;
}
}
if (al != bl) {
return false;
}
}
return true;
},
/**
* 判断节点nodeA与节点nodeB的元素的style属性是否一致
* @method isSameStyle
* @param { Node } nodeA 需要比较的节点
* @param { Node } nodeB 需要比较的节点
* @return { Boolean } 两个节点是否具有相同的style属性值
* @example
* ```html
* ssss
* bbbbb
* ssss
* bbbbb
*
*
* ```
*/
isSameStyle:function (nodeA, nodeB) {
var styleA = nodeA.style.cssText.replace(/( ?; ?)/g, ';').replace(/( ?: ?)/g, ':'),
styleB = nodeB.style.cssText.replace(/( ?; ?)/g, ';').replace(/( ?: ?)/g, ':');
if (browser.opera) {
styleA = nodeA.style;
styleB = nodeB.style;
if (styleA.length != styleB.length)
return false;
for (var p in styleA) {
if (/^(\d+|csstext)$/i.test(p)) {
continue;
}
if (styleA[p] != styleB[p]) {
return false;
}
}
return true;
}
if (!styleA || !styleB) {
return styleA == styleB;
}
styleA = styleA.split(';');
styleB = styleB.split(';');
if (styleA.length != styleB.length) {
return false;
}
for (var i = 0, ci; ci = styleA[i++];) {
if (utils.indexOf(styleB, ci) == -1) {
return false;
}
}
return true;
},
/**
* 检查节点node是否为block元素
* @method isBlockElm
* @param { Node } node 需要检测的节点对象
* @return { Boolean } 是否是block元素节点
* @warning 该方法的判断规则如下： 如果该元素原本是block元素， 则不论该元素当前的css样式是什么都会返回true；
* 否则，检测该元素的css样式， 如果该元素当前是block元素， 则返回true。 其余情况下都返回false。
* @example
* ```html
*
*
*
*
*
* ```
*/
isBlockElm:function (node) {
return node.nodeType == 1 && (dtd.$block[node.tagName] || styleBlock[domUtils.getComputedStyle(node, 'display')]) && !dtd.$nonChild[node.tagName];
},
/**
* 检测node节点是否为body节点
* @method isBody
* @param { Element } node 需要检测的dom元素
* @return { Boolean } 给定的元素是否是body元素
* @example
* ```javascript
* //output: true
* console.log( UE.dom.domUtils.isBody( document.body ) );
* ```
*/
isBody:function (node) {
return node && node.nodeType == 1 && node.tagName.toLowerCase() == 'body';
},
/**
* 以node节点为分界，将该节点的指定祖先节点parent拆分成两个独立的节点，
* 拆分形成的两个节点之间是node节点
* @method breakParent
* @param { Node } node 作为分界的节点对象
* @param { Node } parent 该节点必须是node节点的祖先节点， 且是block节点。
* @return { Node } 给定的node分界节点
* @example
* ```javascript
*
* var node = document.createElement("span"),
* wrapNode = document.createElement( "div" ),
* parent = document.createElement("p");
*
* parent.appendChild( node );
* wrapNode.appendChild( parent );
*
* //拆分前
* //output: * console.log( wrapNode.innerHTML ); * * * UE.dom.domUtils.breakParent( node, parent ); * //拆分后 * //output: * console.log( wrapNode.innerHTML ); * * ``` */ breakParent:function (node, parent) { var tmpNode, parentClone = node, clone = node, leftNodes, rightNodes; do { parentClone = parentClone.parentNode; if (leftNodes) { tmpNode = parentClone.cloneNode(false); tmpNode.appendChild(leftNodes); leftNodes = tmpNode; tmpNode = parentClone.cloneNode(false); tmpNode.appendChild(rightNodes); rightNodes = tmpNode; } else { leftNodes = parentClone.cloneNode(false); rightNodes = leftNodes.cloneNode(false); } while (tmpNode = clone.previousSibling) { leftNodes.insertBefore(tmpNode, leftNodes.firstChild); } while (tmpNode = clone.nextSibling) { rightNodes.appendChild(tmpNode); } clone = parentClone; } while (parent !== parentClone); tmpNode = parent.parentNode; tmpNode.insertBefore(leftNodes, parent); tmpNode.insertBefore(rightNodes, parent); tmpNode.insertBefore(node, rightNodes); domUtils.remove(parent); return node; }, /** * 检查节点node是否是空inline节点 * @method isEmptyInlineElement * @param { Node } node 需要检测的节点对象 * @return { Number } 如果给定的节点是空的inline节点， 则返回1, 否则返回0。 * @example * ```html * => 1 * => 1 * => 1 * xx => 0 * ``` */ isEmptyInlineElement:function (node) { if (node.nodeType != 1 || !dtd.$removeEmpty[ node.tagName ]) { return 0; } node = node.firstChild; while (node) { //如果是创建的bookmark就跳过 if (domUtils.isBookmarkNode(node)) { return 0; } if (node.nodeType == 1 && !domUtils.isEmptyInlineElement(node) || node.nodeType == 3 && !domUtils.isWhitespace(node) ) { return 0; } node = node.nextSibling; } return 1; }, /** * 删除node节点下首尾两端的空白文本子节点 * @method trimWhiteTextNode * @param { Element } node 需要执行删除操作的元素对象 * @example * ```javascript * var node = document.createElement("div"); * * node.appendChild( document.createTextNode( "" ) ); * * node.appendChild( document.createElement("div") ); * * node.appendChild( document.createTextNode( "" ) ); * * //3 * console.log( node.childNodes.length ); * * UE.dom.domUtils.trimWhiteTextNode( node ); * * //1 * console.log( node.childNodes.length ); * ``` */ trimWhiteTextNode:function (node) { function remove(dir) { var child; while ((child = node[dir]) && child.nodeType == 3 && domUtils.isWhitespace(child)) { node.removeChild(child); } } remove('firstChild'); remove('lastChild'); }, /** * 合并node节点下相同的子节点 * @name mergeChild * @desc * UE.dom.domUtils.mergeChild(node,tagName) //tagName要合并的子节点的标签 * @example *
xxaaxx
* ==> UE.dom.domUtils.mergeChild(node,'span') *xxaaxx
*/ mergeChild:function (node, tagName, attrs) { var list = domUtils.getElementsByTagName(node, node.tagName.toLowerCase()); for (var i = 0, ci; ci = list[i++];) { if (!ci.parentNode || domUtils.isBookmarkNode(ci)) { continue; } //span单独处理 if (ci.tagName.toLowerCase() == 'span') { if (node === ci.parentNode) { domUtils.trimWhiteTextNode(node); if (node.childNodes.length == 1) { node.style.cssText = ci.style.cssText + ";" + node.style.cssText; domUtils.remove(ci, true); continue; } } ci.style.cssText = node.style.cssText + ';' + ci.style.cssText; if (attrs) { var style = attrs.style; if (style) { style = style.split(';'); for (var j = 0, s; s = style[j++];) { ci.style[utils.cssStyleToDomStyle(s.split(':')[0])] = s.split(':')[1]; } } } if (domUtils.isSameStyle(ci, node)) { domUtils.remove(ci, true); } continue; } if (domUtils.isSameElement(node, ci)) { domUtils.remove(ci, true); } } }, /** * 原生方法getElementsByTagName的封装 * @method getElementsByTagName * @param { Node } node 目标节点对象 * @param { String } tagName 需要查找的节点的tagName， 多个tagName以空格分割 * @return { Array } 符合条件的节点集合 */ getElementsByTagName:function (node, name,filter) { if(filter && utils.isString(filter)){ var className = filter; filter = function(node){return domUtils.hasClass(node,className)} } name = utils.trim(name).replace(/[ ]{2,}/g,' ').split(' '); var arr = []; for(var n = 0,ni;ni=name[n++];){ var list = node.getElementsByTagName(ni); for (var i = 0, ci; ci = list[i++];) { if(!filter || filter(ci)) arr.push(ci); } } return arr; }, /** * 将节点node提取到父节点上 * @method mergeToParent * @param { Element } node 需要提取的元素对象 * @example * ```html *
*
*
*
* ```
*/
mergeToParent:function (node) {
var parent = node.parentNode;
while (parent && dtd.$removeEmpty[parent.tagName]) {
if (parent.tagName == node.tagName || parent.tagName == 'A') {//针对a标签单独处理
domUtils.trimWhiteTextNode(parent);
//span需要特殊处理 不处理这样的情况 xxxxxxxxx
if (parent.tagName == 'SPAN' && !domUtils.isSameStyle(parent, node)
|| (parent.tagName == 'A' && node.tagName == 'SPAN')) {
if (parent.childNodes.length > 1 || parent !== node.parentNode) {
node.style.cssText = parent.style.cssText + ";" + node.style.cssText;
parent = parent.parentNode;
continue;
} else {
parent.style.cssText += ";" + node.style.cssText;
//trace:952 a标签要保持下划线
if (parent.tagName == 'A') {
parent.style.textDecoration = 'underline';
}
}
}
if (parent.tagName != 'A') {
parent === node.parentNode && domUtils.remove(node, true);
break;
}
}
parent = parent.parentNode;
}
},
/**
* 合并节点node的左右兄弟节点
* @method mergeSibling
* @param { Element } node 需要合并的目标节点
* @example
* ```html
* xxxxoooxxxx
*
*
* ```
*/
/**
* 合并节点node的左右兄弟节点， 可以根据给定的条件选择是否忽略合并左节点。
* @method mergeSibling
* @param { Element } node 需要合并的目标节点
* @param { Boolean } ignorePre 是否忽略合并左节点
* @example
* ```html
* xxxxoooxxxx
*
*
* ```
*/
/**
* 合并节点node的左右兄弟节点，可以根据给定的条件选择是否忽略合并左右节点。
* @method mergeSibling
* @param { Element } node 需要合并的目标节点
* @param { Boolean } ignorePre 是否忽略合并左节点
* @param { Boolean } ignoreNext 是否忽略合并右节点
* @remind 如果同时忽略左右节点， 则该操作什么也不会做
* @example
* ```html
* xxxxoooxxxx
*
*
* ```
*/
mergeSibling:function (node, ignorePre, ignoreNext) {
function merge(rtl, start, node) {
var next;
if ((next = node[rtl]) && !domUtils.isBookmarkNode(next) && next.nodeType == 1 && domUtils.isSameElement(node, next)) {
while (next.firstChild) {
if (start == 'firstChild') {
node.insertBefore(next.lastChild, node.firstChild);
} else {
node.appendChild(next.firstChild);
}
}
domUtils.remove(next);
}
}
!ignorePre && merge('previousSibling', 'firstChild', node);
!ignoreNext && merge('nextSibling', 'lastChild', node);
},
/**
* 设置节点node及其子节点不会被选中
* @method unSelectable
* @param { Element } node 需要执行操作的dom元素
* @remind 执行该操作后的节点， 将不能被鼠标选中
* @example
* ```javascript
* UE.dom.domUtils.unSelectable( document.body );
* ```
*/
unSelectable:ie && browser.ie9below || browser.opera ? function (node) {
//for ie9
node.onselectstart = function () {
return false;
};
node.onclick = node.onkeyup = node.onkeydown = function () {
return false;
};
node.unselectable = 'on';
node.setAttribute("unselectable", "on");
for (var i = 0, ci; ci = node.all[i++];) {
switch (ci.tagName.toLowerCase()) {
case 'iframe' :
case 'textarea' :
case 'input' :
case 'select' :
break;
default :
ci.unselectable = 'on';
node.setAttribute("unselectable", "on");
}
}
} : function (node) {
node.style.MozUserSelect =
node.style.webkitUserSelect =
node.style.msUserSelect =
node.style.KhtmlUserSelect = 'none';
},
/**
* 删除节点node上的指定属性名称的属性
* @method removeAttributes
* @param { Node } node 需要删除属性的节点对象
* @param { String } attrNames 可以是空格隔开的多个属性名称，该操作将会依次删除相应的属性
* @example
* ```html
*
*
*
*
* xxxxx
*
*
*
* ```
*/
/**
* 删除节点node上的指定属性名称的属性
* @method removeAttributes
* @param { Node } node 需要删除属性的节点对象
* @param { Array } attrNames 需要删除的属性名数组
* @example
* ```html
*
* xxxxx
*
*
*
* ```
*/
removeAttributes:function (node, attrNames) {
attrNames = utils.isArray(attrNames) ? attrNames : utils.trim(attrNames).replace(/[ ]{2,}/g,' ').split(' ');
for (var i = 0, ci; ci = attrNames[i++];) {
ci = attrFix[ci] || ci;
switch (ci) {
case 'className':
node[ci] = '';
break;
case 'style':
node.style.cssText = '';
var val = node.getAttributeNode('style');
!browser.ie && val && node.removeAttributeNode(val);
}
node.removeAttribute(ci);
}
},
/**
* 在doc下创建一个标签名为tag，属性为attrs的元素
* @method createElement
* @param { DomDocument } doc 新创建的元素属于该document节点创建
* @param { String } tagName 需要创建的元素的标签名
* @param { Object } attrs 新创建的元素的属性key-value集合
* @return { Element } 新创建的元素对象
* @example
* ```javascript
* var ele = UE.dom.domUtils.createElement( document, 'div', {
* id: 'test'
* } );
*
* //output: DIV
* console.log( ele.tagName );
*
* //output: test
* console.log( ele.id );
*
* ```
*/
createElement:function (doc, tag, attrs) {
return domUtils.setAttributes(doc.createElement(tag), attrs)
},
/**
* 为节点node添加属性attrs，attrs为属性键值对
* @method setAttributes
* @param { Element } node 需要设置属性的元素对象
* @param { Object } attrs 需要设置的属性名-值对
* @return { Element } 设置属性的元素对象
* @example
* ```html
*
*
*
*
*/
setAttributes:function (node, attrs) {
for (var attr in attrs) {
if(attrs.hasOwnProperty(attr)){
var value = attrs[attr];
switch (attr) {
case 'class':
//ie下要这样赋值，setAttribute不起作用
node.className = value;
break;
case 'style' :
node.style.cssText = node.style.cssText + ";" + value;
break;
case 'innerHTML':
node[attr] = value;
break;
case 'value':
node.value = value;
break;
default:
node.setAttribute(attrFix[attr] || attr, value);
}
}
}
return node;
},
/**
* 获取元素element经过计算后的样式值
* @method getComputedStyle
* @param { Element } element 需要获取样式的元素对象
* @param { String } styleName 需要获取的样式名
* @return { String } 获取到的样式值
* @example
* ```html
*
*
*
*
*
* ```
*/
getComputedStyle:function (element, styleName) {
//一下的属性单独处理
var pros = 'width height top left';
if(pros.indexOf(styleName) > -1){
return element['offset' + styleName.replace(/^\w/,function(s){return s.toUpperCase()})] + 'px';
}
//忽略文本节点
if (element.nodeType == 3) {
element = element.parentNode;
}
//ie下font-size若body下定义了font-size，则从currentStyle里会取到这个font-size. 取不到实际值，故此修改.
if (browser.ie && browser.version < 9 && styleName == 'font-size' && !element.style.fontSize &&
!dtd.$empty[element.tagName] && !dtd.$nonChild[element.tagName]) {
var span = element.ownerDocument.createElement('span');
span.style.cssText = 'padding:0;border:0;font-family:simsun;';
span.innerHTML = '.';
element.appendChild(span);
var result = span.offsetHeight;
element.removeChild(span);
span = null;
return result + 'px';
}
try {
var value = domUtils.getStyle(element, styleName) ||
(window.getComputedStyle ? domUtils.getWindow(element).getComputedStyle(element, '').getPropertyValue(styleName) :
( element.currentStyle || element.style )[utils.cssStyleToDomStyle(styleName)]);
} catch (e) {
return "";
}
return utils.transUnitToPx(utils.fixColor(styleName, value));
},
/**
* 删除元素element指定的className
* @method removeClasses
* @param { Element } ele 需要删除class的元素节点
* @param { String } classNames 需要删除的className， 多个className之间以空格分开
* @example
* ```html
* xxx
*
*
* ```
*/
/**
* 删除元素element指定的className
* @method removeClasses
* @param { Element } ele 需要删除class的元素节点
* @param { Array } classNames 需要删除的className数组
* @example
* ```html
* xxx
*
*
* ```
*/
removeClasses:function (elm, classNames) {
classNames = utils.isArray(classNames) ? classNames :
utils.trim(classNames).replace(/[ ]{2,}/g,' ').split(' ');
for(var i = 0,ci,cls = elm.className;ci=classNames[i++];){
cls = cls.replace(new RegExp('\\b' + ci + '\\b'),'')
}
cls = utils.trim(cls).replace(/[ ]{2,}/g,' ');
if(cls){
elm.className = cls;
}else{
domUtils.removeAttributes(elm,['class']);
}
},
/**
* 给元素element添加className
* @method addClass
* @param { Node } ele 需要增加className的元素
* @param { String } classNames 需要添加的className， 多个className之间以空格分割
* @remind 相同的类名不会被重复添加
* @example
* ```html
*
*
*
* ```
*/
/**
* 判断元素element是否包含给定的样式类名className
* @method hasClass
* @param { Node } ele 需要检测的元素
* @param { Array } classNames 需要检测的className数组
* @return { Boolean } 元素是否包含所有给定的className
* @example
* ```html
*
*
*
* ```
*/
hasClass:function (element, className) {
if(utils.isRegExp(className)){
return className.test(element.className)
}
className = utils.trim(className).replace(/[ ]{2,}/g,' ').split(' ');
for(var i = 0,ci,cls = element.className;ci=className[i++];){
if(!new RegExp('\\b' + ci + '\\b','i').test(cls)){
return false;
}
}
return i - 1 == className.length;
},
/**
* 阻止事件默认行为
* @method preventDefault
* @param { Event } evt 需要阻止默认行为的事件对象
* @example
* ```javascript
* UE.dom.domUtils.preventDefault( evt );
* ```
*/
preventDefault:function (evt) {
evt.preventDefault ? evt.preventDefault() : (evt.returnValue = false);
},
/**
* 删除元素element指定的样式
* @method removeStyle
* @param { Element } element 需要删除样式的元素
* @param { String } styleName 需要删除的样式名
* @example
* ```html
*
*
*
* ```
*/
removeStyle:function (element, name) {
if(browser.ie ){
//针对color先单独处理一下
if(name == 'color'){
name = '(^|;)' + name;
}
element.style.cssText = element.style.cssText.replace(new RegExp(name + '[^:]*:[^;]+;?','ig'),'')
}else{
if (element.style.removeProperty) {
element.style.removeProperty (name);
}else {
element.style.removeAttribute (utils.cssStyleToDomStyle(name));
}
}
if (!element.style.cssText) {
domUtils.removeAttributes(element, ['style']);
}
},
/**
* 获取元素element的style属性的指定值
* @method getStyle
* @param { Element } element 需要获取属性值的元素
* @param { String } styleName 需要获取的style的名称
* @warning 该方法仅获取元素style属性中所标明的值
* @return { String } 该元素包含指定的style属性值
* @example
* ```html
*
*
*
* ```
*/
getStyle:function (element, name) {
var value = element.style[ utils.cssStyleToDomStyle(name) ];
return utils.fixColor(name, value);
},
/**
* 为元素element设置样式属性值
* @method setStyle
* @param { Element } element 需要设置样式的元素
* @param { String } styleName 样式名
* @param { String } styleValue 样式值
* @example
* ```html
*
*
*
* ```
*/
setStyle:function (element, name, value) {
element.style[utils.cssStyleToDomStyle(name)] = value;
if(!utils.trim(element.style.cssText)){
this.removeAttributes(element,'style')
}
},
/**
* 为元素element设置多个样式属性值
* @method setStyles
* @param { Element } element 需要设置样式的元素
* @param { Object } styles 样式名值对
* @example
* ```html
*
*
*
* ```
*/
setStyles:function (element, styles) {
for (var name in styles) {
if (styles.hasOwnProperty(name)) {
domUtils.setStyle(element, name, styles[name]);
}
}
},
/**
* 删除_moz_dirty属性
* @private
* @method removeDirtyAttr
*/
removeDirtyAttr:function (node) {
for (var i = 0, ci, nodes = node.getElementsByTagName('*'); ci = nodes[i++];) {
ci.removeAttribute('_moz_dirty');
}
node.removeAttribute('_moz_dirty');
},
/**
* 获取子节点的数量
* @method getChildCount
* @param { Element } node 需要检测的元素
* @return { Number } 给定的node元素的子节点数量
* @example
* ```html
*
*
*
*
*
* ```
*/
/**
* 根据给定的过滤规则， 获取符合条件的子节点的数量
* @method getChildCount
* @param { Element } node 需要检测的元素
* @param { Function } fn 过滤器， 要求对符合条件的子节点返回true， 反之则要求返回false
* @return { Number } 符合过滤条件的node元素的子节点数量
* @example
* ```html
*
*
*
*
*
* ```
*/
getChildCount:function (node, fn) {
var count = 0, first = node.firstChild;
fn = fn || function () {
return 1;
};
while (first) {
if (fn(first)) {
count++;
}
first = first.nextSibling;
}
return count;
},
/**
* 判断给定节点是否为空节点
* @method isEmptyNode
* @param { Node } node 需要检测的节点对象
* @return { Boolean } 节点是否为空
* @example
* ```javascript
* UE.dom.domUtils.isEmptyNode( document.body );
* ```
*/
isEmptyNode:function (node) {
return !node.firstChild || domUtils.getChildCount(node, function (node) {
return !domUtils.isBr(node) && !domUtils.isBookmarkNode(node) && !domUtils.isWhitespace(node)
}) == 0
},
clearSelectedArr:function (nodes) {
var node;
while (node = nodes.pop()) {
domUtils.removeAttributes(node, ['class']);
}
},
/**
* 将显示区域滚动到指定节点的位置
* @method scrollToView
* @param {Node} node 节点
* @param {window} win window对象
* @param {Number} offsetTop 距离上方的偏移量
*/
scrollToView:function (node, win, offsetTop) {
var getViewPaneSize = function () {
var doc = win.document,
mode = doc.compatMode == 'CSS1Compat';
return {
width:( mode ? doc.documentElement.clientWidth : doc.body.clientWidth ) || 0,
height:( mode ? doc.documentElement.clientHeight : doc.body.clientHeight ) || 0
};
},
getScrollPosition = function (win) {
if ('pageXOffset' in win) {
return {
x:win.pageXOffset || 0,
y:win.pageYOffset || 0
};
}
else {
var doc = win.document;
return {
x:doc.documentElement.scrollLeft || doc.body.scrollLeft || 0,
y:doc.documentElement.scrollTop || doc.body.scrollTop || 0
};
}
};
var winHeight = getViewPaneSize().height, offset = winHeight * -1 + offsetTop;
offset += (node.offsetHeight || 0);
var elementPosition = domUtils.getXY(node);
offset += elementPosition.y;
var currentScroll = getScrollPosition(win).y;
// offset += 50;
if (offset > currentScroll || offset < currentScroll - winHeight) {
win.scrollTo(0, offset + (offset < 0 ? -20 : 20));
}
},
/**
* 判断给定节点是否为br
* @method isBr
* @param { Node } node 需要判断的节点对象
* @return { Boolean } 给定的节点是否是br节点
*/
isBr:function (node) {
return node.nodeType == 1 && node.tagName == 'BR';
},
/**
* 判断给定的节点是否是一个“填充”节点
* @private
* @method isFillChar
* @param { Node } node 需要判断的节点
* @param { Boolean } isInStart 是否从节点内容的开始位置匹配
* @returns { Boolean } 节点是否是填充节点
*/
isFillChar:function (node,isInStart) {
if(node.nodeType != 3)
return false;
var text = node.nodeValue;
if(isInStart){
return new RegExp('^' + domUtils.fillChar).test(text)
}
return !text.replace(new RegExp(domUtils.fillChar,'g'), '').length
},
isStartInblock:function (range) {
var tmpRange = range.cloneRange(),
flag = 0,
start = tmpRange.startContainer,
tmp;
if(start.nodeType == 1 && start.childNodes[tmpRange.startOffset]){
start = start.childNodes[tmpRange.startOffset];
var pre = start.previousSibling;
while(pre && domUtils.isFillChar(pre)){
start = pre;
pre = pre.previousSibling;
}
}
if(this.isFillChar(start,true) && tmpRange.startOffset == 1){
tmpRange.setStartBefore(start);
start = tmpRange.startContainer;
}
while (start && domUtils.isFillChar(start)) {
tmp = start;
start = start.previousSibling
}
if (tmp) {
tmpRange.setStartBefore(tmp);
start = tmpRange.startContainer;
}
if (start.nodeType == 1 && domUtils.isEmptyNode(start) && tmpRange.startOffset == 1) {
tmpRange.setStart(start, 0).collapse(true);
}
while (!tmpRange.startOffset) {
start = tmpRange.startContainer;
if (domUtils.isBlockElm(start) || domUtils.isBody(start)) {
flag = 1;
break;
}
var pre = tmpRange.startContainer.previousSibling,
tmpNode;
if (!pre) {
tmpRange.setStartBefore(tmpRange.startContainer);
} else {
while (pre && domUtils.isFillChar(pre)) {
tmpNode = pre;
pre = pre.previousSibling;
}
if (tmpNode) {
tmpRange.setStartBefore(tmpNode);
} else {
tmpRange.setStartBefore(tmpRange.startContainer);
}
}
}
return flag && !domUtils.isBody(tmpRange.startContainer) ? 1 : 0;
},
/**
* 判断给定的元素是否是一个空元素
* @method isEmptyBlock
* @param { Element } node 需要判断的元素
* @return { Boolean } 是否是空元素
* @example
* ```html
*
*
*
* ```
*/
/**
* 根据指定的判断规则判断给定的元素是否是一个空元素
* @method isEmptyBlock
* @param { Element } node 需要判断的元素
* @param { RegExp } reg 对内容执行判断的正则表达式对象
* @return { Boolean } 是否是空元素
*/
isEmptyBlock:function (node,reg) {
// HaoChuan9421
if(!node){
return;
}
if(node.nodeType != 1)
return 0;
reg = reg || new RegExp('[ \xa0\t\r\n' + domUtils.fillChar + ']', 'g');
if (node[browser.ie ? 'innerText' : 'textContent'].replace(reg, '').length > 0) {
return 0;
}
for (var n in dtd.$isNotEmpty) {
if (node.getElementsByTagName(n).length) {
return 0;
}
}
return 1;
},
/**
* 移动元素使得该元素的位置移动指定的偏移量的距离
* @method setViewportOffset
* @param { Element } element 需要设置偏移量的元素
* @param { Object } offset 偏移量， 形如{ left: 100, top: 50 }的一个键值对， 表示该元素将在
* 现有的位置上向水平方向偏移offset.left的距离， 在竖直方向上偏移
* offset.top的距离
* @example
* ```html
*
*
*
* ```
*/
setViewportOffset:function (element, offset) {
var left = parseInt(element.style.left) | 0;
var top = parseInt(element.style.top) | 0;
var rect = element.getBoundingClientRect();
var offsetLeft = offset.left - rect.left;
var offsetTop = offset.top - rect.top;
if (offsetLeft) {
element.style.left = left + offsetLeft + 'px';
}
if (offsetTop) {
element.style.top = top + offsetTop + 'px';
}
},
/**
* 用“填充字符”填充节点
* @method fillNode
* @private
* @param { DomDocument } doc 填充的节点所在的docment对象
* @param { Node } node 需要填充的节点对象
* @example
* ```html
*
*
*
* ```
*/
fillNode:function (doc, node) {
var tmpNode = browser.ie ? doc.createTextNode(domUtils.fillChar) : doc.createElement('br');
node.innerHTML = '';
node.appendChild(tmpNode);
},
/**
* 把节点src的所有子节点追加到另一个节点tag上去
* @method moveChild
* @param { Node } src 源节点， 该节点下的所有子节点将被移除
* @param { Node } tag 目标节点， 从源节点移除的子节点将被追加到该节点下
* @example
* ```html
*
*
*
*
*
*
*
*
* ```
*/
/**
* 把节点src的所有子节点移动到另一个节点tag上去, 可以通过dir参数控制附加的行为是“追加”还是“插入顶部”
* @method moveChild
* @param { Node } src 源节点， 该节点下的所有子节点将被移除
* @param { Node } tag 目标节点， 从源节点移除的子节点将被附加到该节点下
* @param { Boolean } dir 附加方式， 如果为true， 则附加进去的节点将被放到目标节点的顶部， 反之，则放到末尾
* @example
* ```html
*
*
*
*
*
*
*
*
* ```
*/
moveChild:function (src, tag, dir) {
while (src.firstChild) {
if (dir && tag.firstChild) {
tag.insertBefore(src.lastChild, tag.firstChild);
} else {
tag.appendChild(src.firstChild);
}
}
},
/**
* 判断节点的标签上是否不存在任何属性
* @method hasNoAttributes
* @private
* @param { Node } node 需要检测的节点对象
* @return { Boolean } 节点是否不包含任何属性
* @example
* ```html
* xxxx
*
*
* ```
*/
hasNoAttributes:function (node) {
return browser.ie ? /^<\w+\s*?>/.test(node.outerHTML) : node.attributes.length == 0;
},
/**
* 检测节点是否是UEditor所使用的辅助节点
* @method isCustomeNode
* @private
* @param { Node } node 需要检测的节点
* @remind 辅助节点是指编辑器要完成工作临时添加的节点， 在输出的时候将会从编辑器内移除， 不会影响最终的结果。
* @return { Boolean } 给定的节点是否是一个辅助节点
*/
isCustomeNode:function (node) {
return node.nodeType == 1 && node.getAttribute('_ue_custom_node_');
},
/**
* 检测节点的标签是否是给定的标签
* @method isTagNode
* @param { Node } node 需要检测的节点对象
* @param { String } tagName 标签
* @return { Boolean } 节点的标签是否是给定的标签
* @example
* ```html
*
*
*
* ```
*/
isTagNode:function (node, tagNames) {
return node.nodeType == 1 && new RegExp('\\b' + node.tagName + '\\b','i').test(tagNames)
},
/**
* 给定一个节点数组，在通过指定的过滤器过滤后， 获取其中满足过滤条件的第一个节点
* @method filterNodeList
* @param { Array } nodeList 需要过滤的节点数组
* @param { Function } fn 过滤器， 对符合条件的节点， 执行结果返回true， 反之则返回false
* @return { Node | NULL } 如果找到符合过滤条件的节点， 则返回该节点， 否则返回NULL
* @example
* ```javascript
* var divNodes = document.getElementsByTagName("div");
* divNodes = [].slice.call( divNodes, 0 );
*
* //output: null
* console.log( UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
* return node.tagName.toLowerCase() !== 'div';
* } ) );
* ```
*/
/**
* 给定一个节点数组nodeList和一组标签名tagNames， 获取其中能够匹配标签名的节点集合中的第一个节点
* @method filterNodeList
* @param { Array } nodeList 需要过滤的节点数组
* @param { String } tagNames 需要匹配的标签名， 多个标签名之间用空格分割
* @return { Node | NULL } 如果找到标签名匹配的节点， 则返回该节点， 否则返回NULL
* @example
* ```javascript
* var divNodes = document.getElementsByTagName("div");
* divNodes = [].slice.call( divNodes, 0 );
*
* //output: null
* console.log( UE.dom.domUtils.filterNodeList( divNodes, 'a span' ) );
* ```
*/
/**
* 给定一个节点数组，在通过指定的过滤器过滤后， 如果参数forAll为true， 则会返回所有满足过滤
* 条件的节点集合， 否则， 返回满足条件的节点集合中的第一个节点
* @method filterNodeList
* @param { Array } nodeList 需要过滤的节点数组
* @param { Function } fn 过滤器， 对符合条件的节点， 执行结果返回true， 反之则返回false
* @param { Boolean } forAll 是否返回整个节点数组, 如果该参数为false， 则返回节点集合中的第一个节点
* @return { Array | Node | NULL } 如果找到符合过滤条件的节点， 则根据参数forAll的值决定返回满足
* 过滤条件的节点数组或第一个节点， 否则返回NULL
* @example
* ```javascript
* var divNodes = document.getElementsByTagName("div");
* divNodes = [].slice.call( divNodes, 0 );
*
* //output: 3（假定有3个div）
* console.log( divNodes.length );
*
* var nodes = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
* return node.tagName.toLowerCase() === 'div';
* }, true );
*
* //output: 3
* console.log( nodes.length );
*
* var node = UE.dom.domUtils.filterNodeList( divNodes, function ( node ) {
* return node.tagName.toLowerCase() === 'div';
* }, false );
*
* //output: div
* console.log( node.nodeName );
* ```
*/
filterNodeList : function(nodelist,filter,forAll){
var results = [];
if(!utils .isFunction(filter)){
var str = filter;
filter = function(n){
return utils.indexOf(utils.isArray(str) ? str:str.split(' '), n.tagName.toLowerCase()) != -1
};
}
utils.each(nodelist,function(n){
filter(n) && results.push(n)
});
return results.length == 0 ? null : results.length == 1 || !forAll ? results[0] : results
},
/**
* 查询给定的range选区是否在给定的node节点内，且在该节点的最末尾
* @method isInNodeEndBoundary
* @param { UE.dom.Range } rng 需要判断的range对象， 该对象的startContainer不能为NULL
* @param node 需要检测的节点对象
* @return { Number } 如果给定的选取range对象是在node内部的最末端， 则返回1, 否则返回0
*/
isInNodeEndBoundary : function (rng,node){
var start = rng.startContainer;
if(start.nodeType == 3 && rng.startOffset != start.nodeValue.length){
return 0;
}
if(start.nodeType == 1 && rng.startOffset != start.childNodes.length){
return 0;
}
while(start !== node){
if(start.nextSibling){
return 0
};
start = start.parentNode;
}
return 1;
},
isBoundaryNode : function (node,dir){
var tmp;
while(!domUtils.isBody(node)){
tmp = node;
node = node.parentNode;
if(tmp !== node[dir]){
return false;
}
}
return true;
},
fillHtml : browser.ie11below ? ' ' : '' }; var fillCharReg = new RegExp(domUtils.fillChar, 'g'); // core/Range.js /** * Range封装 * @file * @module UE.dom * @class Range * @since 1.2.6.1 */ /** * dom操作封装 * @unfile * @module UE.dom */ /** * Range实现类，本类是UEditor底层核心类，封装不同浏览器之间的Range操作。 * @unfile * @module UE.dom * @class Range */ (function () { var guid = 0, fillChar = domUtils.fillChar, fillData; /** * 更新range的collapse状态 * @param {Range} range range对象 */ function updateCollapse(range) { range.collapsed = range.startContainer && range.endContainer && range.startContainer === range.endContainer && range.startOffset == range.endOffset; } function selectOneNode(rng){ return !rng.collapsed && rng.startContainer.nodeType == 1 && rng.startContainer === rng.endContainer && rng.endOffset - rng.startOffset == 1 } function setEndPoint(toStart, node, offset, range) { //如果node是自闭合标签要处理 if (node.nodeType == 1 && (dtd.$empty[node.tagName] || dtd.$nonChild[node.tagName])) { offset = domUtils.getNodeIndex(node) + (toStart ? 0 : 1); node = node.parentNode; } if (toStart) { range.startContainer = node; range.startOffset = offset; if (!range.endContainer) { range.collapse(true); } } else { range.endContainer = node; range.endOffset = offset; if (!range.startContainer) { range.collapse(false); } } updateCollapse(range); return range; } function execContentsAction(range, action) { //调整边界 //range.includeBookmark(); var start = range.startContainer, end = range.endContainer, startOffset = range.startOffset, endOffset = range.endOffset, doc = range.document, frag = doc.createDocumentFragment(), tmpStart, tmpEnd; if (start.nodeType == 1) { start = start.childNodes[startOffset] || (tmpStart = start.appendChild(doc.createTextNode(''))); } if (end.nodeType == 1) { end = end.childNodes[endOffset] || (tmpEnd = end.appendChild(doc.createTextNode(''))); } if (start === end && start.nodeType == 3) { frag.appendChild(doc.createTextNode(start.substringData(startOffset, endOffset - startOffset))); //is not clone if (action) { start.deleteData(startOffset, endOffset - startOffset); range.collapse(true); } return frag; } var current, currentLevel, clone = frag, startParents = domUtils.findParents(start, true), endParents = domUtils.findParents(end, true); for (var i = 0; startParents[i] == endParents[i];) { i++; } for (var j = i, si; si = startParents[j]; j++) { current = si.nextSibling; if (si == start) { if (!tmpStart) { if (range.startContainer.nodeType == 3) { clone.appendChild(doc.createTextNode(start.nodeValue.slice(startOffset))); //is not clone if (action) { start.deleteData(startOffset, start.nodeValue.length - startOffset); } } else { clone.appendChild(!action ? start.cloneNode(true) : start); } } } else { currentLevel = si.cloneNode(false); clone.appendChild(currentLevel); } while (current) { if (current === end || current === endParents[j]) { break; } si = current.nextSibling; clone.appendChild(!action ? current.cloneNode(true) : current); current = si; } clone = currentLevel; } clone = frag; if (!startParents[i]) { clone.appendChild(startParents[i - 1].cloneNode(false)); clone = clone.firstChild; } for (var j = i, ei; ei = endParents[j]; j++) { current = ei.previousSibling; if (ei == end) { if (!tmpEnd && range.endContainer.nodeType == 3) { clone.appendChild(doc.createTextNode(end.substringData(0, endOffset))); //is not clone if (action) { end.deleteData(0, endOffset); } } } else { currentLevel = ei.cloneNode(false); clone.appendChild(currentLevel); } //如果两端同级，右边第一次已经被开始做了 if (j != i || !startParents[i]) { while (current) { if (current === start) { break; } ei = current.previousSibling; clone.insertBefore(!action ? current.cloneNode(true) : current, clone.firstChild); current = ei; } } clone = currentLevel; } if (action) { range.setStartBefore(!endParents[i] ? endParents[i - 1] : !startParents[i] ? startParents[i - 1] : endParents[i]).collapse(true); } tmpStart && domUtils.remove(tmpStart); tmpEnd && domUtils.remove(tmpEnd); return frag; } /** * 创建一个跟document绑定的空的Range实例 * @constructor * @param { Document } document 新建的选区所属的文档对象 */ /** * @property { Node } startContainer 当前Range的开始边界的容器节点, 可以是一个元素节点或者是文本节点 */ /** * @property { Node } startOffset 当前Range的开始边界容器节点的偏移量, 如果是元素节点， * 该值就是childNodes中的第几个节点， 如果是文本节点就是文本内容的第几个字符 */ /** * @property { Node } endContainer 当前Range的结束边界的容器节点, 可以是一个元素节点或者是文本节点 */ /** * @property { Node } endOffset 当前Range的结束边界容器节点的偏移量, 如果是元素节点， * 该值就是childNodes中的第几个节点， 如果是文本节点就是文本内容的第几个字符 */ /** * @property { Boolean } collapsed 当前Range是否闭合 * @default true * @remind Range是闭合的时候， startContainer === endContainer && startOffset === endOffset */ /** * @property { Document } document 当前Range所属的Document对象 * @remind 不同range的的document属性可以是不同的 */ var Range = dom.Range = function (document) { var me = this; me.startContainer = me.startOffset = me.endContainer = me.endOffset = null; me.document = document; me.collapsed = true; }; /** * 删除fillData * @param doc * @param excludeNode */ function removeFillData(doc, excludeNode) { try { if (fillData && domUtils.inDoc(fillData, doc)) { if (!fillData.nodeValue.replace(fillCharReg, '').length) { var tmpNode = fillData.parentNode; domUtils.remove(fillData); while (tmpNode && domUtils.isEmptyInlineElement(tmpNode) && //safari的contains有bug (browser.safari ? !(domUtils.getPosition(tmpNode,excludeNode) & domUtils.POSITION_CONTAINS) : !tmpNode.contains(excludeNode)) ) { fillData = tmpNode.parentNode; domUtils.remove(tmpNode); tmpNode = fillData; } } else { fillData.nodeValue = fillData.nodeValue.replace(fillCharReg, ''); } } } catch (e) { } } /** * @param node * @param dir */ function mergeSibling(node, dir) { var tmpNode; node = node[dir]; while (node && domUtils.isFillChar(node)) { tmpNode = node[dir]; domUtils.remove(node); node = tmpNode; } } Range.prototype = { /** * 克隆选区的内容到一个DocumentFragment里 * @method cloneContents * @return { DocumentFragment | NULL } 如果选区是闭合的将返回null， 否则， 返回包含所clone内容的DocumentFragment元素 * @example * ```html * * * xx[xxx]x * * * * ``` */ cloneContents:function () { return this.collapsed ? null : execContentsAction(this, 0); }, /** * 删除当前选区范围中的所有内容 * @method deleteContents * @remind 执行完该操作后， 当前Range对象变成了闭合状态 * @return { UE.dom.Range } 当前操作的Range对象 * @example * ```html * * * xx[xxx]x * * * * ``` */ deleteContents:function () { var txt; if (!this.collapsed) { execContentsAction(this, 1); } if (browser.webkit) { txt = this.startContainer; if (txt.nodeType == 3 && !txt.nodeValue.length) { this.setStartBefore(txt).collapse(true); domUtils.remove(txt); } } return this; }, /** * 将当前选区的内容提取到一个DocumentFragment里 * @method extractContents * @remind 执行该操作后， 选区将变成闭合状态 * @warning 执行该操作后， 原来选区所选中的内容将从dom树上剥离出来 * @return { DocumentFragment } 返回包含所提取内容的DocumentFragment对象 * @example * ```html * * * xx[xxx]x * * * */ extractContents:function () { return this.collapsed ? null : execContentsAction(this, 2); }, /** * 设置Range的开始容器节点和偏移量 * @method setStart * @remind 如果给定的节点是元素节点，那么offset指的是其子元素中索引为offset的元素， * 如果是文本节点，那么offset指的是其文本内容的第offset个字符 * @remind 如果提供的容器节点是一个不能包含子元素的节点， 则该选区的开始容器将被设置 * 为该节点的父节点， 此时， 其距离开始容器的偏移量也变成了该节点在其父节点 * 中的索引 * @param { Node } node 将被设为当前选区开始边界容器的节点对象 * @param { int } offset 选区的开始位置偏移量 * @return { UE.dom.Range } 当前range对象 * @example * ```html * * xxxxxxxxxxxxx[xxx] * * * ``` * @example * ```html * * xxx
xxxx[xxxx]x
==> range.applyInlineStyle("strong") ==>xxxx[xxxx]x
* ``` */ /** * 给range选区中的内容添加给定的inline标签， 并且为标签附加上一些初始化属性。 * @method applyInlineStyle * @param { String } tagName 需要添加的标签名 * @param { Object } attrs 跟随新添加的标签的属性 * @return { UE.dom.Range } 当前选区 * @example * ```html *xxxx[xxxx]x
* * ==> * * * range.applyInlineStyle("strong",{"style":"font-size:12px"}) * * ==> * *xxxx[xxxx]x
* ``` */ applyInlineStyle:function (tagName, attrs, list) { if (this.collapsed)return this; this.trimBoundary().enlarge(false, function (node) { return node.nodeType == 1 && domUtils.isBlockElm(node) }).adjustmentBoundary(); var bookmark = this.createBookmark(), end = bookmark.end, filterFn = function (node) { return node.nodeType == 1 ? node.tagName.toLowerCase() != 'br' : !domUtils.isWhitespace(node); }, current = domUtils.getNextDomNode(bookmark.start, false, filterFn), node, pre, range = this.cloneRange(); while (current && (domUtils.getPosition(current, end) & domUtils.POSITION_PRECEDING)) { if (current.nodeType == 3 || dtd[tagName][current.tagName]) { range.setStartBefore(current); node = current; while (node && (node.nodeType == 3 || dtd[tagName][node.tagName]) && node !== end) { pre = node; node = domUtils.getNextDomNode(node, node.nodeType == 1, null, function (parent) { return dtd[tagName][parent.tagName]; }); } var frag = range.setEndAfter(pre).extractContents(), elm; if (list && list.length > 0) { var level, top; top = level = list[0].cloneNode(false); for (var i = 1, ci; ci = list[i++];) { level.appendChild(ci.cloneNode(false)); level = level.firstChild; } elm = level; } else { elm = range.document.createElement(tagName); } if (attrs) { domUtils.setAttributes(elm, attrs); } elm.appendChild(frag); range.insertNode(list ? top : elm); //处理下滑线在a上的情况 var aNode; if (tagName == 'span' && attrs.style && /text\-decoration/.test(attrs.style) && (aNode = domUtils.findParentByTagName(elm, 'a', true))) { domUtils.setAttributes(aNode, attrs); domUtils.remove(elm, true); elm = aNode; } else { domUtils.mergeSibling(elm); domUtils.clearEmptySibling(elm); } //去除子节点相同的 domUtils.mergeChild(elm, attrs); current = domUtils.getNextDomNode(elm, false, filterFn); domUtils.mergeToParent(elm); if (node === end) { break; } } else { current = domUtils.getNextDomNode(current, true, filterFn); } } return this.moveToBookmark(bookmark); }, /** * 移除当前选区内指定的inline标签，但保留其中的内容 * @method removeInlineStyle * @param { String } tagName 需要移除的标签名 * @return { UE.dom.Range } 当前的range对象 * @example * ```html * xx[xxxxyyyzz]z => range.removeInlineStyle(["em"]) => xx[xxxxyyyzz]z * ``` */ /** * 移除当前选区内指定的一组inline标签，但保留其中的内容 * @method removeInlineStyle * @param { Array } tagNameArr 需要移除的标签名的数组 * @return { UE.dom.Range } 当前的range对象 * @see UE.dom.Range:removeInlineStyle(String) */ removeInlineStyle:function (tagNames) { if (this.collapsed)return this; tagNames = utils.isArray(tagNames) ? tagNames : [tagNames]; this.shrinkBoundary().adjustmentBoundary(); var start = this.startContainer, end = this.endContainer; while (1) { if (start.nodeType == 1) { if (utils.indexOf(tagNames, start.tagName.toLowerCase()) > -1) { break; } if (start.tagName.toLowerCase() == 'body') { start = null; break; } } start = start.parentNode; } while (1) { if (end.nodeType == 1) { if (utils.indexOf(tagNames, end.tagName.toLowerCase()) > -1) { break; } if (end.tagName.toLowerCase() == 'body') { end = null; break; } } end = end.parentNode; } var bookmark = this.createBookmark(), frag, tmpRange; if (start) { tmpRange = this.cloneRange().setEndBefore(bookmark.start).setStartBefore(start); frag = tmpRange.extractContents(); tmpRange.insertNode(frag); domUtils.clearEmptySibling(start, true); start.parentNode.insertBefore(bookmark.start, start); } if (end) { tmpRange = this.cloneRange().setStartAfter(bookmark.end).setEndAfter(end); frag = tmpRange.extractContents(); tmpRange.insertNode(frag); domUtils.clearEmptySibling(end, false, true); end.parentNode.insertBefore(bookmark.end, end.nextSibling); } var current = domUtils.getNextDomNode(bookmark.start, false, function (node) { return node.nodeType == 1; }), next; while (current && current !== bookmark.end) { next = domUtils.getNextDomNode(current, true, function (node) { return node.nodeType == 1; }); if (utils.indexOf(tagNames, current.tagName.toLowerCase()) > -1) { domUtils.remove(current, true); } current = next; } return this.moveToBookmark(bookmark); }, /** * 获取当前选中的自闭合的节点 * @method getClosedNode * @return { Node | NULL } 如果当前选中的是自闭合节点， 则返回该节点， 否则返回NULL */ getClosedNode:function () { var node; if (!this.collapsed) { var range = this.cloneRange().adjustmentBoundary().shrinkBoundary(); if (selectOneNode(range)) { var child = range.startContainer.childNodes[range.startOffset]; if (child && child.nodeType == 1 && (dtd.$empty[child.tagName] || dtd.$nonChild[child.tagName])) { node = child; } } } return node; }, /** * 在页面上高亮range所表示的选区 * @method select * @return { UE.dom.Range } 返回当前Range对象 */ //这里不区分ie9以上，trace:3824 select:browser.ie ? function (noFillData, textRange) { var nativeRange; if (!this.collapsed) this.shrinkBoundary(); var node = this.getClosedNode(); if (node && !textRange) { try { nativeRange = this.document.body.createControlRange(); nativeRange.addElement(node); nativeRange.select(); } catch (e) {} return this; } var bookmark = this.createBookmark(), start = bookmark.start, end; nativeRange = this.document.body.createTextRange(); nativeRange.moveToElementText(start); nativeRange.moveStart('character', 1); if (!this.collapsed) { var nativeRangeEnd = this.document.body.createTextRange(); end = bookmark.end; nativeRangeEnd.moveToElementText(end); nativeRange.setEndPoint('EndToEnd', nativeRangeEnd); } else { if (!noFillData && this.startContainer.nodeType != 3) { //使用|x固定住光标 var tmpText = this.document.createTextNode(fillChar), tmp = this.document.createElement('span'); tmp.appendChild(this.document.createTextNode(fillChar)); start.parentNode.insertBefore(tmp, start); start.parentNode.insertBefore(tmpText, start); //当点b,i,u时，不能清除i上边的b removeFillData(this.document, tmpText); fillData = tmpText; mergeSibling(tmp, 'previousSibling'); mergeSibling(start, 'nextSibling'); nativeRange.moveStart('character', -1); nativeRange.collapse(true); } } this.moveToBookmark(bookmark); tmp && domUtils.remove(tmp); //IE在隐藏状态下不支持range操作，catch一下 try { nativeRange.select(); } catch (e) { } return this; } : function (notInsertFillData) { function checkOffset(rng){ function check(node,offset,dir){ if(node.nodeType == 3 && node.nodeValue.length < offset){ rng[dir + 'Offset'] = node.nodeValue.length } } check(rng.startContainer,rng.startOffset,'start'); check(rng.endContainer,rng.endOffset,'end'); } var win = domUtils.getWindow(this.document), sel = win.getSelection(), txtNode; //FF下关闭自动长高时滚动条在关闭dialog时会跳 //ff下如果不body.focus将不能定位闭合光标到编辑器内 browser.gecko ? this.document.body.focus() : win.focus(); if (sel) { sel.removeAllRanges(); // trace:870 chrome/safari后边是br对于闭合得range不能定位 所以去掉了判断 // this.startContainer.nodeType != 3 &&! ((child = this.startContainer.childNodes[this.startOffset]) && child.nodeType == 1 && child.tagName == 'BR' if (this.collapsed && !notInsertFillData) { // //opear如果没有节点接着，原生的不能够定位,不能在body的第一级插入空白节点 // if (notInsertFillData && browser.opera && !domUtils.isBody(this.startContainer) && this.startContainer.nodeType == 1) { // var tmp = this.document.createTextNode(''); // this.insertNode(tmp).setStart(tmp, 0).collapse(true); // } // //处理光标落在文本节点的情况 //处理以下的情况 //|xxxx //xxxx|xxxx //xxxx| var start = this.startContainer,child = start; if(start.nodeType == 1){ child = start.childNodes[this.startOffset]; } if( !(start.nodeType == 3 && this.startOffset) && (child ? (!child.previousSibling || child.previousSibling.nodeType != 3) : (!start.lastChild || start.lastChild.nodeType != 3) ) ){ txtNode = this.document.createTextNode(fillChar); //跟着前边走 this.insertNode(txtNode); removeFillData(this.document, txtNode); mergeSibling(txtNode, 'previousSibling'); mergeSibling(txtNode, 'nextSibling'); fillData = txtNode; this.setStart(txtNode, browser.webkit ? 1 : 0).collapse(true); } } var nativeRange = this.document.createRange(); if(this.collapsed && browser.opera && this.startContainer.nodeType == 1){ var child = this.startContainer.childNodes[this.startOffset]; if(!child){ //往前靠拢 child = this.startContainer.lastChild; if( child && domUtils.isBr(child)){ this.setStartBefore(child).collapse(true); } }else{ //向后靠拢 while(child && domUtils.isBlockElm(child)){ if(child.nodeType == 1 && child.childNodes[0]){ child = child.childNodes[0] }else{ break; } } child && this.setStartBefore(child).collapse(true) } } //是createAddress最后一位算的不准，现在这里进行微调 checkOffset(this); nativeRange.setStart(this.startContainer, this.startOffset); nativeRange.setEnd(this.endContainer, this.endOffset); sel.addRange(nativeRange); } return this; }, /** * 滚动到当前range开始的位置 * @method scrollToView * @param { Window } win 当前range对象所属的window对象 * @return { UE.dom.Range } 当前Range对象 */ /** * 滚动到距离当前range开始位置 offset 的位置处 * @method scrollToView * @param { Window } win 当前range对象所属的window对象 * @param { Number } offset 距离range开始位置处的偏移量， 如果为正数， 则向下偏移， 反之， 则向上偏移 * @return { UE.dom.Range } 当前Range对象 */ scrollToView:function (win, offset) { win = win ? window : domUtils.getWindow(this.document); var me = this, span = me.document.createElement('span'); //trace:717 span.innerHTML = ' '; me.cloneRange().insertNode(span); domUtils.scrollToView(span, win, offset); domUtils.remove(span); return me; }, /** * 判断当前选区内容是否占位符 * @private * @method inFillChar * @return { Boolean } 如果是占位符返回true，否则返回false */ inFillChar : function(){ var start = this.startContainer; if(this.collapsed && start.nodeType == 3 && start.nodeValue.replace(new RegExp('^' + domUtils.fillChar),'').length + 1 == start.nodeValue.length ){ return true; } return false; }, /** * 保存 * @method createAddress * @private * @return { Boolean } 返回开始和结束的位置 * @example * ```html * ** aaaa * * * bbbb * * *
* * * * ``` */ createAddress : function(ignoreEnd,ignoreTxt){ var addr = {},me = this; function getAddress(isStart){ var node = isStart ? me.startContainer : me.endContainer; var parents = domUtils.findParents(node,true,function(node){return !domUtils.isBody(node)}), addrs = []; for(var i = 0,ci;ci = parents[i++];){ addrs.push(domUtils.getNodeIndex(ci,ignoreTxt)); } var firstIndex = 0; if(ignoreTxt){ if(node.nodeType == 3){ var tmpNode = node.previousSibling; while(tmpNode && tmpNode.nodeType == 3){ firstIndex += tmpNode.nodeValue.replace(fillCharReg,'').length; tmpNode = tmpNode.previousSibling; } firstIndex += (isStart ? me.startOffset : me.endOffset)// - (fillCharReg.test(node.nodeValue) ? 1 : 0 ) }else{ node = node.childNodes[ isStart ? me.startOffset : me.endOffset]; if(node){ firstIndex = domUtils.getNodeIndex(node,ignoreTxt); }else{ node = isStart ? me.startContainer : me.endContainer; var first = node.firstChild; while(first){ if(domUtils.isFillChar(first)){ first = first.nextSibling; continue; } firstIndex++; if(first.nodeType == 3){ while( first && first.nodeType == 3){ first = first.nextSibling; } }else{ first = first.nextSibling; } } } } }else{ firstIndex = isStart ? domUtils.isFillChar(node) ? 0 : me.startOffset : me.endOffset } if(firstIndex < 0){ firstIndex = 0; } addrs.push(firstIndex); return addrs; } addr.startAddress = getAddress(true); if(!ignoreEnd){ addr.endAddress = me.collapsed ? [].concat(addr.startAddress) : getAddress(); } return addr; }, /** * 保存 * @method createAddress * @private * @return { Boolean } 返回开始和结束的位置 * @example * ```html * ** aaaa * * * bbbb * * *
* * * * ``` */ moveToAddress : function(addr,ignoreEnd){ var me = this; function getNode(address,isStart){ var tmpNode = me.document.body, parentNode,offset; for(var i= 0,ci,l=address.length;i