JavaScript --------WebS APIs学习之DOM(二)
操作元素
JavaScript 的DOM操作可以改变网页内容,结构和样式,我们可以利用DOM操作元素来改变元素里面的内容,属性等.
一 改变元素的内容
①element.innerText //从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
不识别html标签 (非标准)
②element.innerHTML //起始位置到终止位置的全部内容,包括html标签,保留空格和换行.
识别html标签( W3C标准)
案例 : 点击按钮 ,div中显示当前时间
时间显示在这里
时间一直显示在这里
二 常用元素的属性操作
案例:修改属性src
案例:分时显示不同图片 ,显示不同的问候语.
三 表单元素的属性操作
利用DOM 可以操作如一下表单元素的属性: type value checked selected disabled
案例: 点击按钮 ,表单内容改变.并且禁用按钮
四 样式属性操作
可以通过JS 修改元素的大小,颜色,位置等样式.
1. element.style 行内样式操作
注意: ①Js里面的样式采取驼峰命名法,比如fontSize , backgroundColor
②JS修改style 样式操作,产生的是行内样式,css权重比较高
2.element.className 类名样式操作
注意:①如果样式修改较多,可以采用操作类名方式更改元素样式.
②class因为是个保留字,因此使用className来操作元素类名属性
③className 会直接更改元素的类名,会覆盖原先的类名
案例 : 循环精灵图背景 利用for循环设置一组元素的精灵图背景
案例: 显示隐藏文本的内容 当鼠标点击文本框时,里面的默认文字隐藏,当鼠标离开文本框时,里面的文字显示
查找
案例:密码框格式提示错误信息.
用户如果离开密码框,里面输入个数不是6_16,则提示错误信息,否则提示输入正确信息
设置密码:
请输入6-12位密码
案例：表格中，鼠标经过该行，该行变色。
姓名
年龄
杨九儿
17
杨仙子
18
小可爱
3岁
臭猪猪
1岁
六 自定义属性操作
1.获取元素属性值
① element.属性 //获取属性值
②element.getAttribute( '属性' )；
区别：element.属性 获取内置属性值 （元素自带的属性）
element.getAttribute('属性') ； 主要获得自定义的属性（标准），
2.设置属性值
①element.属性 = ‘值 ’； 设置内置属性值
② element.getAttribute( '属性' , ‘值’)；
区别：element.属性 设置内置属性值
element.getAttribute('属性') ； 主要设置自定义的属性（标准）
3.移除属性
element.removetAttribute( '属性 ’)；
案例： tab栏切换（重点案例）
- 商品介绍
- 规格与包装
- 售后保障
- 评论
商品介绍
规格与包装
售后保障
评论
七 H5自定义属性
自定义属性目的：是为了保存并使用数据，有些数据可以保存到页面中而不用保存到数据库中
因为有些自定义属性很容易引起歧义。不好判断是元素的内置属性还是自定义属性
1.设置H5自定义属性
H5规定自定义属性data-开头作为属性名并且赋值
2.获取H5自定义属性
1. 兼容性获取 element . getAttribute(' data-index');
2.H5新增 element. dataset . index 或者 element .dataset[' index '] ie11才支持
节点操作
网页中所有的内容都是节点（标签，文本，注释等），在DOM中，节点使用node来表示
一般地，节点至少拥有node Type（节点类型），nodeName（节点名称）和nodeValue（节点值）这三个基本属性
- 元素节点 nodeType 为 1 ；
- 属性节点 nodeType 为 2 ；
- 文本节点 nodeType 为 3 ；（文本节点包含文字，空格，换行等；）
在实际开发中，节点操作主要操作的是元素节点
节点层级：
一 父级节点 node.parentNode
注意：1.parentNode 属性可返回某节点的父节点，注意是最近一个的父节点
2. 如果指定的节点没有父节点则返回null
二 子节点
1.parentNode.childNodes (标准)
注意：①返回包含指定节点的子节点的集合，该集合为即时更新的集合
②返回值里面包含了所有的子节点，包括元素节点，文本节点等 。如果只获得里面的元素节点，还需专门处理
代码如下：
2. parentNode.children (非标准)（重点掌握）
parentNode.children是一个只读属性，返回所有的子元素节点，他只返回子元素节点，其余节点不返回。
3.parentNode.firstChild parentNode.lastChild
parentNode.firstchild 返回第一个子节点，找不到则返回null，同样，也包含所有节点
parentNode.lastChild 返回最后一个子节点，找不到则返回null，同样，也包含所有节点
4.parentNode.firstElementChild parentNode.lastElementChild
parentNode.firstElementChild 返回第一个子元素节点 ，找不到则返回null
parentNode.lastElementChild 返回最后一个子元素节点 ，找不到则返回null
注意：这两个方法有兼容醒问题，IE9 以上才支持
5.返回第一个子元素，和最后一个子元素的方法：
parentNode.children [0] 返回第一个子元素
parentNode.children [伪数组的长度 - 1 ] 返回最后一个子元素
案例 ： 下拉菜单
三 兄弟节点
1.node.nextSibling
node.nextSibling返回当前元素的下一个兄弟节点，找不到则返回null，同样，也是包含所有的节点
2.node.previousSibling
node.previousSibling返回当前元素的上一个兄弟节点，找不到则返回null，同样，也是包含所有的节点
3.node.nextElementSibling node.nextElementSibling IE9才支持
node.nextElementSibling返回当前元素的下一个兄弟元素节点，找不到则返回null
node.nextElementSibling返回当前元素的上一个兄弟元素节点，找不到则返回null。
解决：封装一个兼容性的函数
四 创建节点
document.createElement('tagName');
document.createElement('tagName')方法创建由tagName指定的HTML元素，也称为动态创建节点。
添加节点
1.node.appendChild(child)
node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾，类似于css里面的after伪元素
2. node.insertBefore(child , 指定元素)
node.insertBefore(child , 指定元素)方法将一个节点添加到父节点的指定子节点前面，类似于CSS里面的before伪元素
案例 ：简单发布留言功能