DOM 요소에 대한 어떤 정보를 통해 JavaScript가 고유하게 식별 할 수 있습니까? (예 : 'id'가 없을 때)

Question

다음은 현재 수행하려는 작업입니다. 현재 페이지의 요소 (모든 사이트가 될 수 있음)를 찾고 북마크를 일치하는 것들. 나는 그 부분을 일하고있다.

어떤 경우에는 자동으로 일치하는 항목이 하나도 없으며 어떤 요소를 활성화해야하는지 표시하고 싶습니다. localStorage에 일부 정보를 저장하고 싶습니다. 다음 번에 해당 페이지에서 북마크릿을 사용할 때 해당 정보를 검색하여 DOM의 요소를 식별 한 다음 클릭 이벤트를 전달하려고합니다.

질문 : 식별 할 수 있도록 저장해야하는 정보는 무엇입니까? (대부분의 경우, 작동하지 않는 경우를 항상 생성 할 수 있기 때문에)

가장 좋은 경우에, 상기 요소는 id 값을 가지며 나도 좋습니다. 다른 경우에는 정보를 얻지 않고 어떤 정보를 얻을 수 있는지에 대한 의견을 듣고 싶습니다.

지금까지 제 아이디어는 요소의 속성 중 일부를 저장하고 DOM을 통과하여 모든 요소와 일치하는 요소를 찾는 것입니다. 모든 속성이 작동하지는 않습니다 (예 : clientWidth은 브라우저의 크기에 따라 다름) 모든 유형의 요소가 모든 속성을 가질 수는 없습니다 (예 : div 노드는 src 값을 갖지 않습니다). 맹목적으로 모든 속성을 저장하지만 다른 한편으로는 어떤 종류의 요소 (유용한 정보를 잃을 위험에 처해 있음)를 위해 작동하는 제한된 속성 목록을 선택하거나 다른 요소에 대해 다른 경우를 가질 필요가 있습니다. 't 훌륭한 슈퍼 소리).

것들 내가 사용할 수있는 생각 :

• id 물론
• className, tagName 도움이 될의,
• innerHTML가에서 작동합니다 어떤 경우에는 명확한 일치하지 않을에 className 가능성이 높습니다하지만 콘텐츠가 텍스트 인 경우 많은 경우
• src 콘텐츠가 이미지 인 경우 대부분의 경우 작동합니다.
• 조상의 계층 구조 (하지만 지저분해질 수 있음)
• ...?

제 질문은 "코드에 대해 어떻게 생각하십니까?"라는 질문에 약간의 차이가 있습니다. 감사합니다.

Answer 1

접근 방법은 name, tagName 및 className-combination을 사용합니다. innerHTML이 너무 클 수 있습니다.

다른 접근법은 id가있는 선택한 요소의 하위 요소를 찾는 것입니다. ID에 대한

체크 => => ID로 차일을 확인 이름을 확인, 태그 이름과 클래스 이름-조합 (있는 경우 => 당신은 @brendan이 말을 할 수

Answer 2

ID가없는 모든 요소를 ​​찾아 고유 ID를 할당하면 어떨까요? 그렇다면 항상 이드를 사용할 수 있습니다.

Answer 3

:-) 다른 항목을 선택하는 사용자에게 .DOM의 각 요소에 대한 jQuery 스타일 선택기 문자열을 구성 할 수 있습니다.이 선택자 문자열은 부모의 자식 노드 목록에서 해당 요소의 "인덱스"를 계산 한 다음 DOM을 body 태그.

은 무엇 당신이 끝장 낸 것은 물론

body > :nth-child(3) > :nth-child(0) > :nth-child(4) 

같은 DOM의 변화가 너무 좋은 작동하지 않습니다 경우에 보이는 무언가이다. 클래스 이름 등을 추가 할 수는 있지만 처음에는 좋은 "ID"가 없다면 본질적으로 취약하다는 말을 들었을 것입니다. 어떤 논리가 무엇이 될지 알고 있으면 페이지 생성시에 거기에 놓입니다. 처음에는 페이지.

Answer 4

DOM 내에서 요소의 색인 (정수)을 사용하는 것은 어떻습니까? 페이지로드시 모든 요소를 ​​반복하여 인덱스에 사용자 정의 속성을 설정할 수 있습니다.