Dom's manipulation techniques

1.1 Dynamic Scripting

Dynamically loaded external JS files can be run immediately. The difficulty is how do you know that the script is loaded? Can be detected by an event. IE treats <script> element specificity and does not allow the DOM to access its child nodes. Use the Text property of the element to specify the JS code.

1.2 Dynamic Styles

IE treats <style> element specificity and does not allow the DOM to access its child nodes. Use the Stylesheet property of the element to specify the code. Beware of IE's Stylesheet property, which can cause the browser to crash when repeatedly set and set to NULL.

1.3 Operating Tables

To facilitate the creation of tables, Htmldom adds properties and methods to the <table>, <tbody>, and <tr> elements. Using these properties and methods, it is more convenient to manipulate the tables.

1.4 Using NodeList

Understanding NodeList and its "close relatives" Namenodemap and Htmlcollection is the key to understanding DOM as a whole. These three collections are "dynamic".

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

This code will be a dead loop because the value of I and the value of Divs.length grow synchronously. As modified to the following form:

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

1.6 Summary

The DOM is composed of various nodes.

1) The most basic node type is nodes, which is used to represent a separate part of the document in an abstract way, and all other types inherit from it.

2) The document type represents the entire documentation, which is the root node of a set of hierarchical nodes in JS, the Document object is an instance of the document type.

3) The element node represents all HTML or XML elements in the document.

4) Additional node types that represent text content, annotations, document types, and so on.

The operation of accessing the DOM still has some complexity when it comes to handling <script> and <style> elements. Some browsers treat them differently from other elements. Causes some problems when using innerhtml and creating new elements. Manipulating the DOM in JS is a very expensive operation and should be minimized.

Dom's manipulation techniques