<html>
<head>
<title>DOMcheck</title>
</head>
<body>
<a herf="#">click here</a>
<br>
<input type="test"></input>
<input type="button" value="here~"></input>
<body>
</html>
树形结构解析
PS：理论上br不是个节点，但我不确定，希望知道的人告诉我下~。
1.文件始终是根节点，获得document节点可以直接使用document.documentElement或者document.body来获得。
2.script也是节点，凡是<>里面的，都是节点，包括注释。
3.节点的名字，也就是类似hear title这些，是节点的tagName。
对于一个从一个结点获取别的节点的方法，无非是向上，向下，或者平行三个方向，具体可以查看上面给出的网站中DOM Node对象的属性和方法，我就不一一列举了。（上面的很些东西在IE里是不可用的，具体要在测试后考虑如何使用。）
大概看了DOM中节点的各个方法后，我们做一个小的应用：
用户点击时，可以添加打开或者闭合子选项。
复制代码 代码如下:
<html>
<head>
<title>DOM check</title>
<script type="text/javascript" >
var ifopen=false;
function get(element){
return document.getElementById(element);
}
function crea(element){
return document.createElement(element);
}
function openlist(){
var titl=get("chapter1");
if(get("sub1")==null){
var s=crea("span")
s.setAttribute("id","sub1");
}
else
s=get("sub1");
ifopen=!ifopen;
if(ifopen){ // 没打开的话
s.innerHTML="<br><a href='#L1' >list1</a>"+
"<br><a href='#L2' >list2</a>"+"<br><a href='#L3' >list3</a>";
titl.appendChild(s);
}else{
var de= document.getElementById("sub1");
de.parentNode.removeChild(de) ;
}
}
</script>
</head>
<body >
<span>
<a href="#">chapter 1</a>
</span>
<br><br><br><br>
<span>
<p>babababababbabbaba</p>
</span>
<span>
<p>babababababbabbaba</p>
</span>
<span>
<p>babababababbabbaba</p>
</span>
<body>
</html>
各浏览器测试无误。
当然，这个效果可以通过很多方法实现，这个只是为了学习如果通过DOM控制NODE。
补充一点：结点除了可以添加删除等外，还可以克隆，函数就是cloneNode，除了可以setAttribute外，也可以附件事件，比如这个结点有onclick之类的事件，可以使用addEvent这个函数来实现。具体我就不再写了，道理都是一样的~。
您可能感兴趣的文章: