http://mwultong.blogspot.com/2006/05/html-tooltip-tag.html

HTML에서는 title 속성으로 말풍선을 만듭니다.
        var el = document.createElement("span");
        el.setAttribute("title", key);
        el.setAttribute("class", "dpCatLabel");
      //el.setAttribute("onclick", "alert('TEST');"); // DOESN'T WORK. onclick is not attribute.
      el.onclick=function(){alert("TEST");};
        var txt = document.createTextNode(label);
        el.appendChild(txt);

onclick 등은 이벤트라서 setAttribute로 붙일 수 없고,
el.onclick=function;  으로 붙이자.

[javascript] HTML DOM 지우기

프로그래밍/Web 2009. 12. 16. 10:25 Posted by galad
createElement로 생성한 노드들을 지울때, 특정 노드 밑에 딸린 노드들을 몽창 한번에 지우는 메소드가 없는 건지 못찾은 건지,
아무튼 parentNode에 딸린 노드들을 전부 찾아서(getElementsByTag), for 루프 돌면서 지우는데 절반만 지워져서 헤매다가 원인을 찾았음

function deleteNodes(parentNode, tag) {
    var nodes = parentNode.getElementsByTagName(tag);
    var length = nodes.length;
    
    // 이건 nodes가 실시간으로 줄어들면서 length 자체가 줄어든다.
    // 따라서 아래의 for문에서 기존 nodes의 갯수만큼 루핑하면서 0번만 계속 지움.
    // i번을 삭제하면 stack overflow 남
    /*for(var i = 0; i < nodes.length; i++) {
        var node = nodes[i];
        parentNode.removeChild(node);
    }*/
    
    for(var i = 0; i < length; i++) {
        var node = nodes[0];
        parentNode.removeChild(node);
    }
}

위에 써놓은 것처럼

for(var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    parentNode.removeChild(node);
}

nodes.length로 한계치를 정하면 for 문 안에서 자식 노드를 하나씩 지울 때마다 nodes.length 가 하나씩 줄어든다. 실시간 반영?!
그래서 length를 따로 저장하고 맨 처음 것만 계속 지웠음.

'프로그래밍 > Web' 카테고리의 다른 글

[javascript] HTML DOM 생성 후 이벤트 추가  (0) 2009.12.16
[jQuery] jQuery를 이용한 ajax  (0) 2009.12.16
[jQuery] jQuery를 이용한 팝업. div, layer  (0) 2009.12.16
[json] json 사용법  (0) 2009.12.15
[html] html 특수기호  (3) 2009.09.08

[html] html 특수기호

프로그래밍/Web 2009. 9. 8. 10:13 Posted by galad
출처: http://blog.eloitcube.co.kr/35

HTML 특수문자코드표

표현문자

숫자표현

문자표현

설명

-

&#00;-&#08;

-

사용하지 않음

space

&#09;

-

수평탭

space

&#10;

-

줄 삽입

-

&#11;-&#31;

-

사용하지 않음

space

&#32;

-

여백

!

&#33;

-

느낌표

"

&#34;

&quot;

따옴표

#

&#35;

-

숫자기호

$

&#36;

-

달러

%

&#37;

-

백분율 기호

&

&#38;

&amp;

Ampersand

'

&#39;

-

작은 따옴표

(

&#40;

-

왼쪽 괄호

)

&#41;

-

오른쪽 괄호

*

&#42;

-

아스트릭

+

&#43;

-

더하기 기호

,

&#44;

-

쉼표

-

&#45;

-

Hyphen

.

&#46;

-

마침표

/

&#47;

-

Solidus (slash)

0 - 9

&#48;-&#57;

-

0부터 9까지

:

&#58;

-

콜론

;

&#59;

-

세미콜론

<

&#60;

&lt;

보다 작은

=

&#61;

-

등호

>

&#62;

&gt;

보다 큰

?

&#63;

-

물음표

@

&#64;

-

Commercial at

A - Z

&#65;-&#90;

-

A부터 Z까지

[

&#91;

-

왼쪽 대괄호

\

&#92;

-

역슬래쉬

]

&#93;

-

오른쪽 대괄호

^

&#94;

-

탈자부호

_

&#95;

-

수평선

