http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html, 여기에서 기사를 읽으러 다시 오시면 확실히 더 깊은 이해를 갖게 될 것입니다. 여기서는 몇 가지 개념적인 내용을 소개하기 때문에 초보자에게는 다소 어려울 수 있는 아래 예시를 살펴보세요!
document<br> <br> <br><h1>CSS 데모</h1> <br><p>저는 미인을 좋아합니다. 특히 키가 큰 미인을 좋아합니다.<br></body> ; <br></html> <br><br><br>
</p>
</div>
<br>이 문서의 DOM 표현은 다음과 같습니다. <p><span style="FONT-SIZE: 14px; COLOR: #000000; FONT-FAMILY: tahoma,arial,helvetica,sans-serif">
</span></p>
<p>
<img alt="" src="http://files.jb51.net/upload/201204/20120407022003742.jpg"></p>사진은 HTML 문서의 트리를 나타냅니다.<p><span style="max-width:90%">
</span></p>모든 DOM 트리 구조는 다양한 유형의 Node 객체로 표현됩니다. firstChild, lastChild, nextSibling, PreviousSibling 및 ParentNode 속성은 노드 <p><span style="FONT-SIZE: 14px; FONT-FAMILY: tahoma,arial,helvetica,sans-serif">,appendChild 트리를 순회하는 방법을 제공합니다. ,removeChild, replacementChildh 및 insertBefore와 같은 메소드는 문서에 노드를 추가하거나 문서에서 노드를 삭제할 수 있습니다. </span>이해가 안 되셔도 괜찮습니다. 다음으로 이해를 돕기 위해 다양한 예를 들어보겠습니다. <span style="FONT-SIZE: 14px; FONT-FAMILY: tahoma,arial,helvetica,sans-serif"><span style="COLOR: #ff0000"></span>1. 먼저 CSS로 미화된 목록을 생성합니다</span></p>
<br><div class="codetitle">
<span>코드를 복사합니다<a style="CURSOR: pointer" data="96045" class="copybut" id="copybut96045" onclick="doCopy('code96045')"><u></u> 코드는 다음과 같습니다. : </a></span> </div><style type="text/css"> <div class="codebody" id="code96045">body{ margin:0px; padding:0px } <br>#container{font-family:tahoma;font- 크기:14px ;border:solid 1px #99ffcc; 너비:200px;height:140px; float:left; } <br>#container ul{list-style:none;padding:1px 0px 0px 0px;} <br># 컨테이너 ul li{ border-bottom:solid 1px #99ffcc; 여백:0px;height:27px;} <br>#container ul li a{배경-색상:회색;텍스트-장식:none;display:block; border-left :solid 10px red;margin:0px; padding:5px 0px 5px 10px;} <br>#container ul li a:hover{ background-color:red; color:#000000 } <br></style> ; <BR><BR> <BR>2. div 요소를 추가합니다. </div><BR><BR>코드를 복사합니다.<div class="codetitle"><span><a style="CURSOR: pointer" data="74019" class="copybut" id="copybut74019" onclick="doCopy('code74019')"> <U></U> </a><div id="container"> <ul id="list"> </div><li><a href="#">홈< ;/a></ li> <div class="codebody" id="code74019"><li id="myblog"><a href="#">내 블로그</a></li> <br><li> ;a href="#" >스포츠</a></li> <br><li><a href="#">뉴스</a></li> ;li><a href ="#">Contane</a></li> <br></ul> <br></div> <br><br> <br>3. 이제 다음 그림이 표시됩니다. <br>
<br><br>
</div>4. 위 그림에 따라 전체 요소 수를 가져옵니다<br><br><p><img alt="" src="http://files.jb51.net/upload/201204/20120407022003340.jpg"></p>코드를 복사합니다<br><div class="codetitle">
<span> 코드는 다음과 같습니다: <a style="CURSOR: pointer" data="13540" class="copybut" id="copybut13540" onclick="doCopy('code13540')"><u> </u>var Tools = {} </a>Tools.getElementCount = function(e){ </span>var count =0 </div>elementTotal(e); >document.table.txt.value = "element:" count; <div class="codebody" id="code13540">function elementTotal(e) <br>{ <br>if(e.nodeType == 1) count <br>var children = e.childNodes ; <br>for(var i = 0;i<children.length;i ) <BR>{ <BR>elementTotal(children[i]) <BR>} <BR>}; <BR> <BR>참고: 모두<button type ="button" onclick = "alert(Tools.getElementCount(document))">를 추가하여 요소 수를 얻을 수 있습니다</button> 텍스트는 모두 대문자<br><br><br><br><br>코드 복사<br>
</div>
<br> 코드는 다음과 같습니다.<br><br> <div class="codetitle">Tools.ModifyElement = 함수 수정(e){ <span>if(e .nodeType == 3) <a style="CURSOR: pointer" data="94977" class="copybut" id="copybut94977" onclick="doCopy('code94977')">e.data = e.data.toUpperCase() <u>else </u>{ </a>for(var i = e .firstChild;i!=null;i=i.nextSibling) </span>수정(i) </div>} <div class="codebody" id="code94977">
<br><br>참고: <button type ="button" onclick = "Tools.ModifyElement(document)">대문자</button> <br><br>효과: <br>
<p><img alt="" src="http://files.jb51.net/upload/201204/20120407022003464.jpg"> </p> 6. 목록 정렬 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="77223" class="copybut" id="copybut77223" onclick="doCopy('code77223')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code77223"> <br>Tools.documentSort = function(e){ <br>var textArray = [] <br>if(typeof e == "string") e = document.getElementById(e) <br>for; (var x = e.firstChild; x!= null;x=x.nextSibling) <br>if(x.nodeType == 1) textArray.push(x) <br>textArray.sort(function(n,m) ){ <br>var s = n.firstChild.firstChild.data; <br>var t = m.firstChild.firstChild.data; <br>if(s>t) return <br>else if(s< ;t) return 1; else return 0; <BR>}) <BR><BR></div>참고: <button type ="button"을 추가할 수 있습니다 = "Tools.documentSort('list' )">정렬</버튼> <br><br>효과: <br>
<br><p><span style="COLOR: #99cc00; FONT-FAMILY: tahoma,arial,helvetica,sans-serif"><img alt="" src="http://files.jb51.net/upload/201204/20120407022003368.jpg"></span>7. 목록 항목을 동적으로 삽입(하위 노드) </p>
<br><div class="codetitle"><span><a style="CURSOR: pointer" data="3927" class="copybut" id="copybut3927" onclick="doCopy('code3927')">코드 복사<u></u></a> 코드는 다음과 같습니다. </span></div> <div class="codebody" id="code3927">Tools.insertElement = function(n,e){ <br>if(typeof n == "string") n = document.getElementById(n); 🎜>var li = document.createElement(e); <br>var a = document.createElement("a") <br>a.setAttribute("href","#") <br>var txt = document .createTextNode("HotBlog"); <br>li.appendChild(a); <br>var parent = n.parentNode; <br>parent.insertBefore(li,n); <br> }; <br><br><br>참고: <버튼 유형 ="button" onclick="Tools.insertElement('myblog','li');">삽입</ 버튼>을 추가할 수 있습니다. ; <BR></div>효과: <BR>
<br><br><BR>8. 자바스크립트 클래스를 사용하여 동적으로 문서 생성<P>1. 스타일시트<IMG alt="" src="http://files.jb51.net/upload/201204/20120407022003425.jpg"></P><BR><BR><div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="23817" class="copybut" id="copybut23817" onclick="doCopy('code23817')"><U> 코드는 다음과 같습니다. </U></a> </span>.tooltip{Background:url('2.jpg'); border:solid 1px #99ffcc; width:200px;height:200px;}//모두가 원합니다. 여기에서 사진을 클릭하세요. </div>.toolcontent{ background-color:#ffffff; border:solid 1px #99ff00; padding:5px; color:#000000;} <div class="codebody" id="code23817"><BR> <BR>2. javascript class<BR></div><BR><BR><div class="codetitle">코드 복사<span><a style="CURSOR: pointer" data="90704" class="copybut" id="copybut90704" onclick="doCopy('code90704')"><U> 코드는 다음과 같습니다.</U></a> </span>function Tooltip() </div> { <div class="codebody" id="code90704">this.tooltip = document.createElement("div"); <BR>this.tooltip.style.position = "absolute"; <BR>this.tooltip.className = "tooltip"; content = document.createElement( "div"); <BR>this.content.style.position = "relative"; <BR>this.content.className = "toolcontent" <BR>this.tooltip.appendChild(this. 콘텐츠); <BR> } <BR>Tooltip.prototype.show = function(text,x,y) <BR>{ <BR>this.content.innerHTML = 텍스트 <BR>this.tooltip.style.left = x "px"; <BR>this.tooltip.style.top = y "px"; <BR>this.tooltip.style.visibility = "표시" <BR>if(this.tooltip.parentNode != 문서. body) <BR>document .body.appendChild(this.tooltip); <BR>Tooltip.prototype.hide = function(){ this.tooltip.style.visibility ="hidden";}; >var t = new Tooltip (); <BR>function hide() <BR>{ <BR>t.hide() <BR>} <BR>function show() <BR>{ <BR>t.show ("hello ",300 ,0); <BR>} <BR>function init() <BR>{ <BR>document.operator.show.onclick = 표시 <BR>document.operator.hide.onclick = 숨기기 ; <BR>} <BR><BR> <BR>참고: 위를 사용하려면 다음 단계도 완료해야 합니다. 1. 본문에 onload=init();2를 추가합니다. <BR><form name = "연산자"> <br><입력 유형 = "버튼" 값 = "숨기기" 이름 = "숨기기"/><br><입력 유형 = "버튼" 값 = "표시" 이름 = "표시 "> <br> </form> </div>효과: (보이는 것을 숨깁니다.) <br>
<br><br><br><br>9. 동적으로 스타일 추가 및 삭제 <br><br>1. 스타일시트 <p><img alt="" src="http://files.jb51.net/upload/201204/20120407022003714.jpg"><img alt="" src="http://files.jb51.net/upload/201204/20120407022003406.jpg"></p>
<br>코드 복사<br> 🎜><br> 코드는 다음과 같습니다. <div class="codetitle">
<div class="codebody" id="code90041"> <br>.container{font-family:tahoma;font-size:14px;border:solid 1px #99ffcc; 너비:200px;높이:140px;float:왼쪽;} <br>.container ul{list-style:none;padding:1px 0px 0px 0px; 여백:0px;} <br>.container ul li{ border-bottom:solid 1px #99ffcc; 여백:0px;높이:27px;} <br>.container ul li a{배경색:회색;텍스트 장식:없음;디스플레이:블록; 테두리 왼쪽:단색 10px 빨간색;여백:0px; 패딩:5px 0px 5px 10px;} <br>.container ul li a:hover{배경색상:빨간색; 색상:#ffffff; } <br>
</div> <br>2、工具函数（动态添加、删除样式） <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="65474" class="copybut" id="copybut65474" onclick="doCopy('code65474')"><u>复主代码</u></a></span> 代码아래: </div>
<div class="codebody" id="code65474"> <br>var CSSclass = {}; <br>CSSclass.is = function(e,c){ <br>if(typeof e == "string") e = document.getElementById(e); <br>var 클래스 = e.className; <br>if(!classes)는 false를 반환합니다. <br>if(classes == c)는 true를 반환합니다. <br>return e.className.search("\b" c "\b*") != -1; <br>}; <br>CSSclass.add = function(e,c){ <br>if(typeof e == "string") e = document.getElementById(e); <br>if(CSSclass.is(e,c))return; <br>//if(e.className) c="" c; <br>e.className = c; <br>}; <br>CSSclass.remove = function(e,c){ <br>if(typeof e == "string") e = document.getElementById(e); <br>//e.id = e.id.replace(new RegExp("\b" e.id "\b\s*","g"),""); <br>e.className = e.className.replace(new RegExp("\b" c "\b\s*","g"),""); <br>}; <br>
</div> <br>3、현재中加入如下元素 <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="39175" class="copybut" id="copybut39175" onclick="doCopy('code39175')"><u>复主代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code39175"> <br><div id="con"> <br><ul id="list"> <br><li><a href="#">홈</a></li> <br><li id="myblog"><a href="#">내 블로그</a></li> <br><li><a href="#">스포츠</a></li> <br><li><a href="#">뉴스</a></li> <br><li><a href="#">콘텐츠</a></li> <br></ul> <br><button type="button" name ="add" onclick = "CSSclass.add('con','container');">动态添加样式</button> <br><button type="button" name ="remove" onclick ="CSSclass.remove('con','container');">动态删除样式</button> <br>
</div> <br>效果： <br><br>
<p><img alt="" src="http://files.jb51.net/upload/201204/20120407022003809.jpg"><br><span style="max-width:90%">没添加样式的样子<br></span><img alt="" src="http://files.jb51.net/upload/201204/20120407022003960.jpg"><br><span style="max-width:90%">加了样式之后。</span></p>small结：Dom文档操작、内联样式、动态设置样式等就给大家分享到这里吧! 🎜><br>（很多没有备注，大家有问题可以给我留言!) </div>
</div>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>성명：</span><div>본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.</div></div></div><div class="nphpSytBox"><span>이전 기사：<a class="dBlack" title="jQuery UI 대화 상자는 친숙한 팝업 대화 상자 구현을 생성합니다." href="https://m.php.cn/ko/faq/19010.html">jQuery UI 대화 상자는 친숙한 팝업 대화 상자 구현을 생성합니다.</a></span><span>다음 기사：<a class="dBlack" title="jQuery UI 대화 상자는 친숙한 팝업 대화 상자 구현을 생성합니다." href="https://m.php.cn/ko/faq/19012.html">jQuery UI 대화 상자는 친숙한 팝업 대화 상자 구현을 생성합니다.</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>관련 기사</h2><em><a href="https://m.php.cn/ko/article.html" class="bBlack"><i>더보기</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/ko/faq/1609.html" title="Bootstrap 목록 그룹 구성 요소에 대한 심층 분석" class="aBlack">Bootstrap 목록 그룹 구성 요소에 대한 심층 분석</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1640.html" title="JavaScript 함수 커링에 대한 자세한 설명" class="aBlack">JavaScript 함수 커링에 대한 자세한 설명</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/1949.html" title="JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)" class="aBlack">JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2248.html" title="Angularjs는 WeChat UI(weui)를 통합합니다." class="aBlack">Angularjs는 WeChat UI(weui)를 통합합니다.</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/ko/faq/2351.html" title="JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술" class="aBlack">JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！</p></div><div class="footermid"><a href="https://m.php.cn/ko/about/us.html">회사 소개</a><a href="https://m.php.cn/ko/about/disclaimer.html">부인 성명</a><a href="https://m.php.cn/ko/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
