获取修改元素文本

最新推荐文章于 2024-01-07 15:17:56 发布

weixin_33795806

最新推荐文章于 2024-01-07 15:17:56 发布

阅读量113

点赞数

原文链接：http://www.cnblogs.com/qq3069418554/p/9497382.html

版权

使用nodeValue获取和修改

nodeValue属性可以读取节点文字。

<!DOCTYPE html>
<html>
    <head>
        <title>访问元素</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .mycolor{
                color:#fff;
                background-color: #F8DD88;
            }
            .steam{
                color: red;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li id="ali">油条</li>
            <li id="bli">包子</li
            ><li id="cli"><a id="yufen">米饺</a></li
            ><li id="dli">鱼粉</li>
        </ul>
        <script>
            // 查找子节点
            var tempel = document.getElementById("ali");   
            var value=tempel.firstChild.nodeValue;
            alert("获取到的值是："+value);
            tempel.firstChild.nodeValue="三鲜粉";
        </script>
    </body>
</html>

使用textContent获取和修改

textContent属性可以获取或更新包含元素（及其子元素）中的文本。

<!DOCTYPE html>
<html>
    <head>
        <title>访问元素</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .mycolor{
                color:#fff;
                background-color: #F8DD88;
            }
            .steam{
                color: red;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li id="ali"><em>在家吃</em>油条</li>
            <li id="bli">包子</li
            ><li id="cli"><a id="yufen">米饺</a></li
            ><li id="dli">鱼粉</li>
        </ul>
        <script>
            // 查找子节点
            var tempel = document.getElementById("ali");   
            var value=tempel.textContent;
            alert("获取到的值是："+value);
            tempel.textContent="三鲜粉";
        </script>
    </body>
</html>

使用innerHTML获取和更新

innerHTML不仅包含文本，还包含子元素标签。

<!DOCTYPE html>
<html>
    <head>
        <title>访问元素</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .mycolor{
                color:#fff;
                background-color: #F8DD88;
            }
            .steam{
                color: red;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li id="ali"><em>在家吃</em>油条</li>
            <li id="bli">包子</li
            ><li id="cli"><a id="yufen">米饺</a></li
            ><li id="dli">鱼粉</li>
        </ul>
        <script>
            // 查找子节点
            var tempel = document.getElementById("ali");   
            var value=tempel.innerHTML;
            alert("获取到的值是："+value);
            tempel.innerHTML="我们去小区门口吃<span style='color:red'>三鲜粉</span>";
        </script>
    </body>
</html>

获取修改value

有些元素有value属性，如input、botton、select等，使用value属性可以修改它的值。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>修改value</title>
    </head>
    <body>
        <input type="text" name="hello" value="Hello world" id="hello">
        <script>
            var el=document.getElementById("hello");   
            alert( el.value);
            el.value="你好"
        </script>
    </body>
</html>