操作页面元素的内容、样式及属性(内置/自定义)

操作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'

注意：

1. 会覆盖类名
2. className就相当于class 但因为class是保留字所以不叫这个
3. 如果想要保留原先的类名 可以：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]获取