JavaScript 및 jQuery를 사용한 DOM 조작

001 1 , 요소 노드 생성

002 기존 자바스크립트 방식, 요소 노드 생성

003 var a = document.createElement("p")

004 jQuery에서 노드를 생성하는 방법은 다음과 같습니다.

005 $('< p>< /p>')

006 createElement()와 마찬가지로 생성된 새 요소 노드는 그렇지 않습니다. 문서에 자동으로 추가됩니다.

007 문서에 추가하고 싶다면 jQuery에서 add()나 insertAfter() 메소드나 before() 메소드를 사용하면 됩니다.

008 예:

009 var a = $('< p>< /p>')

010 $('body').append ( a);//body 요소 끝에 추가합니다.

011

012

013 2. 텍스트 노드 생성:

014 Traditional javascript 메소드, 텍스트 노드 생성

015 var b = document.createTextNode("my deco");

016 일반적으로 텍스트 노드 생성과 요소 노드 생성은 함께 사용됩니다.

017 예:

018 var mes = document.createTextNode("hello world");

019 var Container = document.createElement("p")

020 Container.appendChild (mes);

021 document.body.appendChild(container);

022

023 jQuery에서 노드를 생성할 필요는 없습니다. 문제:

024 $('< p>hello world< /p>')

025 createElement()와 마찬가지로 생성된 새 요소 노드가 문서에 자동으로 추가되지 않습니다. .

026 문서에 추가하고 싶다면 jQuery에서 add()나 insertAfter() 메소드나 before() 메소드를 사용하면 됩니다.

027 예:

028 var a = $('< p>hello world< /p>')

029 $('body'). 추가(a);//body 요소 끝에 추가합니다.

030

031 3. 노드 복사

032 기존 자바스크립트 방식, 노드 복사:

033 예:

034 var mes = document.createTextNode("hello world");

035 var Container = document.createElement("p")

036 컨테이너.appendChild(mes);

037 document.body.appendChild(container);

038 var newpara = 컨테이너.cloneNode(true);//true와의 차이 및 false

039 document.body.appendChild(newpara)

040 참고:

041 true: < p>aaaa<

042 false: < p>< /p>만 복제되며, 내부 텍스트는 복제되지 않습니다.

043 파이어버그를 이용해서 보실 수 있습니다.

044

045 jQuery의 노드 복사:

046 var a = $('< p>hello world< /p>'); >047 $('body').append(a);

048 var clone_a = a.clone()

049 $('body').append(clone_a); 🎜>

050

051 createElement()와 마찬가지로 복사된 새 요소 노드는 문서에 자동으로 추가되지 않습니다.

052 문서에 추가하고 싶다면 jQuery에서 add()나 insertAfter() 메소드나 before() 메소드를 사용하면 됩니다.

053 또 다른 참고 사항: 복제 후 ID가 동일하면 .attr("id","new_id")를 사용하여 새 노드의 ID를 변경하는 것을 잊지 마세요.

054 " endChild () :

059 요소에 하위 노드를 추가하고 끝에 새 노드를 삽입합니다.

060 var 컨테이너 = document.createElement("p")

061 document.body.appendChild(container)

062

063 insertBefore() :

064 이름에서 알 수 있듯이 대상 노드 앞에 새 노드를 삽입합니다.

065 Element.insertBefore( newNode , targerNode );

066

067 jQuery에 노드를 삽입하는 것은 javascript에서 제공하는 것보다 훨씬 더 쉽습니다.

068 예:

069 .append()

070 .appendTo()

071 .prepend()

072 .prepend To()

073 .after()

074 .insertAfter()

075 .before()

076 .insertBefore()

077 그래서 예 DOM 작업의 단순화도 jquery의 주요 특징 중 하나입니다.

078

079

080 5, 노드 삭제

081 기존 자바스크립트 방법, 노드 삭제:

082 예:

083 var b = document.getElementById("b");

084 var c = b.parentNode;

085 c.removeChild(b); 🎜>086

087 jQuery에서 노드 삭제:

088 예:

089 $('#test2').remove()

090

091 6. 노드 교체

092 기존 javascript 방법, 노드 교체:

093 예:

094 Element.repalceChild( newNode , oldNode );

095 oldNode는 Element의 하위 노드여야 합니다.

096

097 jQuery의 교체 노드:

098 예:

099 $("< p>test1을 교체하세요! < / p> ;").replaceAll("#test1");

100

101 7, 속성 설정, 속성 가져오기

102 기존 javascript 방법, 속성 설정, 속성 가져오기:

103 예:

104 setAttribute();//Set

105 var a = document.createElement(“p”)

106 a.setAttribute("title","my deco");

107 이전에 title 속성이 있었는지 여부에 관계없이 미래 값은 my 데모가 됩니다.

108

109 getAttribute();//Get

110 var a =document.getElementById("cssrain")

111 var b = a.getAttribute("title");

112 가져올 때 속성이 없으면 빈 값을 반환합니다.

113

114 jQuery에서 속성 설정, 속성 가져오기:

115 예:

116 $("#test1").attr({ "class" : "test" , "title" : "TestDemo!" });

117 $("#test1").attr("class");

118

119 8. 노드 찾기

120 노드 쌍 찾기 jQuery는 매우 간단합니다.

121 jQuery에서 가장 흥미로운 점은 일반적으로 선택기로 알려진 검색 노드입니다.

122 예:

123 $ ('#id')

124 $('.class')

125 $('tag')

126 $('tag.class')

127 $('#id tag')

128 $('tag#id')

129 $('#id:visible')

130 $('#id .class')

131 $('.class .class')

132 ....

위는 DOM 입니다 JavaScript 및 jQuery 작업 내용, 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 참고하세요!