`

&#96;

-

Acute accent

a - z

&#97;-&#122;

-

a부터 z까지

{

&#123;

-

왼쪽 중괄호

|

&#124;

-

수직선

}

&#125;

-

오른쪽 중괄호

~

&#126;

-

꼬리표

-

&#127;-&#159;

-

사용하지 않음


&#160;

&nbsp;

Non-breaking space

¡

&#161;

&iexcl;

거꾸로된 느낌표

&#162;

&cent;

센트 기호

&#163;

&pound;

파운드

¤

&#164;

&curren;

현재 환율

&#165;

&yen;

|

&#166;

&brvbar;

끊어진 수직선

§

&#167;

&sect;

섹션 기호

¨

&#168;

&uml;

움라우트

&#169;

&copy;

저작권

ª

&#170;

&ordf;

Feminine ordinal

&#171;

&laquo;

왼쪽 꺾인 괄호

&#172;

&not;

부정


&#173;

&shy;

Soft hyphen

?

&#174;

&reg;

등록상표

&hibar;

&#175;

&macr;

Macron accent

°

&#176;

&deg;

Degree sign

±

&#177;

&plusmn;

Plus or minus

²

&#178;

&sup2;

Superscript two

³

&#179;

&sup3;

Superscript three

´

&#180;

&acute;

Acute accent

μ

&#181;

&micro;

Micro sign (Mu)

&#182;

&para;

문단기호

·

&#183;

&middot;

Middle dot

¸

&#184;

&cedil;

Cedilla

¹

&#185;

&sup1;

Superscript one

º

&#186;

&ordm;

Masculine ordinal

&#187;

&raquo;

오른쪽 꺾인 괄호

¼

&#188;

&frac14;

4분의 1

½

&#189;

&frac12;

2분의 1

¾

&#190;

&frac34;

4분의 3

¿

&#191;

&iquest;

거꾸로된 물음표

A

&#192;

&Agrave;

Capital A, grave accent

A

&#193;

&Aacute;

Capital A, acute accent

A

&#194;

&Acirc;

Capital A, circumflex accent

A

&#195;

&Atilde;

Capital A, tilde

A

&#196;

&Auml;

Capital A, dieresis or umlaut mark

A

&#197;

&Aring;

Capital A, ring (Angstrom)

Æ

&#198;

&AElig;

Capital AE diphthong (ligature)

C

&#199;

&Ccedil;

Capital C, cedilla

E

&#200;

&Egrave;

Capital E, grave accent

E

&#201;

&Eacute;

Capital E, acute accent

E

&#202;

&Ecirc;

Capital E, circumflex accent

E

&#203;

&Euml;

Capital E, dieresis or umlaut mark

I

&#204;

&Igrave;

Capital I, grave accent

I

&#205;

&Iacute;

Capital I, acute accent

I

&#206;

&Icirc;

Capital I, circumflex accent

I

&#207;

&Iuml;

Capital I, dieresis or umlaut mark

Ð

&#208;

&ETH;

Capital Eth, Icelandic

N

&#209;

&Ntilde;

Capital N, tilde

O

&#210;

&Ograve;

Capital O, grave accent

O

&#211;

&Oacute;

Capital O, acute accent

O

&#212;

&Ocirc;

Capital O, circumflex accent

O

&#213;

&Otilde;

Capital O, tilde

O

&#214;

&Ouml;

Capital O, dieresis or umlaut mark

×

&#215;

&times;

Multiply sign

Ø

&#216;

&Oslash;

width="130"Capital O, slash

U

&#217;

&Ugrave;

Capital U, grave accent

U

&#218;

&Uacute;

Capital U, acute accent

U

&#219;

&Ucirc;

Capital U, circumflex accent

U

&#220;

&Uuml;

Capital U, dieresis or umlaut mark

Y

&#221;

&Yacute;

Capital Y, acute accent

Þ

&#222;

&THORN;

Capital Thorn, Icelandic

ß

&#223;

&szlig;

Small sharp s, German (sz ligature)

a

&#224;

&agrave;

Small a, grave accent

a

&#225;

&aacute;

Small a, acute accent

a

&#226;

&acirc;

Small a, circumflex accent

a

&#227;

&atilde;

Small a, tilde

a

&#228;

&auml;

Small a, dieresis or umlaut mark

a

&#229;

&aring;

Small a, ring

æ

&#230;

&aelig;

Small ae diphthong (ligature)

c

&#231;

&ccedil;

Small c, cedilla

e

&#232;

&egrave;

Small e, grave accent

e

&#233;

&eacute;

Small e, acute accent

e

&#234;

&ecirc;

Small e, circumflex accent

e

&#235;

&euml;

Small e, dieresis or umlaut mark

i

&#236;

&igrave;

Small i, grave accent

i

&#237;

&iacute;

Small i, acute accent

i

&#238;

&icirc;

Small i, circumflex accent

i

&#239;

&iuml;

Small i, dieresis or umlaut mark

ð

&#240;

&eth;

Small eth, Icelandic

n

&#241;

&ntilde;

Small n, tilde

o

&#242;

&ograve;

Small o, grave accent

o

&#243;

&oacute;

Small o, acute accent

o

&#244;

&ocirc;

Small o, circumflex accent

o

&#245;

&otilde;

Small o, tilde

o

&#246;

&ouml;

Small o, dieresis or umlaut mark

÷

&#247;

&divide;

Division sign

ø

&#248;

&oslash;

Small o, slash

u

&#249;

&ugrave;

Small u, grave accent

u

&#250;

&uacute;

Small u, acute accent

u

&#251;

&ucirc;

Small u, circumflex accent

u

&#252;

&uuml;

Small u, dieresis or umlaut mark

y

&#253;

&yacute;

Small y, acute accent

þ

&#254;

&thorn;

Small thorn, Icelandic

y

&#255;

&yuml;

Small y, dieresis or umlaut mark


'프로그래밍 > Web' 카테고리의 다른 글

[jQuery] jQuery를 이용한 팝업. div, layer  (0) 2009.12.16
[json] json 사용법  (0) 2009.12.15
[servlet] servlet  (0) 2009.09.04
[jQuery] jQuery 예제 02  (0) 2009.09.04
[javascript] IE6.0 프레임 - 가로 스크롤바 버그  (0) 2009.08.21
참고: http://x1210.tistory.com/385
http://htmlcleaner.sourceforge.net/index.php

public String getResultCode(String resp) throws IOException {
        // create an instance of HtmlCleaner
        HtmlCleaner cleaner = new HtmlCleaner();

        // take default cleaner properties
        CleanerProperties props = cleaner.getProperties();
         
//        // customize cleaner's behaviour with property setters
//        props.setXXX(...);
       
        // Clean HTML taken from simple string, file, URL, input stream,
        // input source or reader. Result is root node of created
        // tree-like structure. Single cleaner instance may be safely used
        // multiple times.
        TagNode node = cleaner.clean(resp);

        // optionally find parts of the DOM or modify some nodes
//        TagNode[] myNodes = node.getElementsByName(MLBConstants.MCODE_RESULT_NAME, true);
        TagNode[] myNodes = node.getElementsByName("input", true);
//        // and/or
//        Object[] myNodes = node.evaluateXPath(xPathExpression);
//        // and/or
//        aNode.removeFromTree();
//        // and/or
//        aNode.addAttribute(attName, attValue);
//        // and/or
//        aNode.removeAttribute(attName, attValue);
//        // and/or
//        cleaner.setInnerHtml(aNode, htmlContent);
         
//        // serialize a node to a file, output stream, DOM, JDom...
//        new XXXSerializer(props).writeXmlXXX(aNode, ...);
//        myJDom = new JDomSerializer(props, true).createJDom(aNode);
//        myDom = new DomSerializer(props, true).createDOM(aNode);
       
        String resultCode = "";
       
        for(int i = 0; i < myNodes.length; i++) {
           
            System.out.println("name = " + myNodes[i].getAttributeByName("name"));
           
            if(myNodes[i].getAttributeByName("name").equals("result")) {
                resultCode = myNodes[i].getAttributeByName(MLBConstants.MCODE_RESULT_ATTRIBUTE);
                System.out.println(">>> value of result = " + resultCode);
            }
        }
       
        return MLBConstants.getMcodeRequestResultMessage(resultCode);
    }


html
                            <td nowrap style="width:225px;margin-bottom:1px;">
                                <s:select name="approvalStage" list="stageCodeList" listKey="key" listValue="value" headerKey="" headerValue="--선택(현재 상태)--" onchange="selectStageCode(this);"></s:select>
                            </td>
                            <td nowrap style="width:85px;margin-bottom:1px;" id="dpStageTd">
                                <div id="dpStage" style="display: none;"><img src="../images/button/btn_next.gif" align="middle"> 상용상태</div>
                            </td>
                            <td nowrap style="width:225px;margin-bottom:1px;">
                                <div id="dpStageSelect" style="display: none;"><s:select name="dpStageSelect" list="dpStageCodeList" listKey="key" listValue="value" headerKey="" headerValue="전체"></s:select></div>
                            </td>
                            <td align="right" nowrap style="margin-bottom:1px;">
                                <img id="searchButton" src="../images/button/btn_search.gif" align="middle" onClick="javascript:searchContent();" style="cursor:hand;">
                            </td>


script
    function selectStageCode(obj) {
        var STAGE_CODE_RELEASED = "<%=WorkflowCodeDef.STAGE_CODE_RELEASED%>";
       
        //alert(obj.value);
        if(obj.value == STAGE_CODE_RELEASED) { // 상용이면
            document.getElementById("dpStageTd").setAttribute("className", "subject");
            document.getElementById("dpStage").style.display="";
            document.getElementById("dpStageSelect").style.display="";
        }
        else {
            document.getElementById("dpStageTd").setAttribute("className", "");
            document.getElementById("dpStage").style.display="none";
            document.getElementById("dpStageSelect").style.display="none";
        }
    }