집 > 기사 > 웹 프론트엔드 > JavaScript 문서 객체 모델-DOM 운영 기술

JavaScript 문서 객체 모델-DOM 운영 기술

黄舟원래의: 2017-01-20 14:48:501352검색

동적 스크립트

페이지의 <script> 요소를 사용하여 페이지에 JavaScript 코드를 삽입할 수 있습니다. 두 가지 방법이 있습니다. 하나는 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);

JavaScript 문서 객체 모델-DOM 운영 기술

위 결과에서 볼 수 있듯이 위 코드는 <script> 요소는 <body> 요소에 생성됩니다: </script>

<script type="text/javascript" src="demo.js"></script>

페이지로.

JavaScript 코드를 지정하는 또 다른 방법은 인라인입니다. 예를 들면 다음과 같습니다.

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function fn1(){alert(&#39;hello wolrd!&#39;)} fn1();"));
document.body.appendChild(script);

JavaScript 문서 객체 모델-DOM 운영 기술

위 코드는

코드:

<script type="text/javascript">
  function fn1(){alert(&#39;hello wolrd!&#39;)} fn1();
</script>

위 코드를 실행하면 "hello world!"라는 텍스트가 표시된 프롬프트 상자가 나타납니다.

Firefox, Safari, Chrome, Opera 브라우저에서는 위에서 동작하는 DOM 코드가 정상적으로 실행될 수 있습니다. 그러나 이전 버전의 IE 브라우저에서는 이러한 코드로 인해 오류가 발생합니다. 이전 버전의 IE 브라우저에서는 <script> 요소를 특수 요소로 간주하고 DOM이 하위 노드에 액세스하는 것을 허용하지 않습니다. 그러나 <script> 요소의 text 속성을 사용하여 JavaScript 코드를 지정할 수 있습니다. 예: </script>

var script = document.createElement("script");
script.type = "text/javascript";
script.text("function fn1(){alert(&#39;hello wolrd!&#39;)} fn1();");
document.body.appendChild(script);

위와 같이 코드를 수정한 후 IE, Firefox, Safari3.0, Chrome 및 Opera 브라우저가 실행됩니다. Safari 3.0 이전의 브라우저는 텍스트 속성을 올바르게 실행할 수 없지만 텍스트 노드를 사용하여 코드를 지정할 수 있습니다. 따라서 이전 버전의 브라우저를 지원해야 하는 경우 다음과 같은 코드를 작성할 수 있습니다.

var script = document.createElement("script");
script.type = "text/javascript";
var code = "function fn1(){alert(&#39;hello wolrd!&#39;)} fn1();";
try{
    script.appendChild(document.createTextNode(code));
}catch(e){
    script.text = code;
}

위 코드는 먼저 표준 DOM 텍스트 노드 방법을 시도합니다. 이전 버전의 IE 브라우저 외에도 다른 브라우저에서는 모두 이 방법을 지원합니다. 이 코드 줄에서 예외가 발생하면 이는 IE의 이전 버전이므로 text 속성을 사용해야 함을 의미합니다.

스크립트를 함수에 동적으로 추가하기 위한 코드를 캡슐화하고 다양한 매개변수를 통해 다양한 스크립트를 동적으로 로드할 수 있습니다.

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);
}

이 함수를 호출하려면 다음과 같이 하면 됩니다.

loadScript("function fn1(){alert(&#39;hello wolrd!&#39;)}");

이런 방식으로 로드된 코드는 전역 범위에서 실행되며 스크립트가 실행된 후 즉시 사용할 수 있습니다. 실제로 이 방식으로 코드를 실행하는 것은 전역 범위의 eval() 함수에 동일한 문자열을 전달하는 것과 같습니다.

동적 스타일

HTML 페이지에 CSS 스타일을 포함할 수 있는 요소는 일반적으로 두 가지입니다. 하나는 외부 소스의 파일을 포함하는 데 사용되는 < ;style> 요소는 포함된 스타일을 지정하는 데 사용됩니다. 동적 스크립트와 마찬가지로 동적 스타일은 페이지가 로드될 때 존재하지 않는 스타일입니다. 동적 스타일은 페이지 로드가 완료된 후 페이지에 동적으로 추가되는 스크립트입니다. 예를 들어 다음 예는 다음과 같습니다.

var link = document.createElement("link");
link.rel = "stylesheet"
link.type = "text/css";
link.href = "styles.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

JavaScript 문서 객체 모델-DOM 운영 기술

위 코드는 모든 주요 브라우저에서 정상적으로 실행될 수 있습니다. 모든 브라우저에서 일관된 동작을 보장하려면

요소 대신 요소를 추가해야 합니다.

또한 외부 스타일 파일을 로드하는 프로세스는 비동기식입니다. 즉, 스타일을 로드하고 JavaScript 코드를 실행하는 프로세스에 고정된 순서가 없다는 의미입니다.

스타일을 정의하는 또 다른 방법은

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);

위 코드가 실행된 후

요소에 다음 노드를 동적으로 추가할 수 있습니다.

<style type="text/css">
  background:#f00;
</style>

以上的代码可以在Firefox、Safari、Chrome和Opera浏览器中正常运行，在旧版本的IE浏览器中会报错。旧版本的IE浏览器会将

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;}";
}

