Javascript(笔记22) - DOM基本操作 - 选择元素节点的方法

什么是DOM

DOM ： Document Object Model

DOM 定义了表示和修改文档所需的方法。

DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。

DOM也有说是对HTML和XML的标准编程接口。

DOM的基本操作：

1，对节点的增删改查

查看元素节点

document 

代表整个文档；这个document 有一堆小弟可以用；

document.getElementById() 

通过元素id；ie8以下浏览器不区分id大小写，而且也返回匹配name属性元素

document.getElementByTagName() 

通过标签名；

document.getElementsByName() 

通过 name 属性；只有部分标签name可以生效（表单，表单元素，img ，iframe）

document.getElementsByClassName() 

通过类名，Ie8及以下版本没有，可以多个class一起；

document.querySlector()

CSS选择器，ie7及以下版本没有；

document.querySelectorAll()

CSS选择器，ie7及以下版本没有；

大家以为 html 就代表了整个文档，如果说给 html 上层再套一个标签，那就是 document 了。 可以把 html 理解为整个文档里的根标签。

document 上有很多属性和方法， 今天来了解一下查看元素节点的几个方法： 

getElementById()

通过id来选择元素

这种使用 Id 来选择元素的频率不高，主要是开发规范里前端使用ID的优先级不如后端高；

<div id = "only">123</div>

JS里：

var div = document.getElementById("only");

控制台输出：

选到的是整个标签和标签里的文本；

getElementsByTagName()

通过标签名的方式来选择元素，意思是把所有满足条件的标签元素都取到，并放到 类数组 里面；

最主流的用法，兼容性很好；

比 getElementById 还常用；

<div>123</div>

JS里：因为是个类数组，所以要取得当前元素，还得加个数组下标。

var div = document.getElementsByTagName("div")[0];

控制台：

如果不加数组下标，那么输出的是整个类数组对象：

示例1：

<div></div>
<div></div>
<div></div>

通过 getElementsByTagName 来选择第二个div，通过下标来区分选择的div；

var div = document.getElementsByTagName("div")[1];

控制台：

示例2：

<div>
    <p></p>    // 要求选择这个p 
</div>
<p></p>

JS里

var p = document.getElementsByTagName("p")[0];

getElementsByName()

通过标签 name 来选择元素，理论只有部分标签才能生效，在目前高级浏览器下大部分都支持；

但在低版本浏览器中，有些不兼容，目前也不是很常用；

getElementsByClassName()

通过 class 属性来选择标签 

<div class="demo"></div>

JS里：这个方法，也会返回类数组对象，哪怕只返回一个元素，也要使用下标访问；

var div = document.getElementsByClassName("demo")[0];

querySelector()

可以像使用CSS选择器那样选择元素

这个方法选择出来的是一个，并不是一组；

与这个方法相对应的是 querySelectorAll；

<div>
    <strong>123</strong>
</div>

<div>
    <p><strong>234</strong></p>
</div>

JS 里： 像使用CSS选择那样来选择元素，以下是选择第一个 strong 。 

var strong1 = document.querySelector("div > strong");

要选择第二个 strong 的话： 

var strong2 = document.querySelector("div p > strong");

querySelectorAll()

和 querySelector 相对应的是，这个方法可以返回一组元素，哪怕只选到一个元素也会以类数组的方式返回，所以在取值时，要使用下标。

<div>
    <strong>123</strong>
</div>

<div>
    <p><strong>234</strong></p>
</div>

JS里，对比一下，使用两种选择方法的不同：

var strong1 = document.querySelector("div > strong");
var strong2 = document.querySelectorAll("div > strong");

控制台输出：

strong1 是直接返回元素了；strong2 是返回类数组，所以要选择到 strong 标签的话，要使用下标： 

var strong2 = document.querySelectorAll("div > strong")[0];

这里介绍了4个 get 和 2个 query ，尽管都是查看元素节点的方法，看起来  query 这样能像使用 css 选择器的方式来选择元素节点是方便了很多，但 query 却有个硬伤：不是实时的，只是静态的。

先看HTML

<div></div>
<div class="demo"></div>
<div></div>

再看JS里，先使用 getElementsByTagName 把所有div选中，然后把 demo 选中；

var div = document.getElementsByTagName("div");
var demo = document.getElementsByClassName("demo")[0];

看控制台：

先查看 div 中选中的3个；随后我们删除了 demo , 再看 div 就变2个了；

我们换成 querySelectorAll 来试一下；

var div = document.querySelectorAll("div");
var demo = document.getElementsByClassName("demo")[0];

看控制台：

可以发现，即使删除了 demo ， 但 div 列表里，还是3个元素节点。

但是他也能接受自己的操作，就是删除后对像列表里还在，这就让人迷惑了：

总结：

querySelector 这两个方法选出来的元素节点，是个静态副本，不会随着操作的变化而变化。

而用 get 等系列方法选出来的元素节点，是动态的，随着DOM的操作，表现出实时变化的特性。

所以：

在个别情况下，我们需要使用副本时，可以使用 querySelector 和 querySelectorAll ，一般不用；