dom节点与dom编程
html xhtml xml:都是标记型文档。
DHTML:是多个技术的综合体,叫做动态的html
DOm操作简单示例
<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
注释行节点:8
document: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 javascript
html:将数据进行封装
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;www.zzzyk.com
function change(){
var obj=document.getElementById("divid");
//obj.innerText="kkkkkk";
if(b){
obj.className="font1";
b=false;
}
else
{
obj.className="font2";
b=true;
}
}
补充:Web开发 , 其他 ,