javascript如何操作页面元素

要操作页面元素首先要获取页面内元素，获取到元素后，我们就可以对元素进行各种各样的操作，例如改变元素的文字，修改元素的内置属性等等。

（1）改变元素内容

element.innerText

从起始位置到终止位置的内容，但它可以去除html标签，同时空格和黄行也会去掉

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时抱球空格和换行

（2）innerText和innerHTLML的区别

<div></div>
<p>
	文字
	<span>123</span>
</p>
<script>
	var div = document.querySelector('div');
	div.innerText = '<strong>今天是：<strong> 2021';
	// <strong>今天是：<strong> 2021 不识别html标签
	div.innerHtml = '<strong>今天是：<strong> 2021';
	//今天是：html  会识别strong标签
	
	//这两个属性是可读写的 可以获取元素里面的内容
	var p = document.querySelector('p');
	console.log(p.innerText);//我来组成文字 123
	console.log(p.innerHTML);
	//两行输出
	//我来组成文字
	//<span>123</span>
</script>

（3）常见元素的属性操作

1、innerText、innerHTML
2、src、href
3、id、alt、title

（4）表单元素的属性操作

利用DOM可以操作如下表单元素的属性

type、value、checked、selected、disabled

（5）样式属性操作

我们可以通过js修改元素大小、颜色、位置等

1、element.style     行内样式操作
2、element.className 类目样式操作

注意：

​ js里面的样式采取驼峰命名法比如：fontSize，backgroundColor

​ js修改style样式操作，产生的是行内样式，css权重比较高

修改样式较多时，即可使用操作类名方式更改元素样式

class因为是个保留字，因此使用className来操作元素类名属性

className会直接更改元素的类名，会覆盖原先的类名

如果想要保留原来类名，我么可以在赋值时直接赋值多个类名

this.className = "one";
this.className = "one two";