node_javascript 기술의 형제, 부모 및 자식 요소를 가져오는 JS 방법
- WBOY원래의
- 2016-05-16 17:04:511605검색
먼저 JQUERY 방식보다 훨씬 번거로운 JS 획득 방식에 대해 이야기해 보겠습니다. JQUERY 방식은 나중에 비교하는 데 사용됩니다.
JS 방법은 JQUERY보다 훨씬 더 번거롭습니다. 주로 FF 브라우저가 줄 바꿈을 DOM 요소로 처리하기 때문입니다.
Native JS는 ID 테스트를 통해 요소 아래의 하위 요소를 가져옵니다. 사용 가능 시기:
var a = docuemnt.getElementById("test").getElementsByTagName("div"); 문제 없습니다
이때 a.length=2;
그러나 다른 방법을 사용한다면
var b =document.getElementById("test").childNodes
현재 b.length는 IE 브라우저에서는 문제가 없으며 여전히 2와 같지만 FF 브라우저에서는 FF도 줄바꿈을 요소로 처리하므로 4가 됩니다.
여기에서는 이러한 요소를 순회하고 공백과 텍스트인 모든 요소를 삭제해야 합니다.
function del_ff(elem){
var elem_child = elem.childNodes;
for(var i=0; i
{elem.removeChild(elem_child)
}
}
}
위 함수는 노드가 있는 경우 하위 요소를 순회합니다. 텍스트인 요소를 입력하고 노드 유형의 노드 값은 비어 있습니다. 그냥 삭제하세요.
nodeNames는 노드의 노드 유형을 가져올 수 있으며 /s/는 JS에서 비어 있지 않은 문자의 정규 표현식입니다. 앞에 추가! , 빈 문자를 의미합니다
test() 메서드는 문자열이 특정 패턴과 일치하는지 확인하는 데 사용됩니다. 구문은 RegExpObject.test(string)
입니다.문자열에 RegExpObject와 일치하는 텍스트가 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
nodeValue는 이 노드에서 값을 얻는다는 의미입니다.
removeChild는 요소의 하위 요소를 삭제합니다.
이후, 아들, 아버지, 형제 등의 속성을 호출하기 전에 위 함수를 호출하여 공백을 지우면 됩니다.
<script><br>function dom() {<br>var s= document.getElementById("test");<br>del_ff(s) / /공백 정리 <br>var chils= s.childNodes; //s의 모든 하위 노드 가져오기<br>var par=s.parentNode; //s의 상위 노드 가져오기<br>var ns=s.nextSbiling; //s의 다음 형제 노드 가져오기<br>var ps=s.previousSbiling; //s의 이전 형제 노드 가져오기<br>var fc=s.firstChild; //s의 첫 번째 하위 노드 가져오기<br>var lc =s .lastChile; //s의 마지막 자식 노드를 가져옵니다 <p>}<br></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과 같은 초기 컬렉션의 내용이 포함되지 않습니다. ") ,
요소에서 시작하여 을 찾습니다. 이는 $("pspan")
과 동일합니다.