1. PingCode智库首页
  2. 百科

原生js 怎么获取元素中的值

Edit2 • • 百科

原生js 怎么获取元素中的值

原生JS获取元素中的值：通过ID选择器获取、通过类名选择器获取、通过标签名选择器获取、通过选择器获取。以下将详细解释其中的“通过ID选择器获取”这一方法。

在Web开发中，获取页面元素的值是一个非常常见的操作，尤其是在处理用户输入和动态内容时。使用原生JavaScript，你可以通过多种方式获取元素中的值，最常用的方法包括通过ID、类名、标签名和CSS选择器获取元素。以下详细解释这些方法，并在后续部分提供具体示例和使用场景。

一、通过ID选择器获取

在原生JavaScript中，通过ID选择器获取元素是最直接和常用的方法之一。每个ID在HTML文档中都是唯一的，因此这种方法非常可靠。下面是详细的介绍和示例：

1. 获取元素

使用document.getElementById方法可以轻松地获取具有特定ID的元素。例如：

<input type="text" id="username" value="John Doe">

JavaScript代码如下：

const usernameElement = document.getElementById('username');

2. 获取元素值

获取元素的值可以通过value属性完成。如果是其他类型的元素，如段落或div，可以使用innerText或innerHTML属性。以下是一个示例：

const usernameValue = usernameElement.value; // 对于输入框


const paragraphValue = document.getElementById('paragraph').innerText; // 对于段落

3. 实际应用

以下是一个实际应用的示例，通过获取用户输入的用户名并显示在页面上：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>获取元素值</title>


</head>


<body>


    <input type="text" id="username" value="John Doe">


    <button onclick="displayUsername()">显示用户名</button>


    <p id="displayArea"></p>


    <script>


        function displayUsername() {


            const usernameElement = document.getElementById('username');


            const usernameValue = usernameElement.value;


            document.getElementById('displayArea').innerText = `用户名是：${usernameValue}`;


        }


    </script>


</body>


</html>

二、通过类名选择器获取

类名选择器适用于获取多个具有相同类名的元素。使用document.getElementsByClassName方法可以获取一个类数组（HTMLCollection）：

1. 获取元素

<div class="user">User 1</div>


<div class="user">User 2</div>


<div class="user">User 3</div>

JavaScript代码如下：

const userElements = document.getElementsByClassName('user');

2. 遍历元素

由于getElementsByClassName返回的是一个类数组，需要遍历它来获取每个元素的值：

for (let i = 0; i < userElements.length; i++) {


    console.log(userElements[i].innerText);


}

三、通过标签名选择器获取

标签名选择器适用于获取同一类型的所有元素，例如所有段落<p>或所有输入框<input>。使用document.getElementsByTagName方法：

1. 获取元素

<p>Paragraph 1</p>


<p>Paragraph 2</p>


<p>Paragraph 3</p>

JavaScript代码如下：

const paragraphElements = document.getElementsByTagName('p');

2. 遍历元素

和类名选择器类似，需要遍历获取的类数组：

for (let i = 0; i < paragraphElements.length; i++) {


    console.log(paragraphElements[i].innerText);


}

四、通过选择器获取

CSS选择器提供了更灵活的方式来获取元素。使用document.querySelector和document.querySelectorAll方法可以选择单个或多个元素：

1. 获取单个元素

使用document.querySelector方法可以获取第一个匹配的元素：

<div class="user">User 1</div>


<div class="user">User 2</div>


<div class="user">User 3</div>

JavaScript代码如下：

const firstUserElement = document.querySelector('.user');

2. 获取多个元素

使用document.querySelectorAll方法可以获取所有匹配的元素，返回一个NodeList：

const userElements = document.querySelectorAll('.user');

3. 遍历元素

NodeList可以直接使用forEach方法来遍历：

userElements.forEach(user => {


    console.log(user.innerText);


});

五、实际应用

在实际开发中，结合多种方法获取元素值会更加灵活。以下是一个综合示例，展示如何使用不同的方法获取元素值并进行操作：

<!DOCTYPE html>


<html lang="en">


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>获取元素值</title>


</head>


<body>


    <input type="text" id="username" value="John Doe">


    <div class="user">User 1</div>


    <div class="user">User 2</div>


    <div class="user">User 3</div>


    <p>Paragraph 1</p>


    <p>Paragraph 2</p>


    <p>Paragraph 3</p>


    <button onclick="displayValues()">显示值</button>


    <div id="displayArea"></div>


    <script>


        function displayValues() {


            const usernameElement = document.getElementById('username');


            const usernameValue = usernameElement.value;


            const userElements = document.getElementsByClassName('user');


            let usersText = '';


            for (let i = 0; i < userElements.length; i++) {


                usersText += userElements[i].innerText + ' ';


            }


            const paragraphElements = document.getElementsByTagName('p');


            let paragraphsText = '';


            for (let i = 0; i < paragraphElements.length; i++) {


                paragraphsText += paragraphElements[i].innerText + ' ';


            }


            const firstUserElement = document.querySelector('.user');


            const firstUserText = firstUserElement.innerText;


            document.getElementById('displayArea').innerHTML = `


                <p>用户名是：${usernameValue}</p>


                <p>所有用户：${usersText}</p>


                <p>所有段落：${paragraphsText}</p>


                <p>第一个用户：${firstUserText}</p>


            `;


        }


    </script>


</body>


</html>

通过上述示例，你可以看到如何使用不同的方法获取元素值，并将其显示在页面上。这些方法在实际开发中非常有用，能够帮助你更灵活地操作DOM元素，提高开发效率。

六、推荐项目管理系统

在团队项目管理中，使用高效的项目管理系统是非常重要的。以下推荐两款优秀的项目管理系统：

1. 研发项目管理系统PingCode

PingCode是一款专为研发团队设计的项目管理系统，提供从需求管理、任务管理、缺陷管理到版本管理的一站式解决方案。它支持敏捷开发、持续集成和持续交付，帮助团队提高开发效率和产品质量。

2. 通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，适用于各类团队和项目。它提供任务管理、文件共享、团队协作、进度跟踪等功能，支持团队高效协作，提升工作效率。Worktile界面简洁易用，适合各种规模的团队使用。

通过以上两款项目管理系统，你可以更好地管理团队项目，提高工作效率，实现项目目标。

相关问答FAQs：

1. 如何使用原生js获取元素中的文本内容？

  • 问题： 怎样通过原生js获取元素中的文本内容？
  • 回答： 使用 innerText 属性可以获取元素的文本内容。例如，如果有一个 <div> 元素，你可以使用以下代码获取其文本内容：
var element = document.querySelector('div');
var textContent = element.innerText;
console.log(textContent);

2. 如何使用原生js获取元素的属性值？

  • 问题： 如何通过原生js获取元素的属性值？
  • 回答： 可以使用 getAttribute() 方法来获取元素的属性值。例如，如果有一个 <img> 元素，你可以使用以下代码获取其 src 属性的值：
var element = document.querySelector('img');
var srcValue = element.getAttribute('src');
console.log(srcValue);

3. 如何使用原生js获取表单元素的值？

  • 问题： 如何通过原生js获取表单元素（如输入框、下拉框等）的值？
  • 回答： 可以使用 value 属性来获取表单元素的值。例如，如果有一个输入框 <input>，你可以使用以下代码获取其值：
var inputElement = document.querySelector('input');
var inputValue = inputElement.value;
console.log(inputValue);

希望以上回答能帮到你！如果还有其他问题，请随时提问。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3926453

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部