原生js怎么取值

使用原生JavaScript获取值的核心方法包括：通过ID选择器获取元素、通过类选择器获取元素、通过标签名选择器获取元素、通过CSS选择器获取元素。这些方法各有优缺点，适用于不同的场景。

通过ID选择器获取元素是最常用且效率最高的方法之一。它使用document.getElementById()函数，通过元素的ID属性来获取DOM元素。以下是详细描述和示例：

通过ID选择器获取元素

使用document.getElementById()函数可以快速定位到页面中的一个唯一元素。ID在整个文档中应是唯一的，因此这种方法的速度非常快且准确。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过ID获取元素</title>
</head>
<body>
    <div id="myElement">Hello World!</div>
    <script>
        var element = document.getElementById('myElement');
        console.log(element.textContent); // 输出: Hello World!
    </script>
</body>
</html>

在这个示例中，document.getElementById('myElement')获取了ID为myElement的div元素，并输出了它的文本内容。

通过类选择器获取元素

使用document.getElementsByClassName()可以获取所有具有某个类名的元素。这个方法返回一个类数组的对象，包含所有匹配的元素。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过类获取元素</title>
</head>
<body>
    <div class="myClass">Hello World 1!</div>
    <div class="myClass">Hello World 2!</div>
    <script>
        var elements = document.getElementsByClassName('myClass');
        for(var i = 0; i < elements.length; i++) {
            console.log(elements[i].textContent);
        }
    </script>
</body>
</html>

在这个示例中，document.getElementsByClassName('myClass')获取了所有类名为myClass的div元素，并输出了它们的文本内容。

通过标签名选择器获取元素

使用document.getElementsByTagName()可以获取所有具有某个标签名的元素。这个方法返回一个类数组的对象，包含所有匹配的元素。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过标签名获取元素</title>
</head>
<body>
    <div>Hello World 1!</div>
    <div>Hello World 2!</div>
    <script>
        var elements = document.getElementsByTagName('div');
        for(var i = 0; i < elements.length; i++) {
            console.log(elements[i].textContent);
        }
    </script>
</body>
</html>

在这个示例中，document.getElementsByTagName('div')获取了所有div元素，并输出了它们的文本内容。

通过CSS选择器获取元素

使用document.querySelector()和document.querySelectorAll()可以通过CSS选择器获取元素。querySelector()返回匹配的第一个元素，而querySelectorAll()返回所有匹配的元素。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过CSS选择器获取元素</title>
</head>
<body>
    <div class="myClass" id="myElement1">Hello World 1!</div>
    <div class="myClass" id="myElement2">Hello World 2!</div>
    <script>
        var element = document.querySelector('.myClass');
        console.log(element.textContent); // 输出: Hello World 1!
        var allElements = document.querySelectorAll('.myClass');
        allElements.forEach(function(el) {
            console.log(el.textContent);
        });
    </script>
</body>
</html>

在这个示例中，document.querySelector('.myClass')获取了第一个类名为myClass的元素，而document.querySelectorAll('.myClass')获取了所有类名为myClass的元素，并输出了它们的文本内容。

通过属性选择器获取元素

使用document.querySelector()和document.querySelectorAll()可以通过属性选择器获取元素。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过属性选择器获取元素</title>
</head>
<body>
    <input type="text" name="myInput" value="Hello World!">
    <input type="text" name="myInput" value="Hello Again!">
    <script>
        var element = document.querySelector('input[name="myInput"]');
        console.log(element.value); // 输出: Hello World!
        var allElements = document.querySelectorAll('input[name="myInput"]');
        allElements.forEach(function(el) {
            console.log(el.value);
        });
    </script>
</body>
</html>

在这个示例中，document.querySelector('input[name="myInput"]')获取了第一个name属性为myInput的input元素，而document.querySelectorAll('input[name="myInput"]')获取了所有name属性为myInput的input元素，并输出了它们的值。

通过属性获取值

除了获取元素本身，很多时候我们需要获取元素的特定属性值，比如输入框的值、图片的src属性等。以下是一些常见的例子：

获取输入框的值

<!DOCTYPE html>
<html>
<head>
    <title>获取输入框的值</title>
