2009-10-29 2 views
0

페이지의 모든 개체 ID와 이름을 알 수있는 방법이 있습니까? 어떤 공구?[HTML] : 페이지의 모든 요소 이름 결정

( console.log에 대한 + 방화 광)
+0

Chrome 또는 Firefox 방화 밧데리에서 개발자 콘솔을 사용하고 HTML 페이지를 검사하는 것과 같은 의미입니까? – jldupont

+0

... 아니면 모든 객체에 대해 DOM을 걷는 것과 같은 이야기입니까? – jldupont

+0

양식의 모든 개체 이름과 메서드 이름도 알 수있는 일부 IDE와 비슷합니다. – RKh

답변

5
jQuery로

는 :

var ids = [], names = []; 
jQuery('body *').each(function(){ 
    var id = $(this).attr('id'), 
     name = $(this).attr('name'); 
    id && ids.push(id); 
    name && names.push(name); 
}); 

console.log(ids, names); 
-1

이 작업을 수행하는 가장 실용적인 방법은 완전히 당신의 웹 페이지를 캡슐화하는 DIV하는 것입니다. 이것으로 모든 자식 요소를 볼 수 있습니다.

는 페이지 :

<html> 
<head> 
    <title>Awesome Page</title> 
    <!-- Script Below Goes Here --> 
</head> 
<body> 
<div id="everything"> 
<!-- All your elements on page --> 
</div> 
</body> 
</html> 

스크립트는 :

<script type="text/javascript"> 
function DisplayFormValues() 
{ 
    var str = ''; 
    var elem = document.getElementById('everything').elements; 
    for(var i = 0; i < elem.length; i++) 
    { 
    str += "<b>Type:</b>" + elem[i].type + "&nbsp&nbsp"; 
    str += "<b}>Name:</b>" + elem[i].name + "&nbsp;&nbsp;"; 
    str += "<b>Value:</b><i>" + elem[i].value + "</i>&nbsp;&nbsp;"; 
    str += "<BR>"; 
    } 
} 
</script> 
+0

아래의 krcko의 대답은 JQuery를 사용합니다. JQuery를 사용하는 경우 krcko의 솔루션을 참조하십시오. 나는 그러한 허위로 그의 대답을지지한다. –

+1

왜 기존 요소 ''을 사용할 수있을 때 모든 것을 캡슐화하는 요소를 추가합니까? 'var elem = document.body.elements' – nickf

+0

'document.body.elements'를 사용할 DOC TYPE은 무엇입니까? –

3

다음 XPath 표현식은 id 속성 또는 name 속성 중 하나가 모든 요소를 ​​반환

//*[@id or @name] 

당신 Firebug Firefox Add-on을 사용하여 테스트 할 수 있습니다. 예를 들어 콘솔에 입력하면 다음과 같이됩니다.

관련 문제