HTML DOM 复习:
1,概念;
(1)javascript对HTML文档的访问以及增删改查都是通过DOM来实现的
(2)DOM(文档对象模型)顾名思义,将文档转化成对象的模型
(3)现在主流浏览器都内置了文档解析器(转化的)
2,HTML 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,鼠标点击序号显示当前对应的图片