</head>
<body>
    <input type="text" id="myInput" value="Hello World!">
    <script>
        var inputElement = document.getElementById('myInput');
        var inputValue = inputElement.value;
        console.log(inputValue); // 输出: Hello World!
    </script>
</body>
</html>

获取图片的`src`属性

<!DOCTYPE html>
<html>
<head>
    <title>获取图片的src属性</title>
</head>
<body>
    <img id="myImage" src="image.jpg" alt="My Image">
    <script>
        var imageElement = document.getElementById('myImage');
        var imageSrc = imageElement.src;
        console.log(imageSrc); // 输出: image.jpg
    </script>
</body>
</html>

通过事件获取元素值

在实际开发中，我们经常需要在某个事件发生时获取元素的值，比如点击按钮时获取输入框的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过事件获取元素值</title>
</head>
<body>
    <input type="text" id="myInput" value="Hello World!">
    <button id="myButton">点击我</button>
    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            var inputValue = document.getElementById('myInput').value;
            console.log(inputValue); // 输出: Hello World!
        });
    </script>
</body>
</html>

在这个示例中，当点击按钮时，通过事件处理函数获取并输出输入框的值。

通过表单获取值

在表单提交时，我们通常需要获取表单中所有输入元素的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过表单获取值</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" value="John Doe">
        <input type="password" name="password" value="123456">
        <input type="submit" value="提交">
    </form>
    <script>
        document.getElementById('myForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单提交
            var formData = new FormData(this);
            for(var pair of formData.entries()) {
                console.log(pair[0] + ': ' + pair[1]);
            }
        });
    </script>
</body>
</html>

在这个示例中，表单提交时，通过FormData对象获取并输出所有输入元素的名称和值。

通过父子关系获取值

有时候，我们需要通过父元素来获取子元素的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过父子关系获取值</title>
</head>
<body>
    <div id="parent">
        <input type="text" id="child" value="Hello World!">
    </div>
    <script>
        var parentElement = document.getElementById('parent');
        var childElement = parentElement.querySelector('#child');
        console.log(childElement.value); // 输出: Hello World!
    </script>
</body>
</html>

在这个示例中，通过父元素parent来获取子元素child的值。

通过兄弟关系获取值

有时候，我们需要通过某个元素来获取其兄弟元素的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过兄弟关系获取值</title>
</head>
<body>
    <input type="text" id="first" value="Hello World!">
    <input type="text" id="second" value="Hello Again!">
    <script>
        var firstElement = document.getElementById('first');
        var secondElement = firstElement.nextElementSibling;
        console.log(secondElement.value); // 输出: Hello Again!
    </script>
</body>
</html>

在这个示例中，通过第一个输入框first来获取其下一个兄弟输入框second的值。

通过数据属性获取值

HTML5引入了数据属性，允许我们在元素上存储额外的信息。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过数据属性获取值</title>
</head>
<body>
    <div id="myElement" data-info="Some information">Hello World!</div>
    <script>
        var element = document.getElementById('myElement');
        var dataInfo = element.getAttribute('data-info');
        console.log(dataInfo); // 输出: Some information
    </script>
</body>
</html>

在这个示例中，通过getAttribute()方法获取元素的data-info属性的值。

通过自定义属性获取值

除了数据属性，我们还可以通过自定义属性来存储和获取值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过自定义属性获取值</title>
</head>
<body>
    <div id="myElement" my-custom-attr="Custom value">Hello World!</div>
    <script>
        var element = document.getElementById('myElement');
        var customAttr = element.getAttribute('my-custom-attr');
        console.log(customAttr); // 输出: Custom value
    </script>
</body>
</html>

在这个示例中，通过getAttribute()方法获取元素的自定义属性my-custom-attr的值。

通过嵌套关系获取值

有时候，我们需要通过嵌套关系来获取深层次元素的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过嵌套关系获取值</title>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <span id="nested">Nested Value</span>
        </div>
    </div>
    <script>
        var outerElement = document.getElementById('outer');
        var nestedValue = outerElement.querySelector('#nested').textContent;
        console.log(nestedValue); // 输出: Nested Value
    </script>
</body>
</html>

