dom对象

来源：互联网发布：崩坏3矩阵buff 编辑：程序博客网时间：2024/05/03 13:30

dom对象

html dom 树
在进行 html dom 编程时，我们把html文件看成是一个dom树，

该dom树在内存中有层级关系，通过操作 dom树，就可以改变 html页面的显示效果

从 html dom 的角度看，每个html文件的元素都会被当做一个Node节点对象来看待,就可以使用它的方法,

同时对于 html dom说，因为元素本身可能就是img/button/form同时可以看成 Button Img Form 内置对象
html文件
<img id='myimg' src="a.jpg" />
<script>
var myimg=document.getElementById("myimg");

</script>
xml 文件

</class>
var mystu=document.getElementById("mystu");

这是 mystu就是 Node对象

html dom编程的实例
js面向对象的方式来编写.
w ->上 a->左 s->下 d->右
课后练习: 对乌龟游戏添加新的功能:
③ 当乌龟碰到边界时，不能再移动

④ 让鸡可以自由的移动

⑤ 可以通过上下左右的按钮控制乌龟移动

⑥ 乌龟上下左右移动的时候可以换成乌龟抓鸡代码

//定义两个类 function Tortoise(x,y)

{

this.x=x;

this.y=y;

this.speed=10;//移动一个像素相应的图片.

this.Catch=function()

{

if((this.x>=cock.x-80)

&&(this.x<=cock.x+80)

&&(this.y>=cock.y-60)

&&(this.y<=cock.y+60))

{ alert("抓到！"); }

}

//向上移动

this.move_up=function()

{

this.y-=this.speed;

//同时修改乌龟的top的值

//dom编程体现

//先得到这个乌龟的图片

var wugui_div=document.getElementById("wugui");

wugui_div.style.top=this.y+"px";

}

//向下移动

this.move_down=function()

{

this.y+=this.speed;

var wugui_div=document.getElementById("wugui");

wugui_div.style.top=this.y+"px";

}

//向左移动

this.move_left=function()

{

this.x-=this.speed;

var wugui_div=document.getElementById("wugui");

wugui_div.style.left=this.x+"px";

}

//向右移动

this.move_right=function()

{

this.x+=this.speed;

var wugui_div=document.getElementById("wugui");

wugui_div.style.left=this.x+"px";

}

function Cock(x,y)

{

this.x=x;

this.y=y;

this.speed=1;//移动一个像素 setInterval(定时器)

}

//创建全局的乌龟和公鸡对象

var tortoise=new Tortoise(100,200);
var cock=new Cock(200,200);

//响应用户的操作

function move(obj)

{

switch(obj.value)

{

case "向上走":

tortoise.move_up();

tortoise.Catch();

break;

case "向下走":

tortoise.move_down();

tortoise.Catch();

break;

case "向左走":

tortoise.move_left();

tortoise.Catch();

break;

case "向右走":

tortoise.move_right();

tortoise.Catch(); break;

}

}
//响应用户的操作

function move2(event)

{

switch(event.keyCode)

{

case 87:

tortoise.move_up();

tortoise.Catch();

break;

case 83:

tortoise.move_down();

tortoise.Catch();

break;

case 65:

tortoise.move_left();

tortoise.Catch();

break;

case 68:

tortoise.move_right();

tortoise.Catch();

break;

default:

break;
}

}

</script> </head>

<tr> <td></td> <td><input type="button" value="向上走" onclick="move(this)" /></td> <td>shunping</td> </tr>

</table>

</div>

</div>

</body> </html>

bom
bom 的全称是浏览器对象模型 (bowser object model).,

它规定所有的浏览器在设计时，要考虑支持 bom提出的规范,这样才能正常浏览网页. dom 和 bom 的关系
bom一个纲领性，dom 就是具体的.( dom 对象、属性、方法.)
bom 包括浏览器所有对象
dom (document object model)主要是 bom(document对象的扩展)

dom的层级关系

☞ 在进行dom编程时，每个html的元素被看成一个Node节点(对象)

0 0