webAPI-操作元素

1.获取元素

2.事件基础

3.操作元素内容

4.操作元素普通属性

5.操作元素表单属性

6.操作元素样式属性

7.操作元素自定义属性

1.获取元素

• getElementById(‘id’)
• getElementByTagName(‘Tag’)
• getElementByClassName(‘Class’)
• querySelector(’’),类：.类名，id: #id名，标签：标签名,根据指定选择器返回第一个元素对象
• querySelectorAll(’’),根据选择器返回所有元素集合
• document.body、document.documentElemt：特殊获取body与html元素方法。

查看元素对象里面的属性和方法

console.dir(元素名)

2.事件基础

事件三要素

• 事件源 (btn)
• 事件类型 (click)
• 事件处理程序 ()

btn.onclick = function () {
	alert('123')
}

3.操作元素内容

• element.innerText(除去html标签，去掉空格和换行)
• element.innerHTML(包括html标签，保留空格和换行)

4.操作元素普通属性

• src、href
• id、alt、title

const img = document.querySelector('img')
btn.onclick = function () {
	img.src = '';
	img.alt = '';
	img.title = ''
}

5.操作元素表单属性

type、value、checked、selected、disabled

6.操作元素样式属性

• element.style 行内元素操作（修改很少时用）
• element.className 类名样式操作 （修改多时用）

(行内元素操作)

const div = doucment.querySelector('div')
div.onClick = function () {
	//由于事件调用者是div,因此this指向div
	//属性如backGround采取驼峰命名法
	this.style backgroundColor = 'puple'
}

注意两点：

1. 属性采取驼峰命名法如fontSize
2. js修改style样式操作，产生的是行内样式，css权重比较高
   所谓产生的是行内样式，即直接在div元素内添加style,即

<div style="background-color: purple;"></div>

（类名操作）

const div = doucment.querySelector('div')
div.onClick = function () {
	//由于事件调用者是div,因此this指向div
	this.className = 'change'
}

如果想要保留原来的类名，比如div原来有了first的类名，可以保留之前的类名再添加一个类名

this.className = 'first change'

7.操作元素自定义属性

获取属性值的两种方法

• element.属性
• element.getAttribute(‘属性’)

<div id="demo" index = "1"></div>
<script>
	const div = document.querySelector('div')
	console.log(div.id)
	console.log(div.getAttribute('id'))
	console.log(div.getAttribute('index'))
</script>

区别：

• element.属性 获取元素本身自带属性
• element.getAttribute(‘属性’) 主要获取自定义属性，如上面的index

设置属性值的两种方法

• element.属性 = ‘值’
• element.setAttribute(‘属性’,‘值’)