JS获取页面中元素的Value值或文本值的方法

最新推荐文章于 2024-07-25 09:24:40 发布

Yhuanbo

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量4.3k

点赞数 4

分类专栏： javaScript 文章标签： javascript 获取value值

原文链接：https://blog.csdn.net/Annn_kk/article/details/89475036

版权

javaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

首先需要遍历获取表单页面中的页面元素

1.可以通过 getElementsByTagName 方法来获取

getElementsByTagName("标签名称") //代表查询返回所有该标签的元素，因此他是个集合
document.getElementsByTagName("标签") //即查询文档中所有的该标签元素
alert(document.getElementsByTagName("div").length) //返回查询结果的数量，这里结果为 1

获取到元素集合以后，可以通过循环对元素进行遍历，条件为标签 .length

<!DOCTYPE HTML>
<html>

<head>
    <title>test</title>
</head>
<script type="text/javascript">
    //搜索文档下第一个div下的input子节点
    window.onload = function () { //文档加载完毕事件
        var div1 = document.getElementsByTagName("div")[0]; //文档第一个DIV，如果去掉[0]就可以获取到表单中所有的DIV集合
        var inputs = div1.getElementsByTagName("input"); //获取该DIV下的所有input标签元素
        for (var i = 0; i < inputs.length; i++) { //循环获取每个input表单元素值
            var value = inputs[i].value;//通过value获取元素的value值
            var text = inputs[i].innerText;//通过innerText或者innerHTML获取元素的文本值
            alert(value);
            alert(text);
        }
    }
</script>

<body>
    <form name="form1" method="GET">
        <div>
            input1：<input name="input1" type="text" value="测试获取数据1" />
            input2：<input name="input2" type="text" value="测试获取数据2" />
        </div>
    </form>
</body>

</html>

那如果需要获取第一个 input 标签的文本的话，可以这样写

document.getElementsByTagName("input")[0].innerHTML

innerHTML可以作为获取文本的方法也可以作为修改文本内容的方法

element.innerHTML 会直接返回element节点下所有的HTML化的文本内容

比如：获取body下的文本

<body>
    <div>文本</div>
    <div>文本</div>
</body>

document.body.innerHTML    //返回"<div>文本</div><div>文本</div>";

而逆向的可以进行赋值

document.body.innerHTM="<div>文本</div><div>文本</div>"

会生成

<body>
    <div>文本</div>
    <div>文本</div>
</body>

textContent与innerHTML方法类似会返回对象节点下所有的文本内容

但是区别为 textContent返回的内容只有去HTML化的文本节点的内容如上例：

document.body.textContent // 返回"文本文本"

2.当获取到相应文本之后，可以通过replace函数替换，也就是找到相应字符串，然后用空字符串替换“”

var str="hello world!";
str=str.replace("hello","");
//即使用空串替换某一个字符串，则是可以实现去除指定字符串功能

Yhuanbo

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JS获取页面中元素的Value值或文本值的方法

首先需要遍历获取表单页面中的页面元素1.可以通过 getElementsByTagName 方法来获取getElementsByTagName("标签名称") //代表查询返回所有该标签的元素，因此他是个集合document.getElementsByTagName("标签") //即查询文档中所有的该标签元素alert(document.getElementsByTagName("div").length) //返回查询结果的数量，这里结果为 1获取到元素集合以后，可以通过循环对元素进行遍历
复制链接

扫一扫

专栏目录