ready
论坛版主
论坛版主
  • UID24
  • 粉丝0
  • 关注0
  • 发帖数433
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:8150回复:3

getElementById & getElementsByTagName

楼主#
更多 发布于:2018-08-11 23:03
<!DOCTYPE html>
<html>
<body>
 
<p>Hello World!</p>
 
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>
</div>
 
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第一段文本是:' + y[0].innerHTML);
</script>
 
</body>
</html>


getElementById 按ID


ByTagName 按标签名
ready
论坛版主
论坛版主
  • UID24
  • 粉丝0
  • 关注0
  • 发帖数433
  • 社区居民
  • 忠实会员
  • 原创写手
沙发#
发布于:2018-08-12 22:58

改变 HTML 内容


修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:

document.getElementById(id).innerHTML=new HTML





实例


本例改变了 <p> 元素的内容:




<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>
ready
论坛版主
论坛版主
  • UID24
  • 粉丝0
  • 关注0
  • 发帖数433
  • 社区居民
  • 忠实会员
  • 原创写手
板凳#
发布于:2018-08-12 23:03


实例


本例改变了 <h1> 元素的内容:


<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
   var element=document.getElementById("header");
   element.innerHTML="New Header";
</script>

</body>
</html>
ready
论坛版主
论坛版主
  • UID24
  • 粉丝0
  • 关注0
  • 发帖数433
  • 社区居民
  • 忠实会员
  • 原创写手
地板#
发布于:2018-08-12 23:04
改变 HTML 属性

如需改变 HTML 元素的属性,请使用这个语法:
document.getElementById(id).attribute=new value



实例


本例改变了 <img> 元素的 src 属性:




<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>
游客


返回顶部