document对象

最新推荐文章于 2024-02-02 10:42:50 发布
最新推荐文章于 2024-02-02 10:42:50 发布
阅读量217 收藏
点赞数


document对象
最重要的三个方法 

getElementById [html php  jsp] (如果页面中有多个相同的id,则返回第一个对象引用)
getElementsByName  通过html控件的名字返回对象集合 多用于多选。 
getElementsByTagName 通过html的标签名返回对象集合

案例：请选择你的爱好

<script type="text/javascript"> 

//通过id获取对象 

function test()

{  

var a1=document.getElementById("a1");  

//如果要取出某个属性  

window.alert(a1.id+" "+a1.href+" "+a1.innerText);   

a1.innerText="连接到百度";  

a1.href="http://www.baidu.com"; 

 }  

//通过name来获取.对象 

function test2()

{    

//使用  

var hobbies=document.getElementsByName("hobby");  

//遍历这个集合

for(var i=0;i<hobbies.length;i++)

{       

//判断   

//window.alert(i+ " "+hobbies[i].checked);   

if(hobbies[i].checked)

{     window.alert("你的爱好是"+hobbies[i].value);    }

} 

 } 

//通过标签名 

function test3()

{  

var inputs=document.getElementsByTagName("input");  

window.alert(inputs.length);

  } 
</script>

<body>
<a id="a1" href="http://www.sina.com">连接到sina</a><br/>

<a id="a1" href="http://www.sohu.com">连接到sohu</a><br/>

<a id="a3" href="http://www.baidu.com">连接到baidu</a><br/>

<input type="button" value="测试" οnclick="test()"/><br/>

请选择你的爱好:
<input type="checkbox" name="hobby" value="旅游">旅游 <input type="checkbox" name="hobby" value="音乐">音乐 <input type="checkbox" name="hobby" value="体育">体育 <input type="checkbox" name="hobby" value="电影">电影
<input type="button" value="看看你的爱好" οnclick="test2()"/><br/>
<input type="button" value="通过tagname来获取元素" οnclick="test3()"/><br/>

</body>


动态的创建元素(节点)/添加元素(节点)/删除元素(节点)

注意用四个节点属性：
createElement() 方法创建新的元素节点：
appendChild() 方法向已存在的节点添加子节点。（发射子弹）

removeChild() 方法删除指定的节点。 （子弹消失）

parentNode 属性可返回某节点的父节点。

<script type="text/javascript">   

function test1(){  

//window.alert('ok');  

//1创建 a 元素 createElment(标签名)，   

var myhref=document.createElement("a"); //<a >???</a>  

myhref.innerText="连接到sina";  

myhref.href="http://www.baidu.com"  

myhref.id="myhref";  

//document.body.appendChild(myhref);  

div1.appendChild(myhref);

  }

function test2()

{ 

//document.getElementById('div1').removeChild(document.getElementById('myhref'));  

var node=document.getElementById('myhref');  

node.parentNode.removeChild(node);

  } 
</script>

<body>
<input type="button" value="创建一个a标签" οnclick="test1()"/><br/>

<input type="button" value="删除a标签" οnclick="test2()"/><br/>

<!--引入  css  id class [dom如何去操作一个外表css!补讲 ]-->
<div id="div1" style="width:200px;height:200px;background-color:green">div1</div>

</body>


制作一个函数查询按键的keycode编码！ 代码如下： 
<script type="text/javascript"> 

function test() 

{  

 window.alert("我所按下的键的keycode的代码是"+window.event.keyCode);

  }

</script> <body> 

<input type="button" οnkeydοwn="test()" value="tesing"/>

</body>


乌龟发子弹的练习

(1) 响应用户按 j 键
(2) 让乌龟发子弹 函数 fire内容多.

创建子弹
我认为子弹就是一个图片 / 也可以认为是一个div span

怎样让子弹碰到边界后，就停下，并且消失 
提示: window.alert("body的宽="+document.body.clientWidth);

<script type="text/javascript"> 

//定义两个类 

function Tortoise(x,y)

