JavaScript&jQuery.获取修改元素文本
获取修改元素文本
使用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>
