一、DOM是什么(重点重点)
Document Object Model 文档对象模型
DOM 定义了访问和操作HTML的文档的标准和方法
DOM 可以将HTML 分为元素 文本 属性 结构树(节点树)
使用DOM 可以改变HTML里面的某个项目包含 删除 增加 修改
二、DOM分为3个部分
1.XMLDOM 针对XML文档对象
2.HTMLDOM 针对HTML文档对象
3.COREDOM 针对所有结构化文档对象
三、XML(可扩展的标记语言) 是一种灵活简单的文本格式
1.XML其实就是自定义一些标签用来存储数据 进行数据交互
2.HTML标记语言 主要用来页面遵循的一些规则和规范
XML 可扩展的语言 用来存储 微信开发我们会用到
3.HTMLDOM 和XMLDOM -------> C语言和php之间的关系
4.HTMLDOM里面的语法都可以在XMLDOM里面使用但是XMLDOM里面的语法HTMLDOM中有的没有
四、HTMLDOM(重点重点重点)
1.节点: HTML里面的每个成分都是一个节点
2.节点信息
(1)nodeName(节点名称)
- 元素节点 nodeName 是标签名
- 属性节点 nodeName 是属性名称
- 文本节点 nodeName 永远都是#text
- 文档节点 nodeName 永远都是#document
(2)nodeValue(节点值)
- 对于文本节点 nodeValue 显示文本内容
- 对于属性节点 nodeValue 显示属性值
- nodeValue 对于文档节点和元素节点不可用的
(3)nodeType(节点类型)
- 元素 1
- 属性 2
- 文本 3
- 注释 8
- 文档 9
3.定点节点(找对象)
(1)document.getElementById()
(2)document.getElementsByTagName()
(3)document.getElementsByName()
(4)document.getElementsByClassName()
(5)根节点(不用我们找就可以直接使用的对象)
- html document.documentElement
- body document.body
4.属性(查找节点)
(1)firstChild 第一个儿子
(2)lastChild 最后一个儿子
(3)childNodes 所有子节点(集合)
(4)children 所有子元素的集合(不显示其他节点)
(5)parentNode 父节点
(6)nextSibling 下一个兄弟节点
(7)previousSibling 上一个兄弟节点
(8)attributes 所有属性集合
5.方法操作(添加 修改 删除)
(1)创建节点
document.createElement(‘要创建的标签名’)
(2)添加节点
- 添加到最后appendChild
parent.appendChild(son);
- 添加到某个位置insertBefore
parent.insertBefore(son,position)
(3)克隆
new = old.cloneNode();
如果我们传递一个参数参数值为true 表示携带子元素一起克隆
(4)删除子节点
parent.removeChild(son)
(5)删除自己节点
son.parentNode.removeChild(son)
五、全选反选 删除
因为删除每次数组都会重新排序 所以我们要从大到小的删除或者只删除0下标的内容进行操作即可
六、移动选项卡特效
获取select里面的所有option标签
select对象.options 获取所有option标签
七、表格属性
- 添加行 insertRow() 创建并添加操作
添加行的对象是我们的表格对象
- 添加单元格 insertCell()
添加单元格的对象是我们的行的对象
- 删除单元格 deleteCell(index)
index代表你要删除单元格所在位置数
- 获取当前单元格序号cellIndex属性
八、表格的增加和删除
来源:https://www.cnblogs.com/zhony/p/10458557.html