{     

this.x=x;  

this.y=y;  

//var bullet_img="";//子弹     

//子弹数组  

var bullet_imgs=new Array();  

var bullet_img_speed=2;  

this.speed=1;//移动一个像素  

var isStart=false;  

this.move_up=function(){

this.y-=this.speed;   

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

//dom编程体现 
//1先得到这个乌龟图片 div 
var wugui_div=document.getElementById("wugui");   

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

//判断乌龟是否和公鸡碰撞. 
//window.alert("乌龟当前的 x y"+this.x+" "+this.y);   

//window.alert("公鸡当前的 x y"+cock.x+" "+cock.y);
   }

//向右移动 
this.move_right=function()

{       

this.x+=this.speed;   

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

//dom编程体现   

//1先得到这个乌龟图片 div   

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

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

   }

 //开火 
this.fire=function(){   

//window.alert("乌龟发子弹");   

var bullet_img=document.createElement("img");   

bullet_img.src="bullet.bmp";   

//设置bullet_img的x,y   

//定子弹的横坐标   

bullet_img.style.left=(this.x+94)+"px";   

bullet_img.style.top=(this.y+33)+"px";   

//做出绝对定位   

bullet_img.style.position="absolute";   

document.body.appendChild(bullet_img);   

//把这颗新子弹放入 数组中,进行管理   

bullet_imgs[bullet_imgs.length]=bullet_img; 
//启动子弹[请注意一下,如果我们调用是一个对象的成员方法] 
//setInteval 应该这样去掉 window.setInteval("对象名.函数名()",时间);   
//如果子弹数组中有子弹，就不要在调用
   /* if(bullet_imgs.length==1){    

          window.setInterval("tortoise.move_bullet()",50); 

   } */

if(!isStart)

{    

window.setInterval("tortoise.move_bullet()",10);    

 isStart=true; 

   }

   }

//让子弹移动  

this.move_bullet=function(){       

//遍历子弹数组.看看每颗子弹是否已经到到边界,如果到了边界，则删除   

//for(var i=0;i<bullet_imgs.length;i++){        

//}       

if(bullet_imgs.length==0){    

//stop定时器.    

//isStart=false;

    }

//这里要求访问 bullet_img    

//修改bullet_img 的 left即可  100px    

//遍历子弹数组,让每颗子弹移动   

for(var i=0;i<bullet_imgs.length;i++){     

//取出每颗子弹    

var bullet_img=bullet_imgs[i];

 var
bullet_img_x=bullet_img.style.left.substring(0,bullet_img.style.left.indexOf("p"));                           

bullet_img.style.left=parseInt(bullet_img_x)+bullet_img_speed+"px";   

//遍历子弹数组.看看每颗子弹是否已经到到边界,如果到了边界，则删除    

if(parseInt(bullet_img_x)+17>=document.body.clientWidth){     

//到达边界,就删除该子弹     

bullet_imgs.splice(i,1);  //3 2 1     

//同时从html   dom树种删除     

bullet_img.parentNode.removeChild(bullet_img);

     }

    } }
 }
  function Cock(x,y){  

this.x=x;  

this.y=y;  

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

   }  
 //创建全局的乌龟对象和公鸡对象  
var tortoise=new  Tortoise(100,120);  

var cock=new Cock(200,200); 
 //用于响应用户点击的操作 

function move(obj){     

switch(obj.value){       

case "向上走":    

tortoise.move_up();    

break;   

case "向右走":    

tortoise.move_right();    

break;

   }

   }

//用于响应用户按键的操作 

function move2(event){     

switch(event.keyCode){       

case 65:    

tortoise.move_left(); //乌龟向左    

break;   

case 68:    

tortoise.move_right();    

break;   

case 83:    

tortoise.move_down();    

break;  
case 87:

tortoise.move_up();    

break;   

//响应用户按j这个键   

case 74:    

//发送子弹的行为封装到fire    

tortoise.fire();    

break;   

default:    

break;

   }

      } 
</script>

head>
<body οnkeydοwn="move2(event)">

<table id="mytable" border="1">

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

</tr>

<tr>
<td><input type="button" value="向左走" /></td> <td></td>
<td><input type="button" value="向右走" οnclick="move(this)" /></td>

</tr>

<tr>
<td></td>
<td><input type="button" value="向下走"  /></td> <td></td>

</tr>

</table>

<!--把乌龟放在一个div-->
<div id="wugui"  style="position: absolute left:100px;top:120px;">

<img src="1.bmp" border="1" alt="" />

</div>
<div id="cock" style="left:200px;position:absolute;top:200px;">

