Heim > Artikel > Web-Frontend > JavaScript-Dokumentobjektmodell-DOM-Betriebstechnologie

JavaScript-Dokumentobjektmodell-DOM-Betriebstechnologie

黄舟Original: 2017-01-20 14:48:501352Durchsuche

Dynamisches Skript

Wir können JavaScript-Code in die Seite einfügen, indem wir das <script>-Element verwenden. Es gibt zwei Möglichkeiten: Eine besteht darin, über das src-Attribut auf eine externe JS-Datei zu verweisen, und die andere darin, dieses Element zu verwenden, um einen Teil des JS-Codes einzuschließen. Das sogenannte dynamische Skript bedeutet, dass das Skript beim Laden der Seite nicht vorhanden ist. Das Skript kann dynamisch hinzugefügt werden, indem das DOM zu einem bestimmten Zeitpunkt in der Zukunft geändert wird. Genau wie beim Bearbeiten von HTML-Elementen gibt es zwei Möglichkeiten, dynamische Skripte zu erstellen: das Einfügen externer Dateien und das direkte Einfügen von JavaScript-Code. </script>

Dynamisch geladener externer JavaScript-Code kann sofort ausgeführt werden, wie zum Beispiel der folgende Code:

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

JavaScript-Dokumentobjektmodell-DOM-Betriebstechnologie

Wie Sie aus den Ergebnissen oben sehen können, ist The Der obige Code generiert einen <script>-Knoten im <body>-Element: </script>

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

Es ist zu beachten, dass vor der Ausführung der letzten Codezeile zum Hinzufügen von <script> lädt keine externen Skriptdateien herunter. </script>

Eine andere Möglichkeit, JavaScript-Code anzugeben, ist zum Beispiel:

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-Dokumentobjektmodell-DOM-Betriebstechnologie

Der obige Code wird in das

-Element eingefügt Stück JavaScript-Code:

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

Nach der Ausführung des obigen Codes erscheint ein Eingabeaufforderungsfeld mit dem Text „Hallo Welt!“.

In den Browsern Firefox, Safari, Chrome und Opera kann der oben betriebene DOM-Code normal ausgeführt werden. Aber in älteren Versionen von IE-Browsern verursachen diese Codes Fehler. Ältere Versionen von IE-Browsern behandeln das <script>-Element als spezielles Element und erlauben DOM keinen Zugriff auf seine untergeordneten Knoten. Sie können jedoch das Textattribut des <script>-Elements verwenden, um JavaScript-Code anzugeben, zum Beispiel: </script>

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

Nachdem Sie den Code wie oben beschrieben geändert haben, in IE, Firefox, Safari3.0, Chrome und Opera-Browser Alle können ausgeführt werden. Obwohl Browser vor Safari 3.0 das Textattribut nicht korrekt ausführen können, können sie Textknoten verwenden, um Code anzugeben. Wenn Sie also ältere Versionen von Browsern unterstützen müssen, können Sie Code wie diesen schreiben:

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

Der obige Code versucht zunächst die Standard-DOM-Textknotenmethode, da außer alten Versionen von IE-Browsern auch andere Alle Browser unterstützen diese Methode. Wenn diese Codezeile eine Ausnahme auslöst, bedeutet dies, dass es sich um eine alte Version des IE handelt und das Textattribut verwendet werden muss.

Wir können den Code zum dynamischen Hinzufügen von Skripten in eine Funktion kapseln und verschiedene Skripte über verschiedene Parameter dynamisch laden.

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

Um diese Funktion aufzurufen, können Sie wie folgt vorgehen:

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

Der so geladene Code wird im globalen Gültigkeitsbereich ausgeführt und steht sofort nach dem zur Verfügung Skript wird ausgeführt. Tatsächlich ist die Ausführung des Codes auf diese Weise dasselbe wie die Übergabe derselben Zeichenfolge an die Funktion eval() im globalen Bereich.

Dynamischer Stil

Es gibt normalerweise zwei Elemente, die CSS-Stile in HTML-Seiten einbinden können: eines ist das -Element, das zum Einbinden von Dateien aus externen Quellen verwendet wird < ;style>-Element, das zum Angeben eingebetteter Stile verwendet wird. Ähnlich wie dynamische Skripte sind dynamische Stile Stile, die beim Laden der Seite nicht vorhanden sind. Dynamische Stile sind Skripte, die der Seite dynamisch hinzugefügt werden, nachdem die Seite vollständig geladen wurde. Zum Beispiel das folgende Beispiel:

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-Dokumentobjektmodell-DOM-Betriebstechnologie

Der obige Code kann in allen gängigen Browsern normal ausgeführt werden. Es ist zu beachten, dass das -Element anstelle des

-Elements hinzugefügt werden muss, um ein konsistentes Verhalten in allen Browsern sicherzustellen.

Beachten Sie außerdem, dass das Laden externer Stildateien asynchron erfolgt, was bedeutet, dass es beim Laden von Stilen und beim Ausführen von JavaScript-Code keine feste Reihenfolge gibt.

Eine andere Möglichkeit, Stile zu definieren, besteht darin, das Element

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

Nachdem der obige Code ausgeführt wurde, können die folgenden Knoten dynamisch zum

-Element hinzugefügt werden:

<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）！

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-Dokumentobjektmodell-DocumentType-TypNächster Artikel：JavaScript-Dokumentobjektmodell-DocumentType-Typ

In Verbindung stehende Artikel

Mehr sehen