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

末蓝、 2022-02-15 01:19 420阅读 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函数替换，也就是找到相应字符串，然后用空字符串替换“”