使用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>