问题:1. 什么是DOM ?
DOM是 Document Object Model
2. 实现动态修改表格网页其他元素特行
1.解析文档并生成DOM树
2.通过DOM接口编程改变文档内容
整个文档是一个文档节点。
每个HTML标签都是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性都是一个属行节点
注视属于注释节点
4.12 DOM的组成
Core DOM :也称核心DOM 编程,定义了一套标准的针对任何结构化文档的对象,包括HTML XHTML XML
XML DOM :定义了一套标准的针对XML文档对象
HTML DOM : 定义了一套标准的针对HTML文档对象。
1.使用getElement系列方法访问指定节点
getElementById():(HTML DOM)
getElementsByName():(HTML DOM)
getElementsByTagName():(Core DOM)
动态地改变文档的属性
getAttribute(“属性名”);用来获取属性的值
setAttribute (“属性名”,“属性值 ”)
-----经验总结---------------------------------------------------
使用getAttribute() 方法读取属性时,如果属性不存在,getAttribute()返回null
访问文档中的根节点:
documnet.documentElement。
document.body
4.2.2 创建和增加节点
名称 描述
createElement(tagName) 按照给定的标签创建一个新的元素节点
appendChild(nodeName) 向已存在节点列表的末尾添加新的子节点
insertBefore(newNode,oldNode)向指定的节点之前插入一个新的子节点
cloneNode(deep) 复制某个指定的节点
-----说明--------------------------------------------------------------------
insertBefore(newNode,oldNode)中的有两个参数.newNode 是必选项;表示新插入的节点;oldNode是可选项,表示新节点被插入到oldNode 节点的前面
cloneNode(deep) 中的参数deep是布尔值,当deep的值为true时,会复制指定的节点及它的所以字节点;deep的值为false时,只复制指定的节点及所有子节点;当deep的值为false时;只复制指定的节点和它的属性。
4.3.2访问HTML DOM 对象的属性
由于HTML中的每个节点都是一个对象;所以访问或设置对象的属性值时 ," 对象名.属性"
4.3.3表格对象
在HTML中表格是由<table>标签来定义的,每个表格均有若干行(<tr>标签定义),每行分割成若干个单元格(<td>标签定义)
TableObject,TableRowobject,TablecellObject,随<table>标签 <tr>标签 <td>标签而分别建立
Table对象
deleteRow() 从表格中删除一行
tableobject.insertRow(index);
tableobject.deleteRow(index);
index表示 新行将被插入到index所在行之前。若在index等于表格中的行数,则新行将被插入到表格的末尾;若index等于0;则新行将被插入到表格的第一行;
index(0,表格中行数)
TableRow对象
类别 名称 描述
属性 cell[] 返回包含行中所有单元格的一个数组
rowIndex 返回该行在表中的位置
方法 insertCell()在一行中的指定位置插入一个空的<td>标签
deleteCell() 删除行中指定的单元格
tableRowObject.insertCell(index);
index表示新单元格将插入到index所在单元之前,如果index等于行中的单元格数,则新单元格被插入到行的我、末尾index=0;则新单元格插入到开头
tableRowObject.deleteRow(index);
TableCell对象
类别 名称 描述
属性 cellIndex 返回单元格在某行单元格集合中位置
innerHTML 设置或返回单元格的开始标签和结束标签之间的HTML
align 设置或返回单元内部数据的水平排列方式
className 设置或返回元素的class属性
DOM是 Document Object Model
2. 实现动态修改表格网页其他元素特行
1.解析文档并生成DOM树
2.通过DOM接口编程改变文档内容
整个文档是一个文档节点。
每个HTML标签都是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性都是一个属行节点
注视属于注释节点
4.12 DOM的组成
Core DOM :也称核心DOM 编程,定义了一套标准的针对任何结构化文档的对象,包括HTML XHTML XML
XML DOM :定义了一套标准的针对XML文档对象
HTML DOM : 定义了一套标准的针对HTML文档对象。
1.使用getElement系列方法访问指定节点
getElementById():(HTML DOM)
getElementsByName():(HTML DOM)
getElementsByTagName():(Core DOM)
动态地改变文档的属性
getAttribute(“属性名”);用来获取属性的值
setAttribute (“属性名”,“属性值 ”)
-----经验总结---------------------------------------------------
使用getAttribute() 方法读取属性时,如果属性不存在,getAttribute()返回null
访问文档中的根节点:
documnet.documentElement。
document.body
4.2.2 创建和增加节点
名称 描述
createElement(tagName) 按照给定的标签创建一个新的元素节点
appendChild(nodeName) 向已存在节点列表的末尾添加新的子节点
insertBefore(newNode,oldNode)向指定的节点之前插入一个新的子节点
cloneNode(deep) 复制某个指定的节点
-----说明--------------------------------------------------------------------
insertBefore(newNode,oldNode)中的有两个参数.newNode 是必选项;表示新插入的节点;oldNode是可选项,表示新节点被插入到oldNode 节点的前面
cloneNode(deep) 中的参数deep是布尔值,当deep的值为true时,会复制指定的节点及它的所以字节点;deep的值为false时,只复制指定的节点及所有子节点;当deep的值为false时;只复制指定的节点和它的属性。
4.3.2访问HTML DOM 对象的属性
由于HTML中的每个节点都是一个对象;所以访问或设置对象的属性值时 ," 对象名.属性"
4.3.3表格对象
在HTML中表格是由<table>标签来定义的,每个表格均有若干行(<tr>标签定义),每行分割成若干个单元格(<td>标签定义)
TableObject,TableRowobject,TablecellObject,随<table>标签 <tr>标签 <td>标签而分别建立
Table对象
类别 名称 描述
属性 rows[] 返回包含表格中所以行的一个数组
方法 insertRow() 在表格中插入一个新行deleteRow() 从表格中删除一行
tableobject.insertRow(index);
tableobject.deleteRow(index);
index表示 新行将被插入到index所在行之前。若在index等于表格中的行数,则新行将被插入到表格的末尾;若index等于0;则新行将被插入到表格的第一行;
index(0,表格中行数)
TableRow对象
类别 名称 描述
属性 cell[] 返回包含行中所有单元格的一个数组
rowIndex 返回该行在表中的位置
方法 insertCell()在一行中的指定位置插入一个空的<td>标签
deleteCell() 删除行中指定的单元格
tableRowObject.insertCell(index);
index表示新单元格将插入到index所在单元之前,如果index等于行中的单元格数,则新单元格被插入到行的我、末尾index=0;则新单元格插入到开头
tableRowObject.deleteRow(index);
TableCell对象
类别 名称 描述
属性 cellIndex 返回单元格在某行单元格集合中位置
innerHTML 设置或返回单元格的开始标签和结束标签之间的HTML
align 设置或返回单元内部数据的水平排列方式
className 设置或返回元素的class属性