通过js获得input文本框输入的值

如何通过js获得input文本框输入的值。

前言

我们编写的被载入浏览器的HTML页面都是一个 Document 对象。对于Document对象可以使我们通过代码(比如javascript)对HTML页面中的所有元素进行访问。比如div标签元素、span元素、input元素等等。

Document对象具有以下的属性：

Body：提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 <frameset>。

cookie：设置或返回与当前文档有关的所有 cookie。

domain：返回当前文档的域名

lastModified：返回文档被最后修改的日期和时间。

referrer：返回载入当前文档的文档的 URL。

title：返回当前文档的标题。

URL: 返回当前文档的 URL。

Document 对象的方法：

open():打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。

close():关闭用 document.open() 方法打开的输出流，并显示选定的数据。

getElementById():返回对拥有指定 id 的第一个对象的引用。

getElementsByName():返回带有指定名称的对象集合。

getElementsByTagName():返回带有指定标签名的对象集合。

write():向文档写 HTML 表达式或 JavaScript 代码。

writeln():等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

二．实例

通过上述的document对象及其方法我们可以采用js获取input文本框输入的内容，在html中input也是元素内容，代码如下

<input id='inputValueID' type='text' style='margin-left: 18px;width: 80px; border-radius: 5px; outline: medium; text-align: center; border: 1px solid #666666;'/>

通过id以及document对象的getElementById()方法，我们可以获取其值代码如下

function selectValue() {

        //声明value变量并将获取的值赋给value

        var value = document.getElementById("inputValueID").value;

        //窗口弹出input文本框输入的值

        alert(value);

    }

结果如下

同样，还可以通过getElementsByName方法和getElementsByTagName方法获取值。

getElementsByName():

<input name='inputValueID' type='text' style='margin-left: 18px;width: 80px; border-radius: 5px; outline: medium; text-align: center; border: 1px solid #666666;'/>

function selectValue() {

        //声明value变量并将获取的值赋给value

        var value = document.getElementByName("inputValueID").value;

        //窗口弹出input文本框输入的值

        alert(value);

    }

getElementsByTagName():

function selectValue() {

        //声明value变量并将获取的值赋给value

        var value = document.getElementByName("input").value;
//如果是p标签则是,
        var value = document.getElementByName("P").value;
//如果传递的是*,返回所有元素的列表，元素排列的顺序就是它们在html中的顺序。
        var value = document.getElementByName("*");
        //窗口弹出input文本框输入的值
        alert(value);

    }

申明：以上关于document介绍部分内容参考W3Cschool,如有侵权，联系作者删除。