<img src="2.bmp" border="1" alt="" />

</div>

</body> </html>



常用的dom 的每个Node 节点属性和方法(加强篇)
(取到父节点、兄弟节点、子节点等 ) 
<head>
    <title>无标题页</title> 

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

</head> <body>
<table border="1">

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

</tr>

<tr>
<td><input type="button" value="向左走" οnclick="move(this)" /></td> <td></td>
<td><input type="button" value="向右走" οnclick="move(this)" /></td>

</tr>

<tr>
<td></td>
<td><input type="button" value="向下走" οnclick="move(this)" /></td> <td></td>

</tr>

</table> 
<div id="wugui"  style="position: absolute left:100px;top:120px;">

<img src="1.bmp" border="1" alt="" />

</div> 
<div id="cock" style="left:200px;position:absolute;top:200px;">

<img src="2.bmp" border="1" alt="" />

</div>
<input type="button" value="tesing" οnclick="test()"/>

<input type="button" value="tesing2" οnclick="test1()"/>

</body>
<script type="text/javascript">

function test()

{     

//得到乌龟节点  

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

window.alert("类型"+wugui.nodeType);  

window.alert("名字"+wugui.nodeName);   

var wugui_parent=wugui.parentNode;   

window.alert("父节点类型"+wugui_parent.nodeType);  

window.alert("父节点名字"+wugui_parent.nodeName);  

var wugui_next_borther=wugui.nextSibling;  

window.alert("下一个兄弟 类型"+wugui_next_borther.nodeType);  

window.alert("下一个兄弟 名字"+wugui_next_borther.nodeName);  

var wugui_pre_borther=wugui.previousSibling;

//取出孩子节点   var wugui_chlid=wugui.firstChild;   

window.alert("孩子 类型"+wugui_chlid.nodeType);  

window.alert("孩子 名字"+wugui_chlid.nodeName+wugui_chlid.src);  } 

function test1()

{   

document.bgColor="black";//背景色   

document.fgColor="white";//前景色   

window.alert(document.title+" "+document.URL);

   }

</script> </html>

