目录
一、文本操作
1、 纯文本
2、带有标签效果的文本设置
3、案例
案例1、操作文本节点内容
案例2、点击按钮出来弹框
案例3、点击弹框修改文本内容和地址
二、属性操作
1、默认属性（自带属性）
2、自定义属性
3、案例
案例1、通过表单元素属性点击按钮后显示用户选择了几个
案例2、自定义下标属性
案例3、点击小图切换大图
三、样式操作
1、行内样式
2、计算样式
3、案例
案例1、通过鼠标的移入和移出实现盒子颜色的转换
案例2、通过鼠标点击实现盒子形状的转变
案例3、通过js操作样式（衣服）实现鼠标的移入和移出实现盒子形状的转变
案例4、通过h5的样式操作实现盒子的形状转换
DOM节点（Node）通常对应于一个标签，一个文本，或者一个HTML属性。DOM节点有一个属性用来表示当前元素的类型，它是一个整数：
- Element，元素
- Attribute，属性
- Text，文本
DOM节点创建最常用的便是document.createElement和方法：
一、文本操作
1、 纯文本
2、带有标签效果的文本设置
获取对象里的所有内容： 对象.innerHTML
设置对象里面的内容：对象.innerHTML = '标签字符串' # 原本对象里存在的内容会被你设置的字符串覆盖掉
3.案例
案例1：操作文本节点内容
案例2：点击按钮出来弹框
案例3、点击弹框修改文本内容和地址
点击前
点击后
二、属性操作
1、默认属性（自带属性）
默认属性包括：src alt title href target action method 等
表达方式：对象.href
input 表单元素获取用户输入值 通过 对象.value 对象.checked == true 对象.selected
2、自定义属性
js 设置自定义属性 对象.setAttribute('属性名字','属性值') 获取自定义属性 对象.getAttribute('属性名') 移除自定义属性值 removeAttribute('属性名')
this 属性 1: 普通函数 this就指浏览器顶级对象 window 2：事件函数 this指的是当前触发事件的元素 简而言之就是你点击谁谁就是this
3、案例
案例1：通过表单元素属性点击按钮后显示用户选择了几个
案例2、自定义下标属性
案例3、点击小图切换大图
三、样式操作
1、行内样式
行内演示（设置到元素行内）
特点： 设置： style.属性名 设置到元素行内
获取： style.属性名 可以获取行内的样式，但是获取不到文本内部以及外部样式
2、计算样式
3、案例
案例一；通过鼠标的移入和移出实现盒子颜色的转换
Java基础选择器
案例2、通过鼠标点击实现盒子形状的转变
案例3、通过js操作样式（衣服）实现鼠标的移入和移出实现盒子形状的转变
此方法实际上就是通过改变创建的元素的类名来实现转变的
案例4、通过h5的样式操作实现盒子的形状转换
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.bianchenghao6.com/h6javajc/19795.html