js jquery는 현재 요소의 형제 수준을 가져옵니다. 이전 다음 element_jquery

var chils= s.childNodes; //s의 모든 하위 노드 가져오기

var par=s.parentNode; //s의 상위 노드 가져오기

var ns=s.nextSbiling; //s의 다음 형제 노드를 가져옵니다

var ps=s.previousSbiling; //s의 이전 형제 노드를 가져옵니다

var fc=s.firstChild; //s의 첫 번째 하위 노드 가져오기

var lc=s.lastChile; //s의 마지막 하위 노드를 가져옵니다

JS는 노드 부모, 자식 요소를 얻습니다

먼저 JQUERY 방식보다 훨씬 번거로운 JS 획득 방식에 대해 이야기해 보겠습니다. JQUERY 방식은 나중에 비교하는 데 사용됩니다.

JS 방법은 JQUERY보다 훨씬 더 까다롭습니다. 주로 FF 브라우저가 줄바꿈을 DOM 요소로 처리하기 때문입니다.

<div id="test">
<div></div>
<div></div>
</div>

네이티브 JS는 ID 테스트를 통해 요소 아래의 하위 요소를 가져옵니다.

사용 가능:

var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 

문제 없습니다

이때 a.length=2;

그러나 다른 방법을 사용한다면

var b =document.getElementByIdx_x("test").childNodes; 

현재 b.length는 IE 브라우저에서는 문제가 없으며 여전히 2와 같지만 FF 브라우저에서는 FF도 줄바꿈을 요소로 처리하므로 4가 됩니다.

여기에서는 이러한 요소를 순회하고 공백과 텍스트인 모든 요소를 ​​삭제해야 합니다.

function del_ff(elem){
var elem_child = elem.childNodes;
for(var i=0; i<elem_child.length;i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
}
}
}

위 함수는 텍스트인 요소에 노드 유형이 있고 텍스트 유형 노드의 노드 값이 비어 있는 경우 하위 요소를 순회합니다. 그냥 삭제하세요.

nodeNames는 노드의 노드 유형을 가져올 수 있으며 /s/는 JS에서 비어 있지 않은 문자의 정규 표현식입니다. 앞에 추가! , 빈 문자를 의미합니다

test() 메서드는 문자열이 특정 패턴과 일치하는지 확인하는 데 사용됩니다. 구문은 RegExpObject.test(string)

입니다.

문자열에 RegExpObject와 일치하는 텍스트가 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

nodeValue는 이 노드에서 값을 얻는다는 의미입니다.

removeChild는 요소의 하위 요소를 삭제합니다.

그 후 아들, 아버지, 형제의 속성을 호출하기 전에 위 함수를 호출하여 공백을 비우면 됩니다.

<div id="test">
<div></div>
<div></div>
</div>

<script>
function dom() {
var s= document.getElementByIdx_x("test");
del_ff(s);  //清理空格
var chils= s.childNodes; //得到s的全部子节点
var par=s.parentNode;  //得到s的父节点
var ns=s.nextSbiling;  //获得s的下一个兄弟节点
var ps=s.previousSbiling; //得到s的上一个兄弟节点
var fc=s.firstChild;  //获得s的第一个子节点
var lc=s.lastChile;  //获得s的最后一个子节点
}
</script>

다음은 JQUERY의 부모, 자식, 형제 노드를 찾는 방법을 소개합니다

jQuery.parent(expr) 상위 노드를 찾으려면 $("span").parent() 또는 $("span").parent(".class")와 같이 필터링을 위해 expr을 전달할 수 있습니다.

jQuery.parents(expr), jQuery.parents(expr)와 유사하지만 상위 요소에 국한되지 않고 모든 상위 요소를 검색합니다.

jQuery.children(expr). 모든 하위 노드를 반환합니다. 이 메서드는 직접 하위 노드만 반환하고 모든 하위 노드를 반환하지는 않습니다.

jQuery.contents()는 노드와 텍스트를 포함하여 아래의 모든 콘텐츠를 반환합니다. 이 방법과 children()의 차이점은 빈 텍스트를 포함하면
으로 처리된다는 것입니다.

jQuery 객체가 반환되고 children()은 노드만 반환합니다

jQuery.prev()는 모든 형제 노드가 아닌 이전 형제 노드를 반환합니다

jQuery.prevAll(), 이전 형제 노드를 모두 반환합니다

jQuery.next()는 모든 형제 노드가 아닌 다음 형제 노드를 반환합니다

jQuery.nextAll(), 모든 후속 형제 노드를 반환합니다

jQuery.siblings()는 전면 또는 후면에 관계없이 형제 노드를 반환합니다.

jQuery.find(expr)는 jQuery.filter(expr)와 완전히 다릅니다. jQuery.filter()는 jQuery 객체의 초기 컬렉션의 일부를 필터링하는 반면, jQuery.find()
반환 결과에는 초기 컬렉션의 콘텐츠가 포함되지 않습니다. 예를 들어 $("p"), find("span")는 e388a4556c0f65e1904146cc1a846bee 요소에서 시작하여 $(와 같습니다. "p 스팬" )

위 소개는 현재 요소의 형제 수준을 가져오는 js jquery에 대한 것입니다. 모든 사람에게 도움이 되기를 바랍니다.