js中document.querySelector和document.getElementsByTagName有什么区别
时间: 2023-06-18 18:01:58 浏览: 135
`document.querySelector` 和 `document.getElementsByTagName` 是用于获取文档中的元素节点的方法,但它们有以下区别:
- `document.querySelector` 是使用 CSS 选择器语法来获取文档中符合条件的第一个元素节点,而 `document.getElementsByTagName` 是获取文档中指定标签名的所有元素节点。
- `document.querySelector` 返回的是一个元素节点对象,而 `document.getElementsByTagName` 返回的是一个类似数组的 HTMLCollection 对象,需要通过索引来访问其中的元素节点。
- `document.querySelector` 支持更复杂的选择器语法,可以选择元素的属性、子元素,甚至是伪元素,而 `document.getElementsByTagName` 只能根据标签名来选择元素节点。
因此,如果需要获取文档中符合复杂条件的第一个元素节点,建议使用 `document.querySelector`;如果需要获取文档中指定标签名的所有元素节点,建议使用 `document.getElementsByTagName`。
相关问题
<body> <div class="container"> <form action="#" class="login-form"> <h2>欢迎登录</h2> <input type="text" name="username" class="user1" placeholder="用户名"> <input type="password" name="password" class="pass1" placeholder="密码"> <button type="submit" class="sub1">登录</button> </form> </div> <script> //1.获取元素 let user1 = document.querySelector('.user1') let pass1 = document.querySelector('.pass1') let sub1 = document.querySelector('.sub1') var inputs = document.getElementsByTagName('input') console.log(inputs); //注册事件 sub1.onclick = function() { //获取用户输入的账户名和密码 // let username = user1.value // let password = pass1.value console.log(inputs[0].value); console.log(inputs[1].value); //条件判断 if (inputs[0].value == '1' && inputs[1].value == 1) { alert('登录成功') //存储用户输入的效据 // Window.localStorage.setItem('username', username) // Window.localStorage.setitem('password', password) //登录成功跳转页面 选择跳转页面 window.location.replace('http://www.cnsoftbei.com/plus/view.php?aid=826') } else{ alert('用户名或密码错误') } } // 页面一加载就赋值给表单 // user1.value = localstorage.getItem('username') // pass1.value = IocalStorage.getitem('password') </script> </body>
这是一个简单的登录页面的 HTML 代码,使用了表单和 input 元素。在 JavaScript 中,通过获取元素并注册事件,实现了用户输入账户名和密码后的条件判断,如果符合要求,则跳转到指定网址,并存储用户输入的账户名和密码。如果不符合要求,则弹出提示框。未注释的代码中还包含了一些注释,可以帮助我们理解代码的功能。
document.getElementsByTagName 替换
document.getElementsByTagName() 方法返回一个 HTMLCollection 对象,该对象表示与指定标签名称匹配的元素列表。如果您希望获取文档中所有的 p 标签,您可以使用以下代码:
```
var paragraphs = document.getElementsByTagName("p");
```
如果您想要使用更强大的选择器语法,您可以使用 document.querySelectorAll() 方法。例如,以下代码将返回文档中所有类名为 "example" 的 div 元素:
```
var examples = document.querySelectorAll("div.example");
```
此外,如果您仅需要匹配一个元素,您可以使用 document.querySelector() 方法。例如,以下代码将返回文档中第一个类名为 "example" 的 div 元素:
```
var example = document.querySelector("div.example");
```
阅读全文