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开始

（1）通过id属性查找（获得的是具体的某一个节点）

（2）通过元素的name属性名查找（一般用于表单中）getElementsByName(name属性名)    返回的也是节点列表

属性节点

获得属性      getAttribute()参数是属性名

设置属性      setAttribute()参数1，属性名；参数2，属性值

删除属性      removeAttribute() 参数属性名

创建属性       createAttribute()  参数1，属性名；参数2，属性值（可选）

修改文本节点可以  重新给innerHTML赋值

删除文本节点   innerHTML 清空

 

 

通过常用的对象的属性来查找节点

parentNode    当前元素的父节点

firstChild      当前元素的第一个子节点

lastChild  当前元素的最后一个子节点

图片切换：

1，动态图片切换

Count++ 后++先运算后值增

2，序号和图片同步显示

  也就是显示第一张图片时，序号1高亮显示，以此类推

 

3，鼠标点击序号显示当前对应的图片