JavaScript DOM接口

本是古典何须时尚 2022-08-20 08:30 166阅读 0赞

## 获取DOM node ##

### 传统方法 ###

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

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

**\[html\]**  [view plain][]  [copy][view plain]

1.  **<****html****>**  
2.      **<****head****>**  
3.          **<****title****>**文档标题**</****title****>**  
4.      **</****head****>**  
5.      **<****body****>**  
6.          **<****form** action="get" id="target-form"**>**  
7.              **<****input** type="text" name="target-input" value="123" **/>**        
8.          **</****form****>**  
9.      **</****body****>**  
10.     **<****script** type="text/javascript"**>**  
11.         var a = document.getElementById("target-form"); // form对应的节点  
12.     **</****script****>**  
13. **</****html****>**

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

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

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

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  **var** a = document.getElementsByName("target-input")\[0\]; // input对应的节点

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

**\[html\]**  [view plain][]  [copy][view plain]

1.  **<****html****>**  
2.      **<****head****>**  
3.          **<****title****>**文档标题**</****title****>**  
4.      **</****head****>**  
5.      **<****body****>**  
6.          **<****form** action="get" id="target-form"**>**  
7.              **<****input** type="text" name="target-input" value="123" **/>**        
8.          **</****form****>**  
9.      **</****body****>**  
10.     **<****script** type="text/javascript"**>**  
11.         var a = document.getElementById("target-form").getElementsByTagName("input")\[0\]; // input对应的节点  
12.     **</****script****>**  
13. **</****html****>**

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

### 新的方法 ###

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

**\[html\]**  [view plain][]  [copy][view plain]

1.  **<****html****>**  
2.      **<****head****>**  
3.          **<****title****>**文档标题**</****title****>**  
4.      **</****head****>**  
5.      **<****body****>**  
6.          **<****form** action="get" id="target-form"**>**  
7.              **<****input** type="text" name="target-input" value="123" **/>**  
8.              **<****input** type="text" name="target-input2" value="123" **/>**  
9.          **</****form****>**  
10.     **</****body****>**  
11.     **<****script** type="text/javascript"**>**  
12.         var a = document.querySelector("\#target-form").querySelectorAll("input"); // 包含两个input的数组  
13.     **</****script****>**  
14. **</****html****>**

## 获取及操纵属性值 ##

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

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  **var** a = document.getElementById("target-form").getElementsByTagName("input")\[0\].value;

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

**\[javascript\]**  [view plain][]  [copy][view plain]

1.  document.getElementById("target-form").getElementsByTagName("input")\[0\].value = “12345”;

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

**\[html\]**  [view plain][]  [copy][view plain]

1.  <!DOCTYPE html**>**  
2.  **<****html****>**  
3.      **<****head****>**  
4.          **<****meta** charset="utf-8"**>**  
5.          **<****title****>**文档标题**</****title****>**  
6.      **</****head****>**  
7.      **<****body****>**  
8.          **<****p****>**点击按钮此句消失**</****p****>**  
9.          **<****button** id="btn"**>**消失**</****button****>**  
10.     **</****body****>**  
11.     **<****script** type="text/javascript"**>**  
12.         var btn = document.getElementById("btn"),  
13.             p = document.getElementsByTagName("p")\[0\];  
14.         btn.onclick = function() \{  
15.             if(p.style.display == "none") \{  
16.                 p.style.display = "";  
17.                 this.innerText = "消失";  
18.             \} else \{  
19.                 p.style.display = "none";  
20.                 this.innerText = "显示";  
21.             \}  
22.         \}  
23.     **</****script****>**  
24. **</****html****>**

在这里，我们操作的是元素节点p里面的属性节点style，修改其display属性，从而达到修改CSS的目的。

[view plain]: http://blog.csdn.net/sysuzjz/article/details/43774129#