获取修改元素文本
使用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>?
轉載于:https://www.cnblogs.com/qq3069418554/p/9497382.html
總結
- 上一篇： p2657 windy数
- 下一篇： AVL树：解决BST可能导致的长链问题