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(节点值)这三个基本属性
在实际开发中,节点操作主要操作的是元素节点
节点层级:
一 父级节点 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伪元素
案例 :简单发布留言功能