JQUERY 방식보다 훨씬 번거로운 JS 획득 방식에 대해 먼저 알아보겠습니다. 나중에 비교를 위해 JQUERY 방식을 사용하겠습니다.
JS 방법은 주로 FF 브라우저 때문에 JQUERY보다 훨씬 더 번거롭습니다. FF 브라우저는 줄바꿈을 DOM 요소로 처리합니다
네이티브 JS는 ID 테스트를 통해 요소 아래의 하위 요소를 가져옵니다. 사용 가능 시기:
예:
이때 a.length=3;
하지만 이제 이를 얻을 수 있는 또 다른 방법이 있습니다. 이는 지난 장에서 언급한 var b = document.getElementByIdx_x("dom").childNodes입니다. IE 브라우저에서는 여전히 3이지만 FF 브라우저에서는 프롬프트가 4입니다. 이는 FF가 줄 바꿈을 요소로 처리하기 때문입니다.
그래서 JS를 사용하려면 이러한 속성을 처리해야 합니다. 아이디어를 처리하는 것은 이러한 요소를 탐색하는 것만큼 간단합니다. 유형이 공백 및 텍스트인 모든 요소를 삭제합니다. 처리 함수는 이렇습니다 for(var i=0;i
nodeNames는 노드의 노드 유형을 가져올 수 있으며, /s/는 JS에서 비어 있지 않은 문자의 정규 표현식입니다. 앞에 추가! , 빈 문자를 의미합니다
test() 메서드는 문자열이 특정 패턴과 일치하는지 확인하는 데 사용됩니다. 구문은 RegExpObject.test(string)
문자열에 RegExpObject와 일치하는 텍스트가 포함되어 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.
nodeValue는 이 노드에서 값을 얻는다는 의미입니다.removeChild는 요소의 하위 요소를 삭제합니다.
다음은 핵심!코드 복사
코드는 다음과 같습니다.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")에 해당하는 p 요소를 찾기 시작하세요.
——————————————2014 1-9————————————————
위는 부모-자식 요소 등을 얻기 위해 js 및 jquery를 해결하기 위해 인터넷에서 선택한 방법이지만 해결 시 여전히 문제가 있습니다.
js获取节点 dom操작
|
|
노드 유형 | 备注 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
요소 | 노드.ELEMENT_NODE | 1 | 원素节点 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
텍스트 | 노드.TEXT_NODE | 3 | 文本节点 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
문서 | 노드.DOCUMENT_NODE | 9 | 문서 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
댓글 | 노드.COMMENT_NODE | 8 | 注释的文本 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
문서조각 | Node.DOCUMENT_FRAGMENT_NODE | 11 | 문서조각 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
속성 | 노드.ATTRIBUTE_NODE | 2 | 节点属性 |
방법 | 描述 |
createAttribute() | 사용자 정의 이름은 새로운 속성을 사용합니다. |
댓글 생성() | 사용자 정의 문자 유형은 새로운 댓글입니다. |
createElement() | 이용자는 새로운 요소를 사용하여 정의합니다. |
createTextNode() | 이용자는 새로운 TextNode를 사용합니다. |
getElementById() | 返回文档中具에는 고유한 ID 요소가 있습니다. |
getElementsByTagName() | 返回文档中具有指定标记名所有Element节点. |
성 | 描述 |
속성 | |
childNodes | 以Node[]적형의 형상이 있는 전자 节点입니다. |
첫 번째 자식 | 以노드 모양의 형태는 式返回当前节点的第一个子节点입니다.如果没有子节点,则为null. |
마지막 자식 | 以노드 모양의 형태는 式返回当前节点的最后一个子节点。如果没有子节点,则为null。 |
다음형제 | 이 노드의 형태는 节点의 兄弟下一个节点입니다. TR> |
노드이름 | 节点적 이름,Element节点则代表Element의 이름은 입니다. |
노드 유형 | 代表节点的类型. |
상위 노드 | 以노드 모양의 형태는 父节点입니다.如果没有父节点,则为null. |
이전 형제자매 | 이 노드의 형태는 이전의 节点, 位于它에서 이전의 兄弟节点입니다. STRONG> | TR>