修改元素的文本
对象.innerText 属性
const box = document.querySelector('.box')
box.innerText = '666'
显示纯文本,不解析标签
对象.innerHTML 属性
和innerText唯一的区别就是HTML能识别标签
操作元素样式属性
1.通过style操作css
对象.style.样式属性 = 值(样式属性为多组单词时用小驼峰命名法)
例:
box.style.width = '300px'
box.style.backgroundColor = 'pink'
2.通过操作类名(className)操作css
元素.className = ‘类名’
例:
<style>
div{
width: 300px;
height: 200px;
background-color: aquamarine;
}
.box{
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
<body>
<div></div>
<script>
const div = document.querySelector('div')
div.className = 'box'
</script>
</body>
注:className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名,两个类名用空格隔开
例:div.className = ‘box1 box2’
3.通过操作classList操作css
这种方法解决了className容易覆盖以前的类名,可以通过classList追加和删除类名
语法:
元素.classList.add('类名')//追加
元素.classList.remove('类名')//删除
元素.classList.toggle('类名')//切换
操作表单元素
表单.value = ‘用户名’
表单.type = ‘password’
自定义属性
data-自定义属性,在标签上一律以data-开头,在DOM对象上一律以dataset对象方式获取