获取元素的6 种方法

最新推荐文章于 2023-04-02 21:05:48 发布

丁老师的技术随笔

最新推荐文章于 2023-04-02 21:05:48 发布

阅读量742

点赞数 1

分类专栏：教学授课-javascript

本文链接：https://blog.csdn.net/qustdjx/article/details/80283194

版权

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

18 篇文章 0 订阅

订阅专栏

<!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>

丁老师的技术随笔

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取元素的6 种方法

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;met
复制链接

扫一扫