JavaScript DOM操作：元素内容与属性的改变-CSDN博客

本文链接：https://blog.csdn.net/shiliye_csdn/article/details/117362086

这篇博客详细介绍了如何使用JavaScript操作DOM元素，包括改变元素内容、属性，表单元素的属性操作，样式属性调整，以及H5自定义属性的设置与获取。推荐使用innerHTML属性来改变元素内容，通过setAttribute和getAttribute方法处理元素自定义属性，同时强调了排他思想在处理多个元素样式时的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

■ 操作元素

JS的DOM操作可以改变网页内容，结构和样式
可以利用DOM操作元素来改变元素里的内容，属性等

■ 改变元素内容

通过以下两个属性，改变元素的内容

element.innerText
从起始位置到终止位置的内容，但去除html标签，同时空格和换行也会去掉
不识别html标签，非标准

<body>
	<div>点击按钮，显示当前年份</div>
	<p>打开页面，显示当前年份</p>
	<button>按钮</button>
	<script>
		function getYear(){
			var date = new Date();
			var year = date.getFullYear();
			return year;
		}
		
		var div = document.querySelector('div');
		var btn = document.querySelector('button');
		
		//添加事件
		btn.onclick = function(){ 
			div.innerText = getYear();
		}
		//不添加事件
		var p = document.querySelector('p');
		p.innerText = getYear();
	</script>
</body>

element.innerHTML
从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
识别html标签，W3C标准，推荐使用

<body>
	<div></div>
	<p>
		我是文字
		<span>123</span>
	</p>

	<script>
		var div = document.querySelector('div');
		//div.innerText = '<strong>今年是：</strong> 2019'；  //直接显示 <strong>今年是：</strong> 2019，标签不识别
		div.innerHTML = '<strong>今年是：</strong> 2019'；  //"今年是"字体加粗
		
		var p = document.querySelector('p');
		console.log(p.innerText); //输出：我是文字 123， 去除空格和换行
		console.log(p.innerHTML); //输出：原封不动的显示，保留空格和换行
	</script>
</body>

■ 改变元素属性

常用元素的属性操作
innerText，innerHTML改变元素内容
src，href
id，alt，title

<body>
	<button id='btn1'>图片1</button>
	<button id='btn2'>图片2</button>
	<image src='images/pic1.jpg' alt='' title=''></image>
	
	<script>
		var btn1 = document.getElementById('btn1');
		var btn2 = document.getElementById('btn2');
		var img = document.querySelector('image');
		
		btn1.onclick = function(){
			img.src = 'images/pic1.jpg';
			img.title = '图片1';
		}
		
		btn2.onclick = function(){
			img.src = 'images/pic2.jpg';
			img.title = '图片2';
		}
	</script>
</body>

■ 表单元素的属性操作

利用DOM可以操作如下表单的属性
type，value，checked，selected，disabled

<body>
	<button>按钮</button>
	<input type='text' value='输入内容'>
	<script>
		var btn = document.querySelector('button');
		var input = document.querySelector('input');
		
		btn.onclick = function(){
			//inpt.innerHTML = '点击了'; innerHTML只适用于普通盒子，如div
			input.value = '被点击了';
			this.disabled = true; //this 指向的是事件函数的调用者btn
		}
	</script>
</body>

■ 样式属性操作

可以通过JS修改元素的大小，颜色，位置等样式

element.style 行内样式操作
element.className 类名样式操作

var div = document.getElementsByTagName('div');
div.style.backgroundColor = 'red';
div.style.width = '100px';

注：
JS里面的样式采取驼峰命名法，比如fontSize,backgroundColor
修改style样式操作，产生的是行内样式，CSS的权重比较高

var p = document.getElementsByTagName('p');
p.className = 'class1 '; //为p标签加样式类class1
p.className = 'class2 '; //为p标签加样式类class2
p.className = 'class1 class2 '; //为p标签加样式类class1和class2

注：
如果样式修改较多，可以采取操作类名方式更改元素样式
class因为是各保留字，因此使用className来操作元素类名属性
className会直接更改元素的类名，会覆盖原来的类名

■ 排他思想

如果有同一组元素，想要某一个元素实现某种样式，需要用到循环的排他思想算法
排他思想的处理步骤如下，顺序不能颠倒

所有元素全部清除样式
给当前元素设置样式

■ 自定义属性操作

□ 获取属性值

通过以下方式获取属性值

element.属性
获取元素内置属性值
element.getAttribute()
主要用于获得元素自定义的属性(标准)

<body>
	<div id='demo' index='1'></div>
	<script>
		var div = document.querySelector('div');
		console.log(div.id); //输出： demo
		console.log(div.getAttribute('id'));  //输出： demo
		console.log(div.getAttribute('index'));  //输出： 1， index是自定义属性
	</script>
</body>

□ 设置属性值

通过以下方式设置属性值

element.属性 = 值
element.setAttribute = 值

<body>
	<div id='demo' index='1' ></div>
	<script>
		var div  = document.querySelector('div');
		div.id = 'test';
		console.log(div.id); //输出： test
		
		div.setAttribute('id','test1')
		console.log(div.getAttribute('id'));  //输出： test1
		div.setAttribute('index',2);
		console.log(div.getAttribute('index'));  //输出： 2， index是自定义属性
	</script>
</body>

□ 移除属性

通过element.removeAttribute() 可以移除属性

<body>
	<div id='demo' index='1' ></div>
	<script>
		var div = document.querySelector('div');
		div.removeAttribute('index'); //移除属性index, 将div标签里的index属性移除
	</script>
</body>

■ H5自定义属性

自定义属性是为了保存并使用数据，这样有些数据就可以保存到页面中而不用保存到数据库中
有些属性通过属性名，不太容易区分是自定义属性还是内置属性，因此H5新增了自定义属性

□ 设置H5自定义属性

H5规定了自定义属性data- 开头作为属性名并赋值
比如

<div data-index='1'></div>

或者使用js设置

element.setAttribute('data-index','2');

□ 获取H5自定义属性

可以通过以下几种方式获取H5自定义属性：

兼容性获取

element.getAttribute('data-index');

H5新增属性

element.dataset.属性
element.dataset['属性']

dataset是一个集合，里面存放了所有以data-开头的自定义属性
获取H5新增属性，即只能获取data-开头的属性

<body>
	<div getTime='20' data-index='2' data-list-name='andy'></div>
	<script>
		var div = document.querySelector('div');
		console.log(div.getAttribute('getTime'));
		
		div.setAttribute('data-time','20');
		console.log(div.getAttribute('data-index'));
		console.log(div.getAttribute('data-list-name'));

		console.log(div.dataset); //输出：
		console.log(div.dataset.index); //输出：2
		console.log(div.dataset['index']); //输出：2
		console.log(div.dataset.listName); //输出： andy， 如果自定义属性里有多个-链接的单词，获取的时候采取驼峰命名法
		console.log(div.dataset['listName']); //输出： andy
	</script>
</body>