获取元素的6 种方法

最新推荐文章于 2025-02-04 21:16:52 发布

丁老师的技术随笔

最新推荐文章于 2025-02-04 21:16:52 发布

阅读量787

点赞数 1

分类专栏：教学授课-javascript

本文链接：https://blog.youkuaiyun.com/qustdjx/article/details/80283194

版权

教学授课-javascript 专栏收录该内容

18 篇文章

订阅专栏

本文通过一个简单的HTML页面示例介绍了如何使用不同的方法来选择和操作DOM元素，包括通过ID、标签名、名称及类名进行选择，并展示了如何使用querySelector和querySelectorAll方法。此外还演示了如何通过JavaScript改变输入框的值。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>



<style>

div > input {
	
	border-color:red;
}

.demo{
	
	 background-color:blue;
	}


#test{
	
	
	}


</style>
</head>


<body>

<div>

用户名<input type="text" id="TANGRAM__PSP_3__quick_user" class="input" name="username" value="张三">
密码<input type="text" id="TANGRAM__PSP_3__regMerge"  class="input" name="password" value="888888">

</div>






<script>


//0. by id

//1.tag name

var input = document.getElementsByTagName('input')

console.log(input[0].value)

// 2. name
var username =document.getElementsByName('username')
console.log(username)

var password =document.getElementsByName('password')
console.log(password[0].value)

// 3. class name

var input = document.getElementsByClassName('input')
console.log(input[0].value)

// 4.querySelector

var input =document.querySelector('div > input')

console.log(input)

var input =document.querySelectorAll('div > input')
console.log(input[0].value)
console.log(input[1].value)


// 1.更改用户名为 李四
input[0].value= '李四'


</script>
</body>
</html>