ll123_lyf
关注
JavaScript之document对象获取元素
zhouym_的博客
06-04 8013
document对象 概述：浏览器对外提供的支持js操作HTML文档的一种对象，这个对象封装了HTML文档中的所有对象。当HTML文档一执行，就会创键document对象，把HTML文档中的所有信息封装到document对象中，我们要获取HTML文档中的信息，只需要操作document这个对象即可。 获取元素属性，两种方式 直接获取 <!DOCTYPE html> <html&g...
JavaScript的document对象和window对象详解
10-28
此外，document对象提供了获取页面元素的方法，例如通过document.getElementById()来获取具有特定id的元素，或者通过document.getElementsByTagName()来获取具有特定标签名的所有元素。 document对象还具有操作文档...
黑马自学_Dom_window对象、document对象
cxylu的专栏
03-28 295
---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------    window对象的属性 history：         window.history.back()后退；window.history.forward()前进；也可以用window.history.go(-1)后退；wind
document对象属性
soos的博客
03-17 1325
document对象中，并没有特别的事件，它所支持的都是通用的。 在document上讲解这些属性不具有典型性，但只要掌握了一个对象 在某个事件上的处理方式，也就自然的掌握了在其它对象上处理这个 事件。 对于document对象所支持的事件在这里就不赘述了。 下面说一下document对象属性： 1.forms数组对象：代表html文档中的所有form标签对的集合。 2.anchors数组对象：代表html文档中所有指定的name属性或id属性的a 标签对的集合。 3.links数组对象：代表html文
JS document对象详解
大河之犬的博客
02-02 3161
document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。实际上，浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，这样我们就可以通过document对象来操作页面中所有的元素了window是浏览器为每个窗口创建的对象。通过window对象，我们可以操作窗口，如打开窗口、关闭窗口、浏览器版本等，这些操作又被统称为“BOM（浏览器对象模型）”
JavaScript document对象
weixin_47782618的博客
04-23 3740
1. 什么是document对象 document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。 2. document对象的属性 2.1 document.doctype document.doctype，指向<doctype>节点，即文档类型（Document Type Declaration，简写DTD）节点。HTML 的文档类型节点，一般写成<!DOCTYPE HTML>。如果网页没有声明
Document对象详解
qq_74095822的博客
01-03 2412
NodeDocumentElement等 DOM 节点类型对象，都是做为window对象的子属性出现的。document是window 对象的子属性，它是一个Document 对象实例，表示当前窗口中文档对象。通过该对象，可以对文档和文档中元素、节点等进行操作。思维导图。
document对象详解
u014663631的博客
05-22 3843
document对象概述： document对象是文档的根节点，只要浏览器开始载入HTML文档，这个对象就开始存在了，它作为一个入口去操作网页内容，可以直接调用。document的属性和方法非常多，下面我做了一些基本归类，对于更详细的属性和方法查询该网址。 第一类（获得节点的属性）： 属性 说明 document.doctype 第一个子节点，表示文档类型。对于html5文档来说，...
JS中Document对象
m0_73030012的博客
09-13 1519
JS中Document对象
【温故而知新】JavaScript的Document对象
日常笔记/总结/系列知识梳理
01-05 1737
Document对象是JavaScript中代表整个HTML或XML文档的根节点。它是浏览器中内置的一个对象，可以通过document关键字来访问。Document对象提供了许多属性和方法，用于操作和访问文档中的元素、样式、事件等。通过Document对象，我们可以动态地修改和操作HTML或XML文档的内容、结构和样式，使得网页可以根据用户的交互行为进行动态更新和改变。
JS document对象简单用法完整示例
10-15
本篇文章将详细讲解`document`对象的一些基础用法，包括直接和间接获取页面元素的方法。 1. **直接获取对象** - `getElementById()`：通过元素的ID获取特定元素。例如： ```javascript var element = document....
javascript Window及document对象详细整理
12-10
此外，Document对象还有许多其他属性和方法，例如查询选择器API（`querySelector`和`querySelectorAll`），以及事件处理（如`addEventListener`和`removeEventListener`）等，这些都使得JavaScript能够对网页进行...
Document对象内容集合(比较全)
10-28
了解Document对象对于JavaScript开发者来说至关重要，因为它提供了与网页内容交互的各种方法和属性。 1. **属性**： - `document.title`：用于获取或设置页面的标题，对应HTML中的`<title>`标签。 - `document....
浅析JS中document对象的一些重要属性
10-26
在JavaScript中，document对象扮演着至关重要的角色，因为它提供了访问和操作Web文档的接口。了解document对象的关键属性可以帮助开发者更好地控制页面内容，实现丰富的用户交互。本文将详细介绍document对象中的...
大学生职业生涯规划书Word模板范文就业求职简历应聘工作PPT医疗康复专业
最新发布
10-12
大学生职业生涯规划书Word模板范文就业求职简历应聘工作PPT医疗康复专业
基于Java的学生信息管理系统的实现与操作
10-12
本文介绍了一个Java实现的小型系统 -- 学生信息管理系统，包括学生数据的增删查改四个主要操作的功能演示，并具体讲解了涉及三个核心类（Student.java、StudentManager.java、StudentFrame.java）的设计思想以及代码逻辑。适合Java初学者用来了解面向对象的概念应用以及Swing工具包进行GUI创建的基础方法和步骤。系统通过提供文本框用于输入学生ID和其他必要信息，并提供按钮来执行对应指令，显示栏展示查询结果显示，使操作变得更为简洁直观有效。 适用于初步掌握Java基础的开发者，特别是想要加强自己对面向对象编码思维理解和运用的同学。 使用此管理系统可以在本地电脑环境上进行学生的数据维护工作（如增删改查），提高学校教务工作者处理信息的效率。 除了基本的数据录入和搜索之外，该项目也帮助理解如何设计合理的模型类并使用集合存储大量数据元素，另外还介绍了如何通过事件监听的方式绑定用户行为和应用程序之间的交互流程。
基于单片机控制的填块切割装置的设计_孟紫腾.pdf
10-12
基于单片机控制的填块切割装置的设计_孟紫腾
ImageNet-1K数据集索引和对应的中英文表单
10-12
ImageNet-1K数据集索引和对应的中英文表单
HTML文档对象——document对象详解
document对象可以通过window对象的document属性或者直接引用来访问。" 在Web开发中，document对象扮演着核心角色，提供了丰富的属性、方法、集合和事件，使得开发者能够方便地与HTML文档进行交互。以下是document...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值