操作DOM元素的内容、样式、属性(内置/自定义)
1. 操作元素——改变元素内容
方式1:element.innerText
方式2:element.innerHTML
(推荐 W3C标准)
区别:element.innerText不识别HTML标签、去除空格和换行,element.innerHTML识别HTML标签
相同点:这两个属性是可读写的,都可以获取元素里面的内容,读也会识别子标签哦!
const div = document.querySelect('div')
// 不识别!
// div.innerText = '<strong>今天</strong>'
div.innerHTML = '<strong>今天</strong>'
2. 操作元素——修改元素内置属性
常见元素属性:src、href、id、alt、title等
表单元素属性:type、value、checked、selected(下拉框option)、disabled(禁用true/false)
<button>按钮</button>
<input type="text" value="输入内容">
var btn = document.querySelect('button')
var ipt= document.querySelect('input')
btn.addEventListener('click',()=> {
ipt.value = '123'
// this指向的是事件的调用者,此例为btn
})
3. 操作元素——自定义属性
① 获取元素属性值
element.内置属性
element.getAttribute(‘自定义/内置属性’);
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('#div')
// 方式一
console.log(div.id)
// 方式二
console.log(div.getAttribute('id'))
console.log(div.getAttribute('index'))
</script>
② 设置属性值
element.属性 = ‘值’;
element.setAttribute(‘属性’,‘值’); // 注意主要针对于自定义属性
注意: 这里类名直接写class,不需要className
<div id="demo"></div>
<script>
var div = document.querySelector('#div')
div.setAttribute('class','footer')
div.setAttribute('index',1)
</script>
③移除属性 removeAttribute(‘属性’)
<div id="demo" index="1"></div>
<script>
var div = document.querySelector('#div')
div.removeAttribute('index')
</script>
4. 操作元素——修改样式
修改元素的大小、颜色、位置
注意:JS里面的样式属性xxx采取驼峰命名法
JS修改style样式操作,产生的是行内样式,CSS权重比较高!
① element.style.xxx
行内样式操作 (样式比较少 或者 功能简单的情况)
const div = document.querySelector('div')
div.onclick = ()=> {
div.style.width = '250px';
// 驼峰!
div.style.backgroundColor = 'pink'
}
② element.className
类名样式操作(适合样式较多 或者 功能复杂的情况)
在style里写类,在js里给元素修改类名
div.className = 'change'
注意:
- 会覆盖类名
- className就相当于class 但因为class是保留字所以不叫这个
- 如果想要保留原先的类名 可以:
div.className = 'change oldClass'
相当于多类名选择器
③ element.classList
element.classList.add('xx','qqq')
可添加多个,用,分隔element.classList.remove()
移除类名element.classList.toggle()
有则删去类名,无则添加element.classList.replace()
H5新增自定义属性
1. 出现的原因
为了保存并使用数据,有些数据可以保存在页面中而不保存到数据库中;如:有时需要序号index。
2. 使用
可以通过element.getAttribute(‘属性’)获取,element.setAttribute(‘xx’,‘xxx’)改变。
因为自定义属性容易产生歧义,我们不容易判断到底是内置属性还是自定义属性,所以H5新增了自定义属性:
① 规定自定义属性以data-开头并赋值
<div data-index = "1"></div>
② 获取H5自定义属性
a. 和之前的方法一样,getAttribute(‘属性’) 获取
b. H5新增element.dataset.index
或者 element.dataset['index']
ie11才支持获取
// 这里的index是data-后面的,dateset相当于以data开头的自定义属性的集合
<div id="demo" data-index="2"></div>
<script>
var div = document.querySelector('#div')
console.log(div.getAttribute('data-index'))
console.log(div.dataset.index)
console.log(div.dataset[index])
</script>
注意:当H5自定义属性名过长有多个-时,如:data-list-name ,获取时,只能使用驼峰命名法div.dataset.listName or div.dataset[listName]获取