document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1];
得到一个元素
然而，这样遍历文档实在是太麻烦了。因为Level 1 DOM设计的目标就是允许你修改整个DOM树，所以你必须准确的知道DOM树的结构，这会很快导致一些问题。
所以还有一些方法能够很快的到达你想要的元素。只要你到达了这里，就可以遍历整个DOM树的每一个节点。
让我们继续前面的例子。你想要到达元素B。最简单的办法就是直接跳过去。通过document.getElementByTagName你就能很快的创建一个包含文档内的所有B标签的数组。假设我们的B是第一个，那么你就可以简单的写：
复制代码 代码如下:
var x = document.getElementsByTagName('B')[0]
x就包含了元素节点B。首先你命令浏览器得到整个文档的所有元素B(document.getElementByTagName(‘B')) ,然后你选择了第一个文档的第一个元素B([0])，就得到了你想要的。
你也可以写：
复制代码 代码如下:
var x = document.getElementsByTagName('P')[0].lastChild;
现在你先到了文档的第一个段落P（假设我们的P是第一个元素），然后到达p的最后一个子元素。
最好的能准确到达元素并且不需要DOM结构的办法就是给B一个ID：
<P>This is a <B>paragraph</B></P>现在你就可以简单的写：
复制代码 代码如下:
var x = document.getElementById('hereweare');
元素B就存储在了x里。
修改一个节点
现在我们已经到达了节点，就可以做一些修改了。假设我们想把加粗的文字部分修改为'bold bit of text'。我们需要访问正确的元素然后修改它的nodeValue。现在正确的元素不是元素B而是他的子元素text node：我们想改变的是文字，不是元素。所以可以写：
复制代码 代码如下:
document.getElementById('hereweare').firstChild.nodeValue='bold bit of text';
元素就改变了。
你可以通过nodeValue来修改任何文本节点或者参数。比如你可以修改段落的ALIGN参数。这也是非常的简单，先找到需要的元素（在这个例子中是B元素的父元素），然后使用setAttribute()方法来设置你想要的值：
复制代码 代码如下:
function test2(val) {
if (document.getElementById && document.createElement)
{
node = document.getElementById('hereweare').parentNode;
node.setAttribute('align',val);
}
else alert('Your browser doesn\'t support the Level 1 DOM');
}
创建和删除元素
修改元素固然有用，但是还是不如创建你需要的元素然后插入到现有的文档中。我可以很简单的在这个段落后面添加一个HR元素然后很简单的删除它。
创建元素使用下面的方法:
var x=document.createElemnt(‘HR')
这样HR就创建并且存储在x中。第二步就是把x插入到文档之中。我写了一个ID是inserthere的SPAN，我们就把它插入到这。所以我们使用appendChild()方法：
复制代码 代码如下:
document.getElementById('inserthrhere').appendChild(x);
删除它稍稍有点麻烦。我先创建一个临时变量node来存储SPAN，然后我告诉他移除他的第一个子元素：
复制代码 代码如下:
var node=document.getElementById(‘inserthere');
node.removeChild(node.childNode[0]);
同样的方法我们也可以创建一个新的元素然后添加在ID是hereweare的B元素上。
复制代码 代码如下:
var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);
你可以试一试，你会注意到用老的办法可能不会移除新加的文本，那是因为他们已经成为分离的两部分了：
<B>
------------
paragraph A new text node
has been appended!
(可以通过normalize()来把他们合并，但是IE5不支持）
我不打算告诉你怎么移除它，自己练习会比较有收获
翻译地址：
转载请保留以下信息
作者：北玉(tw:@rehawk)
您可能感兴趣的文章: