JavaScript DOM接口

最新推荐文章于 2024-07-16 19:32:16 发布

sysuzjz

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量725

点赞数

分类专栏： JavaScript探索文章标签： dom接口

本文链接：https://blog.youkuaiyun.com/sysuzjz/article/details/50687467

版权

JavaScript探索专栏收录该内容

23 篇文章

订阅专栏

本文介绍了JavaScript中获取DOM节点的两种方法，包括传统的getElementById和getElementsByName，以及新的querySelector和querySelectorAll方法。此外，还讲解了如何获取和操纵元素的属性值，包括设置和读取input的value属性，并通过示例展示了如何使用onclick事件改变元素的显示状态。

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

获取DOM node

传统方法

获取DOM节点的传统方法有三种，分别是getElementById, getElementsByTagName, getElementsByName。

getElementById属于document对象的方法，传入参数为节点的id值，返回该id对应的节点。由于id是独一无二的，所以返回值只有一个节点。如果文档中有多个同名id，不同浏览器处理结果可能不同，例如谷歌浏览器是以最后一个为准。例如：

[html]view plain copy 
    
 <html>  
     <head>  
         <title>文档标题</title>  
     </head>  
     <body>  
         <form action="get" id="target-form">  
             <input type="text" name="target-input" value="123" />        
         </form>  
     </body>  
     <script type="text/javascript">  
         var a = document.getElementById("target-form"); // form对应的节点  
     </script>  
 </html>  

切记不要丢了前面的document，否则会报错。

getElementsByName和getElementById很相似，都是document对象里的方法，不同的是传入的参数为节点的name。由于文档中允许存在同个name值的节点，例如<input type="radio" />，又例如多个表单中的同名表单项。所以返回对象是一个nodelist，你也可以把它当成一个数组。

我们还是用上面的例子，把js部分修改一下：

[javascript]view plain copy 
    
 var a = document.getElementsByName("target-input")[0]; // input对应的节点  

getElementsByTagName和前面两个分别有相同之处，又有不同之处。它不仅仅是document对象的方法，还是所有元素节点的方法。它传入的参数是标签名，返回的是nodelist，因为明显同个文档中可以有多个相同标签。

[html]view plain copy 
    
 <html>  
     <head>  
         <title>文档标题</title>  
     </head>  
     <body>  
         <form action="get" id="target-form">  
             <input type="text" name="target-input" value="123" />        
         </form>  
     </body>  
     <script type="text/javascript">  
         var a = document.getElementById("target-form").getElementsByTagName("input")[0]; // input对应的节点  
     </script>  
 </html>  

可能有些人会问，我还看到了getElementsByClassName方法啊。其实，这方法只是部分浏览器产商定下的方法，很实用，但并非W3C标准里的方法，至少IE8及以下是不能用的。

新的方法

HTML5中，新支持了两个节点获取方法，那就是querySelector和querySelectorAll方法，两者都是document或元素节点的方法。它们的参数一样，都是字符串，且以CSS选择器的形式体现，不同的是，querySelector返回首次匹配的节点，而querySelectorAll返回nodeList，查找原则为深度优先和先序遍历。

[html]view plain copy 
    
 <html>  
     <head>  
         <title>文档标题</title>  
     </head>  
     <body>  
         <form action="get" id="target-form">  
             <input type="text" name="target-input" value="123" />  
             <input type="text" name="target-input2" value="123" />  
         </form>  
     </body>  
     <script type="text/javascript">  
         var a = document.querySelector("#target-form").querySelectorAll("input"); // 包含两个input的数组  
     </script>  
 </html>  

获取及操纵属性值

我们终究是要利用这些接口来做点什么的，例如，我们想获取上文那例子里面输入框的值。我们可以这么写：

[javascript]view plain copy 
     
 var a = document.getElementById("target-form").getElementsByTagName("input")[0].value;  

如果我们要设定输入框的值，也类似：

[javascript]view plain copy 
     
 document.getElementById("target-form").getElementsByTagName("input")[0].value = “12345”;  

但这样好像没什么用，我们换种用法，更使用一点。我们经常看到有一种效果，点击按钮，某个东西消失了，再点击，又出现了。我们来模拟一下：

[html]view plain copy 
    
 <!DOCTYPE html>  
 <html>  
     <head>  
         <meta charset="utf-8">  
         <title>文档标题</title>  
     </head>  
     <body>  
         <p>点击按钮此句消失</p>  
         <button id="btn">消失</button>  
     </body>  
     <script type="text/javascript">  
         var btn = document.getElementById("btn"),  
             p = document.getElementsByTagName("p")[0];  
         btn.onclick = function() {  
             if(p.style.display == "none") {  
                 p.style.display = "";  
                 this.innerText = "消失";  
             } else {  
                 p.style.display = "none";  
                 this.innerText = "显示";  
             }  
         }  
     </script>  
 </html>  