DOM 트리 재귀 호출

Question

이것은 Crockford의 JavaScript에서 온 코드입니다 : 좋은 부분.

var results = []; 

var walkDOM = function (node,func) { 
     func(node);      //What does this do? 
     node = node.firstChild; 
     while(node) { 
      walkDOM(node,func); 
      node = node.nextSibling; 
     } 

    }; 

나는 func(node)을 제외한 코드를 이해합니다. 요점은 func 함수의 매개 변수로 node을 전달하는 것이지만 브라우저가이 방법을 어떻게 이해할 수 있을까요? (는 document.body) {...}

walkDOM(document.body,function(att) { 
      node.getAttribute(att); 
      results.push(node); 
      }); 

전달 func

, walkDOM 기능 (AT & T)를 처리합니다 - : 함수가이 같이 읽을 수라고 너무 - node 및 func 무엇이든 될 수있다 - 아무 의미가 없어요. 그렇다면 왜 Crockford는 func (노드)를 포함하도록 선택 했습니까?

Answer 1

내게는 func처럼 보입니다. 나무의 모든 노드에 뭔가를하는 데 사용됩니다. 귀하의 예제 기능에서

walkDOM(document.body, function(node) { 
    alert(node.tagName); 
}); 

: 나는 전체 트리의 모든 노드에 대한 태그 이름을 경고하기를 원한다면

는 예를 들어,

walkDOM(document.body,function(att) { 
     node.getAttribute(att); 
     results.push(node); 
     }); 

... 당신은 node라는 이름의 한 매개 변수는 att이지만 마법의 이름으로 속성을 작성하는 것은 아닙니다. 노드가 att으로 설정되어 있기 때문에 node.getAttribute(att)이 실행될 때 "변수 '노드가 정의되지 않았습니다"라고 예상 할 수 있습니다 ... 해당 기능의 범위에 node이 없습니다. 이후

Answer 2

예,이 트리 탐색 기능은 의미가 있습니다 :

• 함수 인수가 첫 번째 호출 인수가 지원되는 노드 있어야하는데
• 노드 (모든)를 처리하는 방법을 알고 가정된다 (문서화되지 예를 들어, func가 그것을 처리하는 방법을 모르는 경우)

말하자면,이 알고리즘은 처음 형제를 통해서만 탐색하므로이 알고리즘은 여전히 ​​나에게 잘못되었습니다. 다른 형제는 단순히 무시됩니다. 버전은 "깊은 첫 번째"(아이를 처리하기 전에 즉 호출하지 호출 FUNC가())입니다

function walk(node, func) { 
    var children = node.childNodes; 
    for (var i = 0; i < children.length; i++) // Children are siblings to each other 
     walk(children[i], func); 
    func(node); 
} 

참고하지만, FUNC 가능성이 있기 때문에 나는 오히려 권하고 싶습니다 : 그래서 내가 대신이 전통적인 접근 방식을 사용하는 것이 좋습니다 노드를 변경합니다. 이 방법으로 부모 프로세스는 적절하지 않은 변경 사항을 발행하기 전에 이미 처리 된 자식의 최신 상태를 고려할 수 있습니다.

func(node) 

라인의

Answer 3

func는 일반적으로 콜백 함수로 알려져 있습니다 것입니다. walkDOM 함수에서 사용할 수있는 함수입니다. 좀 더 자세한 함수 이름을 사용하면 의미가 있습니다.

var results = []; 

var walkDOM = function (node, iCanBeCalledOnANode) { 
    iCanBeCalledOnANode(node); // Will be called on every DOM element 
    node = node.firstChild; 
    while(node) { 
     walkDOM(node,func); 
     node = node.nextSibling; 
    } 

}; 

희망 사항에 따라 문제가 해결되기를 바랍니다.

Answer 4

Crockford의 코드는 여러 가지 방법으로 전달 된 인수를 처리하는 데 사용할 수있는 walkDOM에 콜백을 전달합니다. 수용`사용 개발자 walkDOM` 그것에게 * 예상하는 기능을 합격이 예상되는

var getTagNameCount = function(tagName) { 
    var count = 0; 
    walkDOM(document.body, function(node) { 
     if (node.tagName === tagName) { 
      count++; 
     } 
    }); 
    return count; 
};