Web API之DOM

一.认识DOM

API是接口，Web APIs是浏览器接口，web APIs包括DOM和BOM,是js独有的部分

DOM树

二.获取元素

通过id
document.getElementById()

通过标签名
document.getElemnetByTagName()

HTML5新增方法
通过类名
document.getElementByClassName()
通过指定选择器的第一个元素对象
document.querySelector()//注意.box #nav
全部
document.querySelectorAll()

特殊元素
document.body
document.documentElement

三.事件基础

事件三要素：事件源、事件类型、事件处理程序

事件类型

执行事件步骤

例子，显示当前系统时间

四.操作元素

(1).改变元素内容

innerText
innerHTML

(2).修改元素属性(str、herf、id、alt、title）

例子 、不同时间段显示不同图片和不同问候语

(3).修改表单属性

例子、

(4).修改样式属性操作

1.通过element.style.属性（驼峰）
行内多

例子、淘宝二维码广告关闭

例子、循环精灵图

例子、显示隐藏文本框内容



2.通过修改类名更改样式内容

例子、改变提示信息

(5).小结

五.一些思想

(1).排他思想

例子、表格隔行变色

例子、百度换肤

例子、表单全选和取消全选

(2).自定义属性的操作

1.获取属性值
element.属性
element.getAttribute()

2.设置属性值
element.属性=值
element.setAttribute(属性，值）
3.移除属性
element.removeAttribute()

例子、tab栏切换

H5自定义属性
date-开头
dateset是一个存放所有date开头的自定义属性
获取时驼峰

六.节点操作

why
DOM获取元素复杂
节点层级关系
可修改创建删除

1.认识

2.节点层级关系

父节点parentNode

子节点
全部子节点childNodes
元素子元素节点childRen

第一个子节点firstChild
第一个子元素节点firdtElementChild
最后一个子元素节点lastElementChild

解决兼容性问题

兄弟节点
下一个兄弟节点nextSibling
下一个兄弟元素节点nextElementSibling

3.创建和添加、删除、复制节点

创建 document.creatElement（）（创建的一定是孩子）
末尾添加document.appendChild()
添加指定元素前document.insert Before(child,指定元素）

例子、简单版发布留言案例

删除节点
node.removeChild()

删除留言案例

复制节点
node.cloneNode()

三种动态创建元素区别

七.DOM重点核心

创建

增

删
removeChild
改

查

属性操作

事件操作