javascript W3C.DOM操作HTML(一)-优快云博客

本文链接：https://blog.youkuaiyun.com/gcguchao/article/details/83434425

本文介绍了三种实用的DOM操作方法：通过ID获取元素、通过名称获取元素集合及通过标签名获取所有元素。并通过实例展示了如何使用这些方法修改元素属性、响应鼠标事件及遍历元素的所有属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

三个非常有用的方法：document.getElementById("ID")；getElementsByName("NAME")；Element ele = document.getElementsByTagName("input");

前两个方法返回所对应的Element对象，第三个方法则返回Element的数组，可通过下标的方式对其进行访问，例如：ele[0],ele[1]...等，得到了Element对象，就可以进一步的操作该元素，例如：ele.getAttribute(value),ele.setAttribute(key,value)等，下面就举几个例子供大家来模仿！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM操作</title>
<style type="text/css">

</style>
</head>
<body>
<p><a id="netease" href="http://www.163.com" title="网易首页">网易</a></p>
<script type="text/javascript">
  var elem=document.getElementById("netease");

  alert(elem.getAttribute('title'));
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM操作</title>
<style type="text/css">

</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM操作</title>
<style type="text/css">
/*实际中可以使用CSS实现鼠标滑过效果，这里只是演示js使用*/
</style>
</head>
<body>
<p><a id="netease" href="http://www.163.com" title="网易首页"    style="color:#668;text-decoration:none;">网易</a></p>
<script type="text/javascript">
  var elem=document.getElementById("netease");
  elem.onmouseover=function()
  {
      this.innerHTML="163";
      this.removeAttribute("style");
  }
  elem.onmouseout=function()
  {
      this.innerHTML="网易";
  }  
</script>
</body>
</html> </head>
<body>
<p><a id="netease" href="http://www.163.com" title="网易首页">网易</a></p>
<script type="text/javascript">
  var elem=document.getElementById("netease");
  elem.setAttribute('title','163主页');
</script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM操作</title>
<style type="text/css">

</style>
</head>
<body>
<p><a id="netease" href="http://www.163.com" title="网易首页"    myAttr="hello">网易</a></p>
<script type="text/javascript">
  var elem=document.getElementById("netease");
  var str="";
  for(i=0;i<elem.attributes.length;i++)
  str+="<span style='color:red'>"+elem.attributes[i].nodeName+"</span>:"+elem.attributes[i].nodeValue+"<br/>";
  document.write(str);
</script>
</body>
</html>