Js基礎學習之 -- DOM相容 根據標籤、類名獲取節點函式封裝
阿新 • • 發佈:2019-01-23
Js基礎學習之 -- DOM相容 根據標籤、類名獲取節點函式封裝
1. 作用:所有類選擇器名為cName的標籤
引數:類選擇器的名(class名)返回值:所有類選擇器名為cName的標籤
function getClass(cName){ var arr = []; var allTag = document.getElementsByTagName("*"); for(var i = 0; i < allTag.length; i++){ if(allTag[i].className == cName){ arr.push(allTag[i]); } } return arr; }
測試:console.log(getClass("Name"));
2. 作用:返回過濾空白文字節點和註釋節點後的元素節點集合
引數1:父級節點
返回值:元素節點集合
<pre name="code" class="javascript"><pre name="code" class="javascript">function getChildNodes(element){ var arr = []; var eList = element.childNodes; for(var i = 0;i < eList.length;i++){ if(eList[i].nodeType == 1){//過濾空白節點 arr.push(eList[i]); } } return arr; }
呼叫示例:
var obj = getChildNodes(父級節點物件);
console.log(obj);
3. 作用:獲取最後一個孩子節點
引數1: 父級元素物件
返回值:返回此物件的最後一個非空孩子節點
<pre name="code" class="javascript"> function getlastChild(element){ var lChild = null; var allsubobj = element.childNodes; for(var i=allsubobj.length-1;i >= 0;i--) if(allsubobj[i].nodeType == 1){//過濾空白節點 lChild = allsubobj[i]; break; } return lChild;
4. 作用:獲取第一個孩子節點
引數1: 父級元素物件
返回值:返回此物件的第一個非空孩子節點
<pre name="code" class="javascript">function getfirstChild(element){
var fChild = null;
var eList = element.childNodes;
for(var i = 0;i < eList.length;i++)
if(eList[i].nodeType == 1){//過濾空白節點
fChild = eList[i];
break;
}
return fChild;
}
5. 作用:獲取下一個非空節點
引數1: 元素物件
返回值:返回此物件的下一個非空節點
<pre name="code" class="javascript">function getNextSibling(element){
var obj = element.nextSibling;
while(obj != null && obj.nodeType != 1){
obj = obj.nextSibling;
}
return obj;
}
6. 作用:獲取上一個非空節點
引數1: 元素物件
返回值:返回此物件的上一個非空節點
<pre name="code" class="javascript">function getPreviousSibling(element){
var obj = element.previousSibling;
while(obj != null && obj.nodeType != 1){
obj = obj.previousSibling;
}
return obj;
}