HTML DOM复习

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，鼠标点击序号显示当前对应的图片