[Q]IE 와 FF 의 DOM Tree 차이

[송효진]

table 태그 사이에 form 태그를 껴넣는것은 정말 하고 싶지 않지만,
게시판 목록 처럼 나오고 한줄 한줄이 다른 폼일 경우 마땅한 대안이 없어서 그렇게 합니다.

즉
table
form
tr
td /td
/tr
/form
form
tr
td /td
/tr
/form
...
/table

이런식입니다.
각 input 항목에 이벤트를 걸어 다른 항목에 영향을 주도록 스크립트를 작성했는데,
각 이벤트마다 form id 를 넣어주려니 나중에 소스보기 했을때 흉하고,
태그에 너무 복잡하게 들어가서,
서버 스크립트의 도움 없이 자바스크립트 만으로 구성하려고

input 의 parent form 을 찾아내어
(tag.parentNode 를 따라가서 form 이 나올때 까지 루프)
다시 name 을 비교하게 해서 child 를 뽑아내게 작성했습니다.
문제는 FF 에서 위 예 같은 구조일 경우 form 태그가 input 의 직속 상위가 아니라는 것입니다.
DOM Inspector 로 보니 트리따라 올라가면 form 태그에 닿지 않습니다.
옆으로 비켜가네요.

input 태그에는 부모 form 이 뭔지 알 수 있는 속성이 있는것 같은데,
input 이 아닌태그도 form 을 알아낼 수 있어야
html에 노출되는 스크립트를 깔끔하게 정리할 수 있을것 같습니다.

전부터 문제를 인식하고 있었는데 이번에 개인 라이브러리를 정리하면서 다시 눈에 거슬려서 해결을 하고자 합니다.

행과 열을 딱 맞출 방법은 table 밖에 떠오르지 않습니다.
태그를 바꿀 다른 방법이나,
DOM Tree 를 맞출 방법이 있으면 조언 바랍니다.

감사합니다.

[hyeonseok]

문제 해경릉 위한 답변을 드릴 수 없어서 죄송합니다.

HTML 코드가 올바르지 않으면 어떠한 자바스크립트나 CSS도 정상적으로 작동을 할 것이라고 장담할 수 없습니다. 그리고 서버사이드의 도움없이 자바스크립트로 작업을 처리하는 것에는 한계가 있습니다. 자바스크립트는 어디까지나 사용편의 & UI이지 기능을 대체할 수는 없습니다.

제 생각에는 기능 부분이 너무 자바스크립트에 많이 의존 되어서 전체 기능이 구현되기가 힘든 상황 같습니다. HTML 부분을 올바르게 수정하는 것이 우선 필요할 것 같습니다.

[송효진]

그래서 태그를 바꿀 방법이라도 필요한 것입니다.
table 외에 행,렬을 맞추어 보여줄 방법이 있으면 알려주세요.

[makeittrue]

그래서 태그를 바꿀 방법이라도 필요한 것입니다.
table 외에 행,렬을 맞추어 보여줄 방법이 있으면 알려주세요.

각 셀에 해당하는 엘리먼트에 class을 지정하면 웬만큼 구현할 수 있습니다. 행과 열 모두 li를 이용하는 방법이 있겠고, 행은 li로 열은 table로 처리하는 방법이 있을 수 있습니다. 전자를 추천하지만, 어쩔 수 없이 후자를 이용해야하는 경우도 발생합니다.
예를 들면,
<ol>
<li><ul><li class="col1">컬럼1</li><li class="col2">컬럼2</li><li class="col3">컬럼3</li></ul></li>
<li><ul><li class="col1">컬럼1</li><li class="col2">컬럼2</li><li class="col3">컬럼3</li></ul></li>
<li><ul><li class="col1">컬럼1</li><li class="col2">컬럼2</li><li class="col3">컬럼3</li></ul></li>
</ol>

<ol>
<li><table><tr><td>컬럼1</td><td>컬럼2</td><td>컬럼3</td></tr></table></li>
<li><table><tr><td>컬럼1</td><td>컬럼2</td><td>컬럼3</td></tr></table></li>
<li><table><tr><td>컬럼1</td><td>컬럼2</td><td>컬럼3</td></tr></table></li>
</ol>

[송효진]

그러니까 저는 테이블처럼 열을 맞추는 방법이 알고 싶습니다.
위의 예제는 열이 비뚤어질것 같네요. 제가 이해를 못하는건가요?
각 열별로 일일히 class 를 먹여야 하는건지요.

[makeittrue]

그러니까 저는 테이블처럼 열을 맞추는 방법이 알고 싶습니다.
위의 예제는 열이 비뚤어질것 같네요. 제가 이해를 못하는건가요?
각 열별로 일일히 class 를 먹여야 하는건지요.

네, 각 열별로 class를 지정해야할 것 같습니다. 어차피 행이야 서버사이드에서 루프로 돌 것이고, html은 그리 복잡하지 않을 것입니다.
두번째 table 예에서 class가 빠졌군요.

[hyeonseok]

두가지 해결 방법이 있겠지만, 저라면 table 안에 form을 줄단위로 넣지 않고 하나의 form안에 table을 넣었을 것입니다. 테이블을 이용해서 표현해야 하는 데이터라면 비슷한 데이터들, 비슷한 기능이기 때문에 의미적으로 하나의 폼을 쓰는 것이 맞습니다. 기능때문에 폼을 나누는 것이 올바른 마크업이 아닌 케이스 같습니다.

기능을 바꾸기 힘들다면 div 나 span 가지고 table 비슷하게 보이게 구성할 수는 있지만 그다지 권장할 만한 것은 아닙니다.

Code: Select all

<ul class="article">
    <li>
        <form>
            <p>
                <span class="number"></span>
                <span class="subject"></span>
                <span class="name"></span>
                <span class="email"></span>
                <span class="date"></span>
                <span class="count"></span>
                <span class="function"></span>
            </p>
        </form>
    </li>
    <li>
        <form>
            <p>
                <span class="number"></span>
                <span class="subject"></span>
                <span class="name"></span>
                <span class="email"></span>
                <span class="date"></span>
                <span class="count"></span>
                <span class="function"></span>
            </p>
        </form>
    </li>
</ul>

Code: Select all

ul.article {
}
ul.article li {
    clear: both;
}
ul.article form {
    margin: 0;
}
ul.article form span.number {
    float: left;
    width: 60px;
}
...
...
...

이정도의 코드가 나올 것 같습니다. 하지만 HTML이나 CSS에 완전히 익숙하지 않으면 테이블보다는 다루기가 힘들 것입니다. 방법도 그다지 나이스 하지 못하고요.