javascript

最新推荐文章于 2025-08-15 09:01:53 发布

zengshaotao

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量77

点赞数

分类专栏： javascript 文章标签： javascript xhtml ViewUI

javascript 专栏收录该内容

102 篇文章

订阅专栏

<!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=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function searchDOM()
{
  var li=document.getElementsByTagName("li");//获得了所有li标记，在数组里重复存储
  alert(li.length+" "+li[1].tagName+" "+li[2].tagName+" "+li[3].childNodes[0].nodeValue);
  //将标记之间的文本内容也看成了一个节点，为了通用性，有些只有单个文件节点的标记也需要用
  //childNodes[0].nodeValue来获得其单个文本节点的文本内容

  alert(li[1].childNodes[0].nodeValue);
  var ul = document.getElementsByTagName("ul");
  alert(ul[1].childNodes[1].tagName);
  alert(ul[1].childNodes[1].nodeValue);

  var li2=ul[1].getElementsByTagName("li");
  alert(li2.length+" "+li2[1].tagName+" "+li2[2].childNodes[0].nodeValue);
  alert("测试新的");
  var id = document.getElementById("css");
  alert(id.tagName+" "+id.childNodes[0].nodeValue);
  alert("父子节点测试");
  var ml = document.getElementById("myList");
  var domString = "";
  if(ml.hasChildNodes())
  {
   var son = ml.childNodes;
   for(var i=0;i<son.length;i++)
   {
    domString +=son[i].nodeName+"\n";
   }
   alert(son[0].nodeValue);
  }
  alert(domString);
  alert("节点属性的测试");
  var img = document.getElementsByTagName("img")[0];//不能少了s，复数的形式
  alert(img);
  alert(img.getAttribute("title"));
  alert("创建新节点的测试");
  var op = document.createElement("p");
  var pText = document.createTextNode("这是一个新的开始");
  op.appendChild(pText);
  document.body.appendChild(op);
  alert("innerHTML的测试");
  var mt = document.getElementById("mytest");//得到容器标记
  alert(mt.innerHTML);
  mt.innerHTML = "<img src='三清山.jpg' title='魅力三清山' />";
}
</script>
</head>

<body onload="searchDOM()">
<ul>客户端语言
  <li>HTML</li>
  <li>JavaScript</li>
  <li id="css">CSS</li>
</ul>
<ul id="myList">服务器端语言
  <li>JSP</li>
  <li>PHP</li>
  <li>ASP</li>
</ul>
<img src="美丽上饶.jpg" title="美丽上饶" border="0" />
<p>事先在这里写入一行文字，测试appendChild（）方法添加的文本位置</p>
<div id="mytest">
  <span>魅力三清山</span>
  <p>我爱上饶</p>
</div>
</body>
</html>