js 및 jquery_javascript 기술로 부모 요소, 자식 요소, 형제 요소를 얻는 구현 방법

JQUERY 방식보다 훨씬 번거로운 JS 획득 방식에 대해 먼저 알아보겠습니다. 나중에 비교를 위해 JQUERY 방식을 사용하겠습니다.

JS 방법은 주로 FF 브라우저 때문에 JQUERY보다 훨씬 더 번거롭습니다. FF 브라우저는 줄바꿈을 DOM 요소로 처리합니다

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

예:

 

🎜>

var a = docuemnt.getElementById("dom").getElementsByTagName_r("div"); 문제 없습니다

이때 a.length=3;

하지만 이제 이를 얻을 수 있는 또 다른 방법이 있습니다. 이는 지난 장에서 언급한 var b = document.getElementByIdx_x("dom").childNodes입니다. IE 브라우저에서는 여전히 3이지만 FF 브라우저에서는 프롬프트가 4입니다. 이는 FF가 줄 바꿈을 요소로 처리하기 때문입니다.

그래서 JS를 사용하려면 이러한 속성을 처리해야 합니다. 아이디어를 처리하는 것은 이러한 요소를 탐색하는 것만큼 간단합니다. 유형이 공백 및 텍스트인 모든 요소를 ​​삭제합니다. 처리 함수는 이렇습니다

코드 복사 코드는 다음과 같습니다.

function del_space( 요소){

var elem_child = elem.childNodes;//매개변수 요소의 모든 하위 요소 가져오기

for(var i=0;i                                                        ~                         } 노드 값이 비어 있습니다. 그냥 삭제하세요.

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



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

입니다.

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

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

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

다음은 핵심!

코드 복사

코드는 다음과 같습니다.

       <script><a style="CURSOR: pointer" data="41466" class="copybut" id="copybut41466" onclick="doCopy('code41466')"> function dom(){<U> var a = document.getElementByIdx_x_x("dom"); del_space(a); 공백을 정리하는 함수 호출 var b = a .childNodes; a의 모든 하위 노드 가져오기; </script> var d = a.nextSbiling; e = a .previousSbiling;

의 이전 형제 노드를 가져옵니다. var f = a.firstChild;

의 첫 번째 하위 노드를 가져옵니다. var g = a.lastChild; }



다음은 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")에 해당하는 p 요소를 찾기 시작하세요.

——————————————2014 1-9————————————————

위는 부모-자식 요소 등을 얻기 위해 js 및 jquery를 해결하기 위해 인터넷에서 선택한 방법이지만 해결 시 여전히 문제가 있습니다.

코드 복사 코드는 다음과 같습니다.

js获取节点 dom操작

接口	nodeType常量	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文本
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属性

接口

方法	描述
createAttribute()	用指定的名字创建新的Attr节点。
createComment()	用指定的字符串创建新的Comment节点。
createElement()	用指定的标记名创建新的Element节点。
createTextNode()	用指定的文本创建新的TextNode节点。
getElementById()	返回文档中具有指定id属性的Element节点。
getElementsByTagName()	返回文档中具有指定标记名的所有Element节点。

属性	描述
attributes	如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes	以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild	以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
lastChild	以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling	以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点
nodeName	节点的名字，Element节点则代表Element的标记名称。
nodeType	代表节点的类型。
parentNode	以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling	以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点

nodeType의 수량

노드 유형

备注

요소

노드.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节点.

TR>

성	描述
속성
childNodes	以Node[]적형의 형상이 있는 전자 节点입니다.
첫 번째 자식	以노드 모양의 형태는 式返回当前节点的第一个子节点입니다.如果没有子节点，则为null.
마지막 자식	以노드 모양의 형태는 式返回当前节点的最后一个子节点。如果没有子节点，则为null。
다음형제	이 노드의 형태는 节点의 兄弟下一个节点입니다. TR>
노드이름	节点적 이름,Element节点则代表Element의 이름은 입니다.
노드 유형	代表节点的类型.
상위 노드	以노드 모양의 형태는 父节点입니다.如果没有父节点，则为null.
이전 형제자매	이 노드의 형태는 이전의 节点, 位于它에서 이전의 兄弟节点입니다. STRONG>