문서.get Element ById () 는 원래 값의 문제를 받았습니다.

문제
두 인터페이스 모두 id="test"의div가 있습니다. 내용이 다르고 루트가 전환될 때document.getelementById()는 원래 인터페이스의 값을 가져옵니다.
문제 코드

//  1
<div id="test">aaa</div>
//  2
<div id="test">bbb</div>

//  ：
<transition name="card-fade">
 <router-view/>
</transition>
.card-fade-enter-active {
 animation: bounce-in 2s;
}

현상
페이지 1에서 페이지 2로 넘어갈 때document.get Element ById('test'), 시종일관 얻은 것은 aaa입니다.
반대로 페이지 2에서 페이지 1로 넘어갈 때document.get Element ById("test"), 항상 bbb를 받았습니다.
생각하다
귀신이 곡할 노릇이다, 문서.getElementById()에도 캐시가 있습니까?
그래서 나는 페이지 3에서document를 똑같이 시도했다.getelement ById('test'), 페이지 1에서 페이지 3으로 넘어가면aaa를 받습니다.
귀신이 곡할 노릇이군,dom는 소각되지 않겠나?
그러나 페이지 1이 다른 새 페이지 4로 넘어가고 3이 넘어가면document가 표시됩니다.get Element ById("test")=null입니다.
즉dom는 아무런 문제가 없이 확실히 존재하면 얻을 수 있고, 존재하지 않으면 비어 있다는 것이다.
원인
고개를 돌려 루트가 뛰는 것을 보았을 때transition은 무엇입니까?야 이 애니메이션으로 인한거야!!!
내 두 인터페이스를 전환할 때 애니메이션이 있기 때문에 페이지 1에서 페이지 2를 전환하는 1초 동안 get Element ById('test')는 확실히 두 개가 존재하고 첫 번째로 받았다.
반성하다
1. 페이지가 다르더라도 ID가 같은 노드는 나타나지 않도록 합니다.
2. 제어 스타일은 가능한 한 #id를 통과하지 않고 노드에 스타일을 추가합니다.class, id가 여러 가지 이유로 수정되어 대응하는 스타일을 잊어버리는 것을 방지합니다.
보충 지식: 문서.getElementById() 가져오기null
document.getelement ById () 가 null을 가져오는 가장 흔히 볼 수 있는 이유는 js 파일이 head 탭에 있기 때문이다
불러오는 순서 문제로 인해 get이 노드에 도착하지 않습니다.
해결 방법:
1. 바디 탭에서 js 파일을 가져올 수 있음
2. 도입 문장 에 defer=true 속성 추가
defer 속성은 페이지가 불러올 때까지 스크립트 실행을 지연시킬지 여부를 지정합니다.
이상의 이 평론 vue 중 문서.get Element By Id()가 받은 원치의 문제는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희도 많이 사랑해 주세요.