获取修改元素文本

 

使用nodrValue获取和修改

noderValue属性可以读节点文字

<!DOCTYPE html>
<html>
    <head>
        <title>使用nodeValue获取和修改</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .mycolor{
                color;#fff;
                background-color: #99ff66；
            }
            .steam}{
                color: #ff0033;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li id="a">油条</li>
            <li id="b">包子</li>
            <li id="c">米饺</li>
            <li id="d"><a id="yufen">鱼粉</a></li>
        </ul>
        <script>
            var tempel = document.getElementById("a");
            var value = tempel.firstChild.nodeValue;
            alert("" + value);
            tempel.firstChild.nodeValue = "三鲜粉";

              var tempel = document.getElementById("c");
            var value = tempel.firstChild.nodeValue;
            alert("" + value);
            tempel.firstChild.nodeValue = "米粉";
        </script>
    </body>
</html>

使用textContent获取和修改

textContent属性可以获取更新包含元素

 

<!DOCTYPE html>
<html>
    <head>
        <title>使用textContent获取和修改</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .mycolor{
                color;#fff;
                background-color: #99ff66；
            }
            .steam}{
                color: #ff0033;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li id="a">油条</li>
            <li id="b"><em>在家吃</em>包子</li>
            <li id="c">米饺</li>
            <li id="d"><a id="yufen">鱼粉</a></li>
        </ul>
        <script>
            var tempel = document.getElementById("a");
            var value = tempel.textContent;
            alert("获取到的值是" + value);
            tempel.firstChild.textContent = "三鲜粉"; var tempel = document.getElementById("c");
            var value = tempel.textContent;
            alert("获取到的值是" + value);
            tempel.firstChild.textContent = "米粉";
        </script>
    </body>
</html>

使用inner HTML获取和更新

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

 

<!DOCTYPE html>
<html>
    <head>
        <title>使用innerHTML获取和更新</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .mycolor{
                color;#fff;
                background-color: #99ff66；
            }
            .steam}{
                color: #ff0033;
            }
        </style>
    </head>
    <body>
        <ul id="ul">
            <li id="a">油条</li>
            <li id="b"><em>在家吃</em>包子</li>
            <li id="c">米饺</li>
            <li id="d"><a id="yufen">鱼粉</a></li>
        </ul>
        <script>
            var tempel = document.getElementById("a");
            var value = tempel.innerHTML;
            alert("获取到的值是" + value);
            tempel.innerHTML="我们去小区门口吃<span style'color:red'>三鲜粉</span>"; var tempel = document.getElementById("c");
            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>
        <title>获取修改value</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </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>