JavaScript操作DOM结构

DOM是文档对象模型，也就是引用程序接口，这个接口针对HTML或者是XML的，我们知道在我们的文档页面中，是以树节点的形式呈现的，所以当我们要获取，增加，或者删除其中的节点的时候，我们应该怎么做？我们的JS为我们提供了节点层次和DOM处理技术。让我们一起来看一下吧。

一、节点层次

节点层次可以分为九种类型，每个节点都拥有它特定的方法和特点，而且节点与节点之间都有某种关系。有的节点以节点之间构成树结构，所以文档节点就是说这个文档的根节点。以我们的html文档为例,html元素标签就是这个文档的根节点。

二、DOM操作技术

以上的九个节点就是为DOM操作提供方便,使得DOM操作比较简明。我们DOM操作的时候是通过在脚本上完成的，那怎么用同样的方法处理脚本呢。

1.动态脚本

引入脚本有两种方式，插入外部文件和直接插入JavaScript代码。

以下这个方法是动态新建和加载外部文件。这里我写了一个方法，把它封装起来。

例如：

function loadScript(url){ 
var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = url; 
document.body.appendChild(script); 
}
loadScript("client.js");

另外一个方法就是动态加载脚本代码。考试在这里ie浏览器它不允许DOM访问指节点。所以要使用text属性来指定JavaScript代码。所以我们在这里就要分情况啦。下面封装了一个方法,需要动态加载的脚本代码，就以字符串的形式作为参数。

例如：

function loadScriptString(code){ 
var script = document.createElement("script"); 
script.type = "text/javascript"; 
try { 
script.appendChild(document.createTextNode(code)); // 可以DOM访问节点浏览器。
} catch (ex){ 
script.text = code; // 不可以访问节点的浏览器,使用text来指定代码，因为脚本代码就是script标签的文本。
} 
document.body.appendChild(script); // 加到document文档中
} 

loadScriptString("function sayHi(){alert('hi');}");

2.动态样式

动态加入样式也是有两种方法，外部加载文件和动态创建元素。在这里，动态加载外部文件就不多说啦，和上面动态加载脚本文件是一样的道理。需要注意的是，动态创建样式，需要把链接加到头部元素标签head里面。所以我们还要取到head标签的位置，再在头部head的位置上加链接。

同样的，如果动态加载样式代码，在ie浏览器中，也是不允许访问子节点的，会抛出错误，所以在这里我们要分情况。在这里我们使用样式表styleSheet的cssText属性。

function loadStyles(url){ 
var link = document.createElement("link"); 
link.rel = "stylesheet"; // 文件样式表。
link.type = "text/css"; // 类型
link.href = url; // 文件路径。
var head = document.getElementsByTagName("head")[0]; // 第一个头部文件的位置。
head.appendChild(link); // 把链接加到头部标签里面。
}

loadStyles("styles.css");


function loadStyleString(css){ 
var style = document.createElement("style"); 
style.type = "text/css"; 
try{ 
style.appendChild(document.createTextNode(css)); // 在除了ie浏览器的其他浏览器中
} catch (ex){ 
style.styleSheet.cssText = css; // 在ie浏览器中。
} 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(style); 
}