JavaScript_javascript 기술을 기반으로 동적 Dom 생성-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript_javascript 기술을 기반으로 동적 Dom 생성

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:26 PM

동적 스크립트

페이지의 <script> 요소를 사용하여 페이지에 자바스크립트 코드를 삽입할 수 있습니다. 두 가지 방법이 있습니다. 하나는 src 속성을 통해 외부 JS 파일을 참조하는 것이고, 다른 하나는 이 요소를 사용하여 js 코드 조각을 포함하는 것입니다. 소위 동적 스크립트란 페이지가 로드될 때 스크립트가 존재하지 않는다는 것을 의미하며, 향후 특정 시점에 DOM을 수정하여 스크립트를 동적으로 추가할 수 있습니다. HTML 요소를 조작하는 것과 마찬가지로 동적 스크립트를 만드는 방법에는 외부 파일을 삽입하는 방법과 JavaScript 코드를 직접 삽입하는 방법이 있습니다. </script>

동적으로 로드된 외부 JavaScript 코드는 다음 코드와 같이 즉시 실행될 수 있습니다.

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "demo.js";
document.body.appendChild(script);

위 결과에서 볼 수 있듯이 위 코드는

요소에 <script> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> <script type="text/javascript" src="demo.js"></script> </pre> 페이지에 <script>를 추가하기 위해 마지막 코드 줄이 실행되기 전에는 외부 스크립트 파일이 다운로드되지 않습니다. <p> JavaScript 코드를 지정하는 또 다른 방법은 인라인입니다. 예를 들면 다음과 같습니다. <p> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> var script = document.createElement("script"); script.type = "text/javascript"; script.appendChild(document.createTextNode("function fn1(){alert('hello wolrd!')} fn1();")); document.body.appendChild(script); </pre> <p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201512/2015128143006554.jpg?2015118143027?x-oss-process=image/resize,p_40" class="lazy" id="theimg" alt="" baiduimageplusrect="null" baiduimageplusstatus="2" onclick="window.open(this.src)" /> 위 코드는 <body> 요소에 JavaScript 코드 조각을 삽입합니다. <p> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> <script type="text/javascript"> function fn1(){alert('hello wolrd!')} fn1(); </script> </pre> 위 코드를 실행하면 "hello world!"라는 텍스트가 표시된 프롬프트 상자가 나타납니다. <p> Firefox, Safari, Chrome, Opera 브라우저에서는 위에서 동작하는 DOM 코드가 정상적으로 실행될 수 있습니다. 그러나 이전 버전의 IE 브라우저에서는 이러한 코드로 인해 오류가 발생합니다. 이전 버전의 IE 브라우저에서는 <script> 요소를 특수 요소로 처리하며 DOM이 하위 노드에 액세스하는 것을 허용하지 않습니다. 그러나 JavaScript 코드는 <script> 요소의 텍스트 속성을 사용하여 지정할 수 있습니다. 예: <p> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> var script = document.createElement("script"); script.type = "text/javascript"; script.text("function fn1(){alert('hello wolrd!')} fn1();"); document.body.appendChild(script); </pre> 위와 같이 코드를 수정하면 IE, Firefox, Safari3.0, Chrome, Opera 브라우저에서 실행 가능합니다. Safari 3.0 이전의 브라우저는 텍스트 속성을 올바르게 실행할 수 없지만 텍스트 노드를 사용하여 코드를 지정할 수 있습니다. 따라서 이전 버전의 브라우저를 지원해야 하는 경우 다음과 같은 코드를 작성할 수 있습니다. <p> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> var script = document.createElement("script"); script.type = "text/javascript"; var code = "function fn1(){alert('hello wolrd!')} fn1();"; try{ script.appendChild(document.createTextNode(code)); }catch(e){ script.text = code; }</pre> 위 코드는 먼저 표준 DOM 텍스트 노드 방식을 시도합니다. 이전 버전의 IE를 제외한 다른 브라우저에서는 이 방식을 지원하기 때문입니다. 이 코드 줄에서 예외가 발생하면 이는 IE의 이전 버전이므로 text 속성을 사용해야 함을 의미합니다. <p> 스크립트를 함수에 동적으로 추가하는 코드를 캡슐화하고 다양한 매개변수를 통해 다양한 스크립트를 동적으로 로드할 수 있습니다. <p> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> function loadScript(code){ var script = document.createElement("script"); script.type = "text/javascript"; try{ script.appendChild(document.createTextNode(code)); }catch(e){ script.text = code; } document.body.appendChild(script); } </pre> 이 함수를 호출하려면 다음과 같이 하면 됩니다. <p> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> loadScript("function fn1(){alert('hello wolrd!')}"); </pre> 이런 방식으로 로드된 코드는 전역 범위에서 실행되며 스크립트가 실행된 후 즉시 사용할 수 있습니다. 실제로 이 방식으로 코드를 실행하는 것은 전역 범위의 eval() 함수에 동일한 문자열을 전달하는 것과 같습니다. <p> <p><strong>다이나믹한 스타일<span style="color: #0000ff"> 일반적으로 HTML 페이지에 CSS 스타일을 포함할 수 있는 두 가지 요소가 있습니다. 하나는 외부 소스의 파일을 포함하는 데 사용되는 <style> 포함된 스타일을 지정합니다. 동적 스크립트와 마찬가지로 동적 스타일은 페이지가 로드될 때 존재하지 않는 스타일입니다. 동적 스타일은 페이지 로드가 완료된 후 페이지에 동적으로 추가되는 스크립트입니다. 예를 들면 다음과 같습니다. <p> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> var link = document.createElement("link"); link.rel = "stylesheet" link.type = "text/css"; link.href = "styles.css"; var head = document.getElementsByTagName("head")[0];</pre> <p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201512/2015128143341450.jpg?2015118143357?x-oss-process=image/resize,p_40" class="lazy" id="theimg" alt="" baiduimageplusrect="null" baiduimageplusstatus="2" onclick="window.open(this.src)" /> 위 코드는 모든 주요 브라우저에서 정상적으로 실행될 수 있습니다. 모든 브라우저에서 일관된 동작을 보장하려면 <body> 요소 대신 <link> 요소를 추가해야 합니다. <p> 또 한 가지 주목해야 할 점은 외부 스타일 파일을 로드하는 프로세스가 비동기식이라는 점입니다. 즉, 스타일을 로드하고 JavaScript 코드를 실행하는 프로세스에 고정된 순서가 없다는 의미입니다. <p> 스타일을 정의하는 또 다른 방법은 <style> 요소를 사용하여 포함된 CSS 스타일을 포함하는 것입니다. 예를 들어 다음 코드는 다음과 같습니다. <p> <div class="jb51code"> <pre class='brush:php;toolbar:false;'> var style = document.createElement("style"); style.type = "text/css"; style.appendChild(document.createTextNode("body{background:#f00;}")); var head = document.getElementsByTagName("head")[0]; head.appendChild(link); </pre> 위 코드가 실행된 후 <head> 요소에 다음 노드를 동적으로 추가할 수 있습니다. <p> <div class="jb51code"> <p>以上的代码可以在Firefox、Safari、Chrome和Opera浏览器中正常运行，在旧版本的IE浏览器中会报错。旧版本的IE浏览器会将<style>元素看做一个特殊的节点，不允许访问它的子节点。要解决旧版本IE的问题，就是访问元素的styleSheet属性，该属性又有一个cssText属性，可以接受CSS代码。例如下面的代码： <div class="jb51code"> <pre class='brush:php;toolbar:false;'> var style = document.createElement("style"); style.type = "text/css"; try{ style.appendChild(document.createTextNode("body{background:#f00;}")); }catch(e){ style.styleSheet.cssText = "body{background:#f00;}"; } </pre> <p>同样，我们也可以将动态添加样式的代码封装到一个函数中，通过不同的参数来动态加载不同的样式。 <div class="jb51code"> <pre class='brush:php;toolbar:false;'> function loadStyle(code){ var style = document.createElement("style"); style.type = "text/css"; try{ style.appendChild(document.createTextNode(code)); }catch(e){ style.styleSheet.cssText = code; } var head = document.getElementsByTagName("head")[0]; head.appendChild(style); } </pre> <p><strong><span style="color: #0000ff">JavaScript对表格的操作 <p>在JavaScript中，为了使我们能够方便的构建表格，HTML DOM为表格的<table>、<tbody>和<tr>提供了一些属性和方法。 <p>表格的<table>元素的属性和方法有： <p>caption：保存<caption>元素的引用的指针。<br /> tBodies：是一个<tbody>元素的HTMLCollection。<br /> tFoot：保存<tfoot>元素的引用的指针。<br /> tHead：保存<thead>元素的引用的指针。<br /> rows：是表格中所有行的HTMLCollection。<br /> createTHead()：创建<thead>元素，将它放入表格中，并返回其引用。<br /> createTFoot()：创建<tfoot>元素，将它放入表格中，并返回其引用。<br /> createCaption()：创建<caption>元素，将它放入表格中，并返回其引用。<br /> deleteTHead()：删除<thead>元素。<br /> deleteTFoot()：删除<tfoot>元素<br /> deleteCaption()：删除<caption>元素<br /> deleteRow(pos)：删除指定位置的表格行。<br /> insertRow(pos)：向rows集合中指定位置插入一行。 <p><span style="color: #ff0000"><strong>表格的<tbody>元素的属性和方法有： <p><br /> <p>rows：保存着<tbody>元素中行的HTMLCollection。<br /> deleteRow(pos)：删除指定位置的表格行。<br /> insertRow(pos)：向rows集合中指定位置插入一行。 <p><strong><span style="color: #ff0000">表格的<tr>元素的属性和方法有： <p>cells：保存着<tr>元素中单元格的HTMLCollection。<br /> deleteCell(pos)：删除指定位置的单元格。<br /> insertCell(pos)：向cells集合中指定位置插入一个单元格，并返回新插入单元格的引用。 <p>使用上面的这些属性和方法，可以使我们轻松的使用JavaScript来创建表格，例如下面的代码： <div class="jb51code"> <pre class='brush:php;toolbar:false;'> //创建表格 vatabldocument.createElement("table"); table.borde1; table.widt"100%"; //创建tbody vatboddocument.createElement("tbody"); table.appendChild(tbody); //创建第一个表格行 tbody.insertRow(0); tbody.rows[0].insertCell(0); tbody.rows[0].cells[0].appendChild(document.createTextNode("单元1-1")); tbody.rows[0].insertCell(1); tbody.rows[0].cells[1].appendChild(document.createTextNode("单元2-1")); //创建第二个表格行 tbody.insertRow(1); tbody.rows[1].insertCell(0); tbody.rows[1].cells[0].appendChild(document.createTextNode("单元1-2")); tbody.rows[1].insertCell(1); tbody.rows[1].cells[1].appendChild(document.createTextNode("单元2-2")); //将表格添加到文档中 document.body.appendChild(table) </pre> <p>使用上面的代码可以动态的在页面中创建一个表格。其中在创建表格行的时候，通过<tbody>元素调用了insertCell()方法，并传入参数0（表示将插入的行放在什么位置上）。执行了这一行代码后，会自动创建一个表格行，并将它插入到<tbody>元素的0位置上，此时就可以通过tbody.rows[0]来引用新插入的行。 <p>创建单元格的方式也与创建表格行的方式相同。通过<tr>元素来调用insertCell()方法，并传入要放置单元格的位置。然后就可以通过tbody.rows[0].cells[0]来引用新插入的单元格。 <p>关于NodeList <p>理解NodeList和NamedNodeMap、HTMLCollection是从整体上理解DOM的关键所在。这3个集合都是动态的，也就是说，每当文档结构发生了变化，它们始终都会保存最新的信息。从本质上来说，所有的NodeList对象都是在访问DOM文档时实时运行的查询。例如下面的代码会导致死循环的出现： <div class="jb51code"> <pre class='brush:php;toolbar:false;'> var divs = document.getElementsByTagName("div"); for(var i = 0; i < divs.length; i++){ var div = document.createElement("div"); document.body.appendChild(div); } </pre> <p>上面的代码首先获取了所有<div>元素的HTMLCollection，保存在一个变量中。由于这个集合是动态的，所以只要有新的<div>被添加到页面中，新的<div>元素就会被添加到这个集合中。这样导致的后果是div.length值是不断变化的，每次循环会在页面中添加一个<div>元素，length的值也会递增。这样i < divs.length条件就永远不会成立，导致死循环的发生。 <p>如果我们要迭代一个NodeList，最好将length属性初始化为第二个变量，然后将迭代器和这个变量做比较，例如： <div class="jb51code"> <pre class='brush:php;toolbar:false;'> var divs = document.getElementsByTagName("div"); for(var i = 0,len = divs.length; i < len; i++){ var div = document.createElement("div"); document.body.appendChild(div); } </pre> <p>由于len中保存了divs.length在循环开始时的一个快照，因此会避免死循环情况的发生。 <p>更多示例： <div class="jb51code"> <pre class='brush:php;toolbar:false;'> function sAlert(str){ var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=100;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor="#c51100";//提示窗口的边框颜色 titlecolor="#c51100";//提示窗口的标题颜色 var sWidth,sHeight; sWidth=screen.width; sHeight=screen.height; var bgObj=document.createElement("div"); bgObj.setAttribute('id','bgDiv'); bgObj.style.position="absolute"; bgObj.style.top="0"; bgObj.style.background="#cccccc"; bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; bgObj.style.opacity="0.6"; bgObj.style.left="0"; bgObj.style.width=sWidth + "px"; bgObj.style.height=sHeight + "px"; bgObj.style.zIndex = "10000"; document.body.appendChild(bgObj); var msgObj=document.createElement("div") msgObj.setAttribute("id","msgDiv"); msgObj.setAttribute("align","center"); msgObj.style.background="white"; msgObj.style.border="1px solid " + bordercolor; msgObj.style.position = "absolute"; msgObj.style.left = "50%"; msgObj.style.top = "50%"; msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; msgObj.style.marginLeft = "-225px" ; msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; msgObj.style.width = msgw + "px"; msgObj.style.height =msgh + "px"; msgObj.style.textAlign = "center"; msgObj.style.lineHeight ="25px"; msgObj.style.zIndex = "10001"; msgObj.style.position = "absolute"; var box=document.getElementById(str); var title=document.createElement("h4"); title.setAttribute("id","msgTitle"); title.setAttribute("align","right"); title.style.margin="0"; title.style.padding="3px"; title.style.background=bordercolor; title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; title.style.opacity="0.75"; title.style.border="1px solid " + bordercolor; title.style.height="18px"; title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; title.style.color="white"; title.style.cursor="pointer"; title.onmousedown=function(){startDrag(this,'msgDiv')}; title.onmouseup=function(){stopDrag(this,'msgDiv')}; title.onmousemove=function(){drag('msgDiv')}; var closer=document.createElement("div"); closer.onclick=function(){ CloseReturn(); document.body.appendChild(box); box.style.display = "none"; document.body.removeChild(bgObj); document.getElementById("msgDiv").removeChild(title); document.body.removeChild(msgObj); }; closer.innerHTML="确定"; document.body.appendChild(msgObj); document.getElementById("msgDiv").appendChild(title); document.getElementById("msgTitle").appendChild(closer); box.style.display="inline"; document.getElementById("msgDiv").appendChild(box); ShowReturn(); }</pre> <p>html dom ツリー: <p style="text-align: center"><img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/file_images/article/201512/2015128143651942.gif?201511814375?x-oss-process=image/resize,p_40" class="lazy" id="theimg" onclick="window.open(this.src)" baiduimageplusstatus="2" baiduimageplusrect="null" alt="" /></script>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

Dreamweaver Mac版

시각적 웹 개발 도구

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는