在这个示例中，通过外层元素outer来获取深层次元素nested的文本内容。

通过选择器组合获取值

有时候，我们需要组合多种选择器来获取特定元素的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过选择器组合获取值</title>
</head>
<body>
    <div id="container">
        <input type="text" class="inputField" name="field1" value="Value 1">
        <input type="text" class="inputField" name="field2" value="Value 2">
    </div>
    <script>
        var elements = document.querySelectorAll('#container .inputField');
        elements.forEach(function(el) {
            console.log(el.value);
        });
    </script>
</body>
</html>

在这个示例中，通过组合选择器#container .inputField来获取所有匹配的输入框的值。

通过递归获取值

在复杂的DOM结构中，我们可能需要使用递归来获取元素的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过递归获取值</title>
</head>
<body>
    <div id="nestedContainer">
        <div>
            <input type="text" value="Nested Value 1">
            <div>
                <input type="text" value="Nested Value 2">
            </div>
        </div>
    </div>
    <script>
        function getValues(element) {
            var values = [];
            if(element.tagName === 'INPUT' && element.type === 'text') {
                values.push(element.value);
            }
            element.childNodes.forEach(function(child) {
                values = values.concat(getValues(child));
            });
            return values;
        }
        var container = document.getElementById('nestedContainer');
        var values = getValues(container);
        console.log(values); // 输出: ["Nested Value 1", "Nested Value 2"]
    </script>
</body>
</html>

在这个示例中，通过递归函数getValues()来获取嵌套输入框的值。

通过外部数据获取值

在实际开发中，我们可能需要通过外部数据源（如API）来获取值，并将其填充到页面元素中。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过外部数据获取值</title>
</head>
<body>
    <div id="content">Loading...</div>
    <script>
        fetch('https://jsonplaceholder.typicode.com/posts/1')
            .then(response => response.json())
            .then(data => {
                var contentElement = document.getElementById('content');
                contentElement.textContent = data.title;
            });
    </script>
</body>
</html>

在这个示例中，通过fetch API从外部数据源获取数据，并将其填充到content元素中。

通过模板获取值

在一些复杂的应用中，我们可能使用模板引擎生成HTML，并通过JavaScript获取和操作这些模板中的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过模板获取值</title>
</head>
<body>
    <script type="text/template" id="myTemplate">
        <div class="templateContent">Template Value</div>
    </script>
    <div id="container"></div>
    <script>
        var template = document.getElementById('myTemplate').innerHTML;
        document.getElementById('container').innerHTML = template;
        var contentElement = document.querySelector('#container .templateContent');
        console.log(contentElement.textContent); // 输出: Template Value
    </script>
</body>
</html>

在这个示例中，通过模板引擎生成HTML，并通过JavaScript获取模板中的值。

通过Shadow DOM获取值

在使用Web Components时，我们可能需要通过Shadow DOM获取元素的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过Shadow DOM获取值</title>
</head>
<body>
    <div id="host"></div>
    <script>
        var host = document.getElementById('host');
        var shadowRoot = host.attachShadow({mode: 'open'});
        shadowRoot.innerHTML = '<div class="shadowContent">Shadow DOM Value</div>';
        var contentElement = shadowRoot.querySelector('.shadowContent');
        console.log(contentElement.textContent); // 输出: Shadow DOM Value
    </script>
</body>
</html>

在这个示例中，通过Shadow DOM获取shadowContent元素的值。

通过表单元素集合获取值

在处理表单时，我们可能需要获取表单中所有元素的集合，并遍历这些元素来获取它们的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>通过表单元素集合获取值</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" value="John Doe">
        <input type="password" name="password" value="123456">
        <input type="submit" value="提交">
    </form>
    <script>
        var form = document.getElementById('myForm');
        var elements = form.elements;
        for(var i = 0; i < elements.length; i++) {
            if(elements[i].type !== 'submit') {
                console.log(elements[i].name + ': ' + elements[i].value);
            }
        }
    </script>
</body>
</html>

在这个示例中，通过表单的elements集合获取并输出所有输入元素的名称和值。

通过Iframe获取值

在嵌入外部网页时，我们可能需要通过Iframe获取其内容中的值。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>