DOM 트리에 요소를 추가하자마자 즉시 읽을 수 있습니까?

Question

document.createElement을 사용하여 동적으로 DIV를 만들고 내부 텍스트를 추가하고 높이와 너비를 결정하려고한다고 가정합니다. DIV를 DOM 트리에 추가하기 전에 offsetWidth 및 offsetHeight과 같은 속성이 0임을 예상 할 수 있습니다. 프로그래밍 방식으로 트리에 추가되면 해당 속성을 즉시 "준비"상태로 만들거나 재 페인트/리플 로우가 지연되어 나중에 발생하는 환경이 있습니까?

textDiv = document.createElement("div"); 
textDiv.innerHTML = "some dynamically created string"; 
console.log(textDiv.offsetWidth); // 0 
document.body.appendChild(textDiv); 
console.log(textDiv.offsetWidth); // OK? 

나는 대답이 뭔가를 할 것이라고 생각 "자바 스크립트 인터프리터가 단일 스레드이고에 appendChild에 의해 트리거 다시 그리기/리플 이벤트가 스레드의 일부이며 다음 문장에 계속하기 전에 완료"... 누군가 내 이해를 확인할 수 있습니까?

이 Opera article에는 내가 찾고있는 것이 많지만, 오페라 특유의 특징이 명확하지 않습니다. 어쨌든 어플리케이션 개발자가 offsetWidth에 액세스하는 것과 같은 측정을 할 때 필요한 리필/리플 로우가 올바르게 발생한다고 가정 할 수있는 것처럼 보입니다.

Answer 1

거기 것처럼

즉시 귀하의 요소가 DOM에 추가 될 때, 그것은 액세스 가능해야한다 처음부터. 간단하고 간단한 DOM 조작은 동기식입니다.

제한 시간, 간격 및 Ajax 도입을 시작할 때는주의하십시오.

Answer 2

내가 아는 한, 모든 자바 스크립트 기능 또는 속성이 이미 DOM 트리에있는 요소에서 작동 한 후에 만 ​​DOM 트리에 추가 된 후에 만 ​​읽을 수 있습니다.

나는 두 경우 모두 시도하고 밝혀졌다 다음 잘 작동하는 것 :

<SCRIPT> 
window.onload = function() { 
textDiv = document.createElement("div"); 
textDiv.innerHTML = "some dynamically created string"; 
alert(textDiv.offsetWidth); // 0 
document.body.appendChild(textDiv); 
alert(textDiv.offsetWidth); // OK? 
};