html元素的字符串沒有添加到頁面,如何獲取元素對應的屬性

好比有一個"<span id='a1' title='t1' uid='u1'>測試類容</span>"

(1)若是這種格式的字符串已經添加到頁面,在頁面利用document能夠找到,那麼能夠利用jquery或者js先根據id獲取節點,在獲取對應屬性

(2)若是該節點沒有添加到頁面,如何獲取該字符串span的全部屬性,好比獲取id,title和uid,如何獲取?

能夠這麼作:

var parser = new DOMParser();
var htmlDoc = parser.parseFromString(str, 'text/html');//生出以html包裹的html節點對象
var $a = $(htmlDoc).find('span');
if($a.length > 0){
    var title = $a.attr("title");
    var id = $a.attr("id");
	var uid = $a.attr("uid");
	
}

項目代碼:

easyui的datagrid的field的formatter返回一個字符串,該字符串會生出對應的dom對象

需求:若是按鈕小於等於2個,則正常顯示;大於2個,增長一個"更多"菜單,保留一個一級菜單,其他菜單在"更多"裏面做爲子菜單顯示:

function actionFormatterFun(value,row,index){
    var str = "";
    //按鈕1
	var menuParam = new Array();
    menuParam.push("參數1",650,350,"modifyProcess?eprjInfoId=row.id",row.uuid);
    var menuStr = getFirstFun(row,"按鈕1","按鈕1","icon-search","showDialogForUser",menuParam);
    str += menuStr;
    //按鈕2
    var menuParam = new Array();
    menuParam.push("參數2",650,350,"modifyProcess?eprjInfoId=row.id",row.uuid);
    var menuStr = getFirstFun(row,"按鈕2","按鈕2","icon-search","showDialogForUser",menuParam);
    str += menuStr;
    //按鈕3
    var menuParam = new Array();
    menuParam.push("參數3",650,350,"modifyProcess?eprjInfoId=row.id",row.uuid);
    var menuStr = getFirstFun(row,"按鈕3","按鈕3","icon-search","showDialogForUser",menuParam);
    str += menuStr;

    var finalStr = returnFinalStrFun(str,row,parent);
	return finalStr;
}

/**
 * 返回最終的菜單字符串
 * @param str 菜單的字符串
 * @returns
 */
function returnFinalStrFun(str,row,parent){
	var menuNum = getTotalMenuNumFun(str);
	if(menuNum <=2){
		return str;
	}
    var menuId = row.id;
    var menuUid = row.uuid;
     if(parent){
    	menuId = parent.id;
    	menuUid = parent.uuid;
    }
    //保留第一個菜單,其餘的菜單放入到"更多"裏面
    var str = initMenuStrFun(str,row,menuId,menuUid);
    return str;
}

/**
 * 獲取當前行全部一級菜單的數量;若是數量<=2,則都作一級顯示,不然要顯示二級
 * 以<a>對象的個數來做爲子菜單的個數,個數爲split以後-1
 * @param str 菜單的字符串
 * @returns
 */
function getTotalMenuNumFun(str){
	if(str){
		var split = str.split("</a>");
		return split.length-1;
	}
	return 0;
}

/**
 * 根據菜單數量初始化最後的菜單樣式
 * @param str 菜單字符串
 * @returns
 */
function initMenuStrFun(str,row,menuId,menuUid){
	var finalMenuStr = "";
	if(str){
		var split = str.split("</a>");
		finalMenuStr += split[0]+"</a>";//以</a>切割了,這裏要加上</a>,爲須要保留的第一個菜單
        //加入"更多"菜單
		finalMenuStr += "<a uid='"+menuId+"' uuid='"+menuUid+"' href='javascript:void(0)' class='__zdymenu' >更多</a>";
		finalMenuStr += "<div id='__zdymenu"+row.id+"'>";
		for(var i = 1;i < split.length;i++){
			if(split[i]){
                //把<a>標籤的字符串轉化爲<div>的二級菜單顯示方式
				var secondStr = getSecondFun(split[i]+"</a>");
				finalMenuStr += secondStr;
			}
		}
		finalMenuStr += "</div>";
	}
	return finalMenuStr;
}

/**
 * 根據一級子節點生成二級子節點
 * 注意:二級子節必須爲div,不然顯示有問題
 * @param str
 * @returns
 */
function getSecondFun(str){
	var returnStr = "";
	var parser = new DOMParser();//解析器
	var htmlDoc = parser.parseFromString(str, 'text/html');//解析爲html元素
	var $a = $(htmlDoc).find('a');//獲取虛擬的dom對象
	if($a.length > 0){
		var title = $a.attr("title");
		var text = $a.find("span[myText]").attr("myText");
		var icon = $a.find("span[myIcon]").attr("myIcon");
		var onclickStr = $a.attr("onclick");
		returnStr = getSecondFunByParam(title,text,icon,onclickStr);
	} 
	return returnStr;
}

/**
 * 獲取二級菜單
 * @param row
 * @param title
 * @param text
 * @param icon
 * @param funName
 * @param param
 * @param clickStr
 * @returns
 */
function getSecondFunByParam(title,text,icon,clickStr){
	var divStr = "<div onclick='"+clickStr+"' title='"+title+"' data-options=\"iconCls:'"+icon+"'\">"+text+"</div>";
	return divStr;
}

/**
 * 獲取一級菜單(注意,formatter的一級菜單以<a>標籤顯示;可是"更多"裏面的子菜單必須以"div"顯示,不然子菜單顯示不正常)
 * @param row 當前所在的行
 * @param title 顯示的標題
 * @param text 顯示的文字
 * @param icon 按鈕的樣式
 * @param funName 按鈕回調的函數
 * @param param 回調函數funName須要的參數
 * @returns
 */
function getFirstFun(row,title,text,icon,funName,param,menuFlag){
	var clickStr = getCallFun(funName,param);
	if(!menuFlag){
		menuFlag = "";
	}
	var str = "<a "+clickStr+" menuFlag='"+menuFlag+"' href='javascript:;' class='easyui-linkbutton l-btn l-btn-small l-btn-plain  btn-small-nt' plain='true' ";
    str += " title='"+title+"' >";
    str += "<span class='l-btn-left l-btn-icon-left'>";
    str += "<span class='l-btn-text' myText='"+text+"' myIcon='"+icon+"'>"+text+"</span>";
    str += "<span class='"+icon+"'></span>";
    str += "</span>";
    str += "</a>";
    return str;
}

/**
 * 根據參數和函數名,獲取對應的函數綁定的事件的字符串
 * @param funName
 * @param param
 * @returns
 */
function getCallFun(funName,param){
	var clickStr = "onclick='"+funName+"(";
	if(param && param.length > 0){
		for(var i = 0;i < param.length;i++){
			if(i != 0){
				clickStr += ",";
			}
			if(typeof(param[i]) == 'number'){
				//若是是數字類型的參數,則原樣傳入數字(若是dialog的width和height傳入字符串類型會有顯示有問題)
				clickStr += ""+param[i]+"";
			}else{
				clickStr += "\""+param[i]+"\"";
			}
		}
	}
	clickStr += ");'";
	return clickStr;
}