2013/1/20 dom节点与dom编程
html xhtml xml:都是标记型文档。DHTML:是多个技术的综合体,叫做动态的htmlDOm操作简单示例<script type="text/javascript">function demo(){var objdiv=document.getElementById("divid");objdiv.style.backgroundColor="red";}</script></head>
<body><input type="button" value="演示" onclick="demo()"/><div id="divid">aaaa</div></body></html>
结果单击演示按钮 aaaa背景变为红色节点类型标签性节点:1属性节点:2文本型节点:3注释行节点:8document:9
注意:标签之间存在空行时,会出现一个空白节点、节点的关系父节点:parentNode子节点childNodes:返回数组兄弟节点上一个兄弟节点:previousSibling下一个兄弟节点:nextSibling·············································获取节点可以通过节点的层次关系完成也可以通过document对象完成
getElementById:通过id属性值获取对应的节点对象,如果有多个id值相同。获取到的是第一个id所属对象。尽量保证id唯一性。getElementsByName:通过标签的name属性值获取对象。返回的一堆对象。其实是一个对象数组。getElementsByTagName:既没有id也没有name时,可以通过标签名来获取节点对象。返回的是一堆对象、大多容器性标签都具备该方法。
························································节点的层次关系
Dom:document object model文档对象模型dom三层模型dom1:将html文档封装成对象、dom2:将xml文档封装成对象、dom3:将xml文档封装成对象、
DHTML :html css dom javascripthtml:将数据进行封装dom:将标签封装成对象css:负责标签中的样式javascript:将三者进行融合,通过程序设计方式来完成动态效果的展示。
单击按钮,改变内容<script type="text/javascript">function change(){var obj=document.getElementById("divid");obj.innerText="kkkkkk";}
</script></head>
<body><input type="button" value="单击切换" onclick="change()"/><div id="divid">aaaaaaaa</div></body></html>
点击按钮红蓝颜色转换var b=true;function change(){var obj=document.getElementById("divid");//obj.innerText="kkkkkk";if(b){obj.className="font1";b=false;}else{obj.className="font2";b=true;}}