当前位置: 代码迷 >> HTML/CSS >> HTML DOM温习
  详细解决方案

HTML DOM温习

热度:274   发布时间:2013-03-12 11:19:35.0
HTML DOM复习

HTML DOM 复习:

1,概念;

(1)javascriptHTML文档的访问以及增删改查都是通过DOM来实现的

(2)DOM(文档对象模型)顾名思义,将文档转化成对象的模型

(3)现在主流浏览器都内置了文档解析器(转化的)

2HTML DOM的规则:

Html文档对应的节点(对象)-----------   document

Document对象是html标签转化成的对象,他可以对我们的html文件所有的元素进行操作

3,元素节点

(1)顾名思义,就是将每个html标签转化成对应的节点(对象)

增:

创建一个元素节点

点击按钮后创建一个100px,背景银灰色的div,内容是HTML DOM练习

思路:

1,创建一个元素,因为创建元素是document对象的方法

2,设置元素的属性(css样式)通过当前对象的style属性来设置

2,规定元素的位置(元素与元素之间的关系)

删除子节点

查找元素节点

(1)根据标签名字查找节点(getElementsByTagName,什么时候用?

    当我们不知道这类标签有多少

    他返回的永远是一个节点列表

 节点列表的索引是从0开始

(2)通过id属性查找(获得的是具体的某一个节点)

(3)通过元素的name属性名查找(一般用于表单中)getElementsByName(name属性名)  返回的也是节点列表

作业:

利用getElementsByName()实现复选框 全选  全不选  反选

属性节点

获得属性      getAttribute()参数是属性名

设置属性      setAttribute()参数1,属性名;参数2,属性值

删除属性      removeAttribute() 参数属性名

创建属性   createAttribute()  参数1,属性名;参数2,属性值(可选)

文本节点:

修改文本节点可以  重新给innerHTML赋值

删除文本节点   innerHTML 清空

通过常用的对象的属性来查找节点

parentNode    当前元素的父节点

firstChild      当前元素的第一个子节点

lastChild   当前元素的最后一个子节点

注意:

一定要注意元素与元素之间的空格

删除节点:

父节点.removeChild(子节点)

图片切换:

1,动态图片切换

Count++ ++先运算后值增

2,序号和图片同步显示

   也就是显示第一张图片时,序号1高亮显示,以此类推

3,鼠标点击序号显示当前对应的图片

  相关解决方案