目录
一、文本操作
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://51itzy.com/kjqy/1348.html