首页 > 代码库 > DOM使用
DOM使用
DOM树模型
document
|-html
|-head
|-....
|-body
|-.....
要解析页面的前提是要拿到一个对象，然后利用树之间前后的关系进行对象的遍历和操作。
在DHTML的帮助文档当中每个对象有属性、行为、集合、事件、滤镜、方法、对象、样式等描述
1、在属性中，属性的名称有两列，第一列是HTML中的标签名称，第二列是DOM的名称（用于操作对象），而且HTML中有的标签，DOM中都有，HTML中没有的DOM的也有新增。
每个对象在DOM中又称作节点，属性值中有一些节点的基本属性，例如：
<!--获取节点属性--><script type="text/javascript">function getAtribute(){ var divObj = document.getElementById("divId").nextSibling; document.write("nodeName:"+divObj.nodeName+"--nodeType:"+divObj.nodeType+"--nodeValue:"+divObj.nodeValue); }</script><input type="button" value="show" onclick="getAtribute()"/><div id="divId">hello, world!</div>
既然把页面解析成一棵树，则必然存在用来操作树节点的方法，而且，节点之间肯定存在父子、兄弟关系。例如:
//获取父节点divObj.parent;//获取下一个兄弟节点divObj.nextSibling;//获取上一个兄弟节点divObj.previousSibling;//获取第一个子节点divObj.firstChild;//获取最后一个子节点divObj.lastChild;
注意：在返回时，空行算作一个空白文本节点
2、方法中是用于对对象的操作，即相当于java中类的方法.例如：
//添加节点appendChild(node);//通过标签名称获取节点,返回的都是数组getElementByTagName(name);//判断是否有子节点hasChildNodes();
3、样式是CSS中的一些属性，也是HTML标签中用于改变数据表现方式中的属性值，在HTML标签中可以利用style来进行调用，在DOM中利用对象来调用，例如：
<!--HTML中利用style来改变数据形式--><div style="background-color:red"></div>
<!--利用DHTML来调用样式--><script type="text/javascript">var colorStatus = -1;function changeColor(){ var divObj = document.getElementById("divId"); if(colorStatus<0) { divObj.style.backgroundColor = "white"; colorStatus = 0; } else if(colorStatus<1) { divObj.style.backgroundColor = "red"; colorStatus = 1; } else if(colorStatus<2) { divObj.style.backgroundColor = "blue"; colorStatus = 2; } else { divObj.style.backgroundColor = "pink"; colorStatus = -1; } }</script><input type="button" value="ColorChange" onclick="changeColor()"/><div id="divId">hello, world!</div>
4、集合，可以返回一组属性等，例如：
//返回一个节点的所有子节点,注意children是数组var children = divObj.childNodes;
DOM使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。