logo头像
博客-Leo

DOM编程及实例

DOM

Document Object Model 文档对象模型

dom三层模型

  • dom1:将html文档封装成对象。
  • dom2:将xml文档封装成对象。
  • dom3:将xml文档封装成对象。

标签之间存在层次关系:(树形结构)

window

document

html
|--head
|--title
|--base
|--mate
|--link
|--style
|--script
|--body
|--table
|--tbody
|--tr
|--td
|--th
|--div
|--form
|--a
  • DOM树(标记性文档加载进内存后就有了一个对应的DOM树)

    有个弊端:文档过大,相对耗费资源,而是使用SAX方式解析。

  • 节点(文档中所有的标签和内容即为节点)

html,xhtml,xml:都是标记性语言.

DHTML

叫做动态的html. 是html,css,dom,javascript四项技术的综合体。

  • html:将数据进行封装。
  • dom:将标签封装成对象。
  • css:负责标签中数据的样式。
  • javascript:将上面三个进行融合,通过程序设计方式来完成动态效果的操作。

xmlGttpRequest——>AJAX

节点类型:

  • 标签型节点:类型 1
  • 属性节点:类型 2
  • 文本型节点:类型 3
  • 注释型节点:类型 8
  • document: 类型 9

注意:标签之间存在空行时,会出现一个空白的文本节点,在获取节点的时一定要注意!!!

节点的关系:

父节点:parentNode

子节点:childNodes 直接子节点

兄弟节点

上一个兄弟节点:previousSibling

下一个兄弟节点:nextSibling

获取节点可以通过节点的层次关系完成,也可以通过document对象来完成

  • getElementById 获取对 ID 标签属性为指定值的第一个对象的引用。 (通过ID)
  • getElementsByName 根据 NAME 标签属性的值获取对象的集合。 (通过name属性)
  • getElementsByTagName 获取基于指定元素名称的对象集合。 (通过标签名)

DOM编程实例

table标签示例

1.定义界面:
通过html的标签将数据进行封装
2.定义一些静态样式:
通过css
3.需要动态的完成和用户的交互:
a.先明确事件源
b.明确事件将事件注册到事件源上
c.通过javascript的函数对象事件进行处理
d.在处理过程中需要明确被处理的区域

一.在页面上通过按钮创建一个表格。

思路:

1.创建一个table节点,document。createElement(“table”);
2.通过table节点的insertRow()方法创建表格的行对象并添加到rows集合中
3.通过行对象的insertCell()方法创建单元格对象,并添加到cells集合中
4.给单元格添加数据
    a.创建一个节点如文本节点,document。createTextNode("文本内容"),通过单元格对象appendChild方法将文本节点添加到单元格的尾部
    b.可以通过单元格的innerHTML,添加单元格中的元素。e: tdNode.innerHTML = "<img src '1.png' alt='图片说明信息'/>"
5.建立好表格节点,添加到DOM树中,也就是页面的指定位置

二.如何删除表格中的行或列。

思路:

1.删除行:获取表格对象,通过表格对象中deleteRow方法,将指定的行索引传入deleteRow方法中
2.删除列:表格没有直接删除列的方法,要通过删除每一行中指定的单元格来完成删除列的动作。获取所有行对象,并进行遍历,通过行对象的deleteCell方法将指定的单元格删除。

三.对表格中的数据进行排序。

思路:

1.获取表格中的所有对象
2.定义临时存储,将需要进行排序的行对象存入到数组中
3.对数组进行排序,通过比较每一行对象中指定单元格中的数据,如果是整数要通过parseInt转换
4.将排序后的数组通过遍历,将每一个行对象重新添加回表格,通过tbody节点的appendChild方法
5.其实排序就是每一个行对象的引用取出

四.表格的行颜色间隔显示,并在鼠标指定的行上高亮。

思路:

1.获取所有行对象,将需要间隔颜色显示的行对象进行动态className属性指定,那么前提是:先定义好类选择器
2.为了完成高亮,需要用到两个事件,onmouseover(鼠标进入)和onmouseout(鼠标移出)
3.为了方便可以在遍历行对象时,将每一个行对象都进行两个事件属性的指定,并通过匿名函数完成该事件的处理
4.高亮的原理就是将鼠标进入时的指定颜色改变,改变前先记录原来行对象的样式,这样在鼠标离开时可以将原样式还原
5.该样式需要在页面加载完后直接显示,所有使用window.onload事件来完成

五.制作大小写切换界面

通过DOM编程步骤实现.

六.表单中的组件

单选框,复选框

这两个组件都一个属性来表示器选中与否的状态,checked

七.获取鼠标的坐标,让指定区域随着鼠标移动

获取鼠标坐标:event.x,event.y

指定区域随鼠标移动其实就是改变了指定区域的left top属性的值

这里需要用到的时间:body对象onmouseover事件;css样式,直接定义页面,所以区域在同一层次,为了对某一区域进行定位,将该区域分离到另一个层次,用到css中的position属性

支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励

评论系统未开启,无法评论!