同样，我们也可以将动态添加样式的代码封装到一个函数中，通过不同的参数来动态加载不同的样式。

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);    
}

JavaScript对表格的操作

在JavaScript中，为了使我们能够方便的构建表格，HTML DOM为表格的

、和提供了一些属性和方法。

表格的

元素的属性和方法有：

caption：保存

tBodies：是一个

元素的HTMLCollection。

tFoot：保存

元素的引用的指针。

tHead：保存

元素的引用的指针。

rows：是表格中所有行的HTMLCollection。

createTHead()：创建

元素，将它放入表格中，并返回其引用。

createTFoot()：创建

元素，将它放入表格中，并返回其引用。

createCaption()：创建

deleteTHead()：删除

元素。

deleteTFoot()：删除

元素

deleteCaption()：删除

deleteRow(pos)：删除指定位置的表格行。

insertRow(pos)：向rows集合中指定位置插入一行。

表格的

元素的属性和方法有：

rows：保存着

元素中行的HTMLCollection。

deleteRow(pos)：删除指定位置的表格行。

insertRow(pos)：向rows集合中指定位置插入一行。

表格的

元素的属性和方法有：

cells：保存着

元素中单元格的HTMLCollection。

deleteCell(pos)：删除指定位置的单元格。

insertCell(pos)：向cells集合中指定位置插入一个单元格，并返回新插入单元格的引用。

使用上面的这些属性和方法，可以使我们轻松的使用JavaScript来创建表格，例如下面的代码：

//创建表格
var table = document.createElement("table");
table.border = 1;
table.width = "100%";
//创建tbody
var tbody = document.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);

使用上面的代码可以动态的在页面中创建一个表格。其中在创建表格行的时候，通过

元素调用了insertCell()方法，并传入参数0（表示将插入的行放在什么位置上）。执行了这一行代码后，会自动创建一个表格行，并将它插入到元素的0位置上，此时就可以通过tbody.rows[0]来引用新插入的行。

创建单元格的方式也与创建表格行的方式相同。通过

元素来调用insertCell()方法，并传入要放置单元格的位置。然后就可以通过tbody.rows[0].cells[0]来引用新插入的单元格。

关于NodeList

理解NodeList和NamedNodeMap、HTMLCollection是从整体上理解DOM的关键所在。这3个集合都是动态的，也就是说，每当文档结构发生了变化，它们始终都会保存最新的信息。从本质上来说，所有的NodeList对象都是在访问DOM文档时实时运行的查询。例如下面的代码会导致死循环的出现：

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
    var div = document.createElement("div");
    document.body.appendChild(div);
}

上面的代码首先获取了所有

元素的HTMLCollection，保存在一个变量中。由于这个集合是动态的，所以只要有新的

被添加到页面中，新的

元素就会被添加到这个集合中。这样导致的后果是div.length值是不断变化的，每次循环会在页面中添加一个

元素，length的值也会递增。这样i

如果我们要迭代一个NodeList，最好将length属性初始化为第二个变量，然后将迭代器和这个变量做比较，例如：

var divs = document.getElementsByTagName("div");
for(var i = 0,len = divs.length; i < len; i++){
    var div = document.createElement("div");
    document.body.appendChild(div);
}

以上就是JavaScript文档对象模型-DOM操作技术的内容，更多相关内容请关注PHP中文网（www.php.cn）！

성명：

이전 기사：JavaScript 문서 개체 모델-DocumentType 유형다음 기사：JavaScript 문서 개체 모델-DocumentType 유형

JavaScript 문서 객체 모델-DOM 운영 기술

관련 기사