【js】原生JS获取元素和修改元素属性

ゝ一世哀愁。 2022-11-26 12:00 234阅读 0赞

原生js获取标签可以使用内置对象document，获取到标签之后可以直接获取或修改属性

#### 1.document获取标签 ####

getElementById()	根据id获取元素，只会返回第一个元素
    getElementsByName()	 获取所有指定name的元素集合
    getElementsByTagName()	返回所有指定标签的元素集合

#### 2.修改元素 ####

属性名在js中的写法

*  html的属性和js里面属性大多数写法一样，但是 **“class” 属性写成 “className”**
 *  “style” 属性里面的属性，有横杠的改成驼峰式，比如：**“font-size”改成”style.fontSize”**

<!DOCTYPE html>
    <html>
    <head>
    	<title>js</title>
    	<style type="text/css">
    		.divCls{ 
    			height: 100px;
    			width: 200px;
    			background: gray;
    		}
    	</style>
    	<script type="text/javascript">
    		//页面加载完之后执行该匿名函数
    		window.onload = function(){ 
    			var obj1 = document.getElementById('nameInput');
    			console.log(obj1.value) //获取属性的值
    			obj1.style.width = '300px'; //修改style属性的width值
    			obj1.style.fontSize = '30px'; //修改style的font-size的值
    
    			var obj2 = document.getElementById('divId');
    			//修改该标签内的内容
    			obj2.innerHTML = '<a href="https://www.baidu.com">这是一个被修改过的div标签</a>'
    		}
    		
    	</script>
    </head>
    <body>
    	<input id="nameInput" style="width: 100px" type="text" name="userName" value="请输入姓名"/>
    	<div id="divId" class="divCls">这是一个div标签</div>
    </body>
    </html>