bd.childNodes[1].childNodes.length;//1 子节点个数 bd.childNodes[1].childNodes[0].nodeName;// 节点名称 #text bd.childNodes[1].childNodes[0].nodeValue;//节点值 first paragraph
快速访问DOM
通过childNodes,parentNode,nodeName,nodeValue以及attributes,可以访问文档任意的节点了。但是在实际运用过程中，文本节点是比较讨厌的。如果文本改变了，有可能就影响脚本了。还有如果DOM树足够的深入，那么访问起来的确有些不方便。幸好我们可以用更为方便的方法来访问节点。这些方法是
getElementsByTagName() getElementsByName() getElementById()
首先说下getElementsByTagName()
通过一个标签名称(tag name)来获取一个html元素的集合。例子如下
document.getElementsByTagName('p').length;//3
因为返回的是个集合，我们可以用过数组下标的形式来访问或者通过item方法。比较一下还是推荐用数组的访问方法。更简单一些。
document.getElementsByTagName('p')[0];// <p> document.getElementsByTagName('p').item(0);//和上面的结果一样 document.getElementsByTagName('p')[0].innerHTML;//first paragraph
访问元素的属性，可以用attributes集合。但是更简单的方法是直接作为一个属性来访问就行。看个例子
document.getElementsByTagName('p')[2].id;//closer
要注意的是，class属性不能正常的使用。。要用className。因为class在javascript规范中是保留字。
document.getElementsByTagName('p')[0].className;//opener
我们可以用如下方法访问页面所有元素
<span>document.getElementsByTagName('*').length;//9</span>
注意：在IE早期的版本不支持上述方法。可以用document.all来取代。IE7已经支持了，但是返回的是所有节点(node)，而不仅仅是元素节点(element nodes)。
Siblings, Body, First, Last Child
nextSibling和previousSibling是两个比较方便访问DOM的方法。用来访问相邻的节点的。例子如下
var para = document.getElementById('closer') para.nextSibling;//"\n" para.previousSibling;//"\n" para.previousSibling.previousSibling;//<p> para.previousSibling.previousSibling.previousSibling;//"\n" para.previousSibling.previousSibling.nextSibling.nextSibling;// <p>
body 用来访问body元素的。
document.body;//<body>
firstChild 和lastChild 。firstChild是和childNodes[0]一样.lastChild和 childNodes[childNodes.length - 1]一样。
遍历DOM
通过以上的学习，我们可以写个函数，用来遍历DOM
function walkDOM(n) { do { alert(n); if (n.hasChildNodes()) { walkDOM(n.firstChild) } } while (n = n.nextSibling) } walkDOM(document.body);//测试
修改节点
下面来看看DOM节点的修改。
先获取要改变的节点。
var my = document.getElementById('closer');
非常容易更改这个元素的属性。我们可以更改innerHTML.
my.innerHTML = 'final';//final
因为innerHTML可以写入html，所以我们来修改html。
my.innerHTML = '<em>my</em> final';//<em>my</em> fnal
em标签已经成为dom树的一部分了。我们可以测试一下
my.firstChild;//<em> my.firstChild.firstChild;//my
我们也可以通过nodeValue来改变值。
my.firstChild.firstChild.nodeValue = 'your';//your
修改样式
大部分修改节点可能都是修改样式。元素节点有style属性用来修改样式。style的属性和css属性是一一对应的。如下代码
my.style.border = "1px solid red";
CSS属性很多都有破折号("-")，如padding-top，这在javascript中是不合法的。这样的话一定要省略波折号并把第二个词的开头字母大写，规范如下。 margin-left变为marginLeft。依此类推
my.style.fontWeight = 'bold';
我们还可以修改其他的属性，无论这些属性是否被初始化。
my.align = "right"; my.name = 'myname'; my.id = 'further'; my;//<p>
创建节点