谈谈js中DOM，即文档对象模型

时间：2017-06-13

DOM即文档对象模型：建立DOM的目的就是为了你可以重构整个HTML页面，进行添加、改变、或重排页面上的项目。
看看最简单的html文件：

<html>

<head>

</head>

<body>

<h1>hello phpddt.com</h1>

<p>Hello world!</p>

</body>

</html>

在看看下图：

很清晰的看到：根节点只有一个<html>,他有两个子节点：<head>和<body>,同理下面还有子节点！
既然你想对html页面进行重构，你就得获得节点的值，那么怎么获得节点的值呢？
（1）通过getElementById() 和 getElementsByTagName() getElementsByName()
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。注意返回的是一个值
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。注意返回的是一个数组
getElementsByName() 方法可返回带有指定名称的对象的集合。主要返回的是一个数组，从Element后面的s也能看出来！
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
从下面一个例子大家就能完全理解：
自己去测试下吧，从上面可以很容易看出三者的区别了！

<html>
 <head>
  <meta charset="utf-8">
  <title> php点点通-www.phpddt.com </title>
 </head>
<script>
 function getId(){
  $val = document.getElementById("myId");
  alert($val.innerHTML);
 }
    function getName()
   {
   var x=document.getElementsByName("myInput");
   alert(x.length);
   }
 function getTagName(){
   var x=document.getElementsByTagName("input");
   alert(x.length);
 }

</script>
 <body>
  <p id='myId'>这是对getElementById方法的演示</p>
  <input type="button" onclick="getId()" value="getElementById()测试"><hr>
  <input name="myInput" type="text" size="20" />
  <input name="myInput" type="text" size="20" /><br />
  <input type="button" onclick="getName()" value="getElementsByName()测试"><hr>
  <input type="button" onclick="getTagName()" value="getElementsByTagName()测试">
 </body>
</html>

（2）通过parentNode、firstChild 以及 lastChild ，在文档中进行“短距离的旅行”。

<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>Untitled Document</title>  
        <script language="JavaScript">  
             function test1() {
                 var node = document.getElementById("imgid2");  
                 var pimg = node.parentNode.firstChild;
                 var inpu = node.parentNode.nextSibling;
                 alert(pimg.value);
                 alert(inpu.value);
             }
        </script>  
    </head>  
    <body>  
    <div>
        <a id ="aid">
            <img id ="imgid" value="img1" />
            <img id ="imgid2" value="img2" />
        </a>
        <input type="text" value="input"/>
    </div>
        <input type="button" value="GOGO" onClick="test1();" />  
    </body>  
</html>

上一条：js实现网页收藏功能，动态添加删除网址 下一条:javascript面向对象实例属性和实例方法

谈谈js中DOM，即文档对象模型

相关文章

最新文章