当前位置:首页 > 企业简介 >

dom节点与dom编程

编辑:北京聚贤贵都宾馆有限公司时间:2017-09-02 11:53:11阅读次数:2
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.2cto.com

function change(){

var obj=document.getElementById("divid");

//obj.innerText="kkkkkk";

if(b){

obj.className="font1";

b=false;

}

else

{

obj.className="font2";

b=true;

}

}

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:咸宁网站建设 http://xianning.45qun.com

上一篇:卡汀财经—CFA (特许金融分析师)简介 下一篇:最后一页

相关阅读