자료구소시간에 닥치고 듣기만한게 개 후회되네
dom tree를 새 객체 트리로 만들고 싶은데 빡세다
<html>
<head>
<meta charset="utf-8">
<title>가나다</title>
</head>
<body>
</body>
</html>
이걸
{
name:'html',
children:[
{
name:'head',
children:[
{
name:'meta',
children:null
},
{
name:'title',
children:null
}
]
},
{
name:'body',
children:null
}
]
}
이리 만들려면 어떻게 짜야하냐
루트노드를 만들고 <*>오면 재귀적으로 하위노드 넣고 <*/>가 오면 재귀를 끝내면 될것이오
dom을 string으로 접근하는건 포기하였소, 그리하면 <br>이나 <input>같이 단일 태그 걸러내야 한다오 게다가 script태그 내부에 동적으로 태그 생성하는 문자열하고 비교연산자가 걸리적 거린다오
왜그렇게 만들어야함?
가상 DOM을 만들 생각이오?
맞소, 그래서 그걸 JSON.stringify() 할려고 하는데 node와 Element는 하면 빈 객체로 반환된다오
새 원소를 넣다 빼는게 빈번하면 꽤 어려울 것이오..
그런게 아니라면 그냥 정규식으로 태그 거르는게 어떻소?
그래서 지금 죽을맛이오, 노드이름하고 자식배열로만 이루어진객체면 충분한데 그것조차 어렵다오...
정규식으로 거르는것도 해봤는데 역시 위와같은 이유로 매우 더러워진다오
단일태그 목록을 만들고 그걸로 정규식을 쓴다면 될것이오
예전에 그 존레식이쓴 닌자비술? 그 책에서 커스텀셀렉터 구현부분에서 본 것 같은데 지금은 그 책이 없다오.. 도서관이 있다면 찾아보시면 될 것이오
마크업 짜는사람이 님이고 언제나 올바르게 작성할 수 있으면 <*> </*> 이것만 캡쳐하고 <*/> 이것만 버리면 크게 어려울건 없을것 같소.. 따로 목록을 만들지 않더라도
목록보단 tree형식의 하나의 객체를 원하오,하나의 그래프로 시각화 예정이기에 부모자식간의 관계 위주라오
게다가 딴사람이 짠걸 가져오는것이고 모든 페이지에서 먹혀야 되기때문에 오류가 없어야됨
마크업을 스택해두고 </*>가 나왔을때 pop을 하는데 pop한 <*>형태의 마크업이 지금 </*>이랑 짝이 안맞으면 앞에 나온 <*>형태의 마크업이 사실은 <*/>형태의 마크업인데 잘못입력한 상황이오
이때는 그냥 버리고 짝이 맞는 마크업이 나올때까지 pop하면 될것같소.. 크게 어려울건 없어보이오
애초에 <*></*>조차 개판인 마크업은 페이지 자체가 제대로 뜨지않을테니
고맙소 일단 그리시도해보리다
encode(e) { if ( !e ) { return;} var json = []; for ( var i=0; i < e.children.lenth ; i++) { arr.push( encode(e.children[i] );} return { name: e.tagName, children : data}; }