DOM编程艺术-节点操作之获取节点

前一篇说了DOM树，主要是了解js和html以及css之间对应的关系，可以通过这样一个结构把两者联系起来。

既然可以联系起来，那就可以通过js来对节点进行一系列操作，从而改变html和css的结构，达到网页交互的目的。

节点的操作可以分为：获取节点；创建节点；修改节点；插入节点；删除节点；

1. 获取节点

在DOM树里面有提到通过父子关系和兄弟关系获取节点，但这种操作可维护性差，因为一旦结构发生变化，元素之间的关系就很可能发生变化，所以节点的获取一定不能基于可能变化的量，而应该是html或者css中存在的唯一的，不会因为关系发生变化而变化的值。

有哪些是唯一值呢，id名，className，tagName这些都是，虽然类名和标签都可以对应多个元素，但是他们本身在html中是不会改变的，而通过父子关系可以获取到他们内部的元素。

基本语法是getElementBy...,也很好理解就是通过...get到某个元素；

1.1 通过id获取节点：getElementById

element=document.getElementById(id), 通过document调用，因为id是document中唯一的。

1.2 通过className获取节点：getElementsByClassName

collection=element.getElementsByClassName；

可以注意到，这里是elements，而不是通过id获取节点的单数形式，这也间接说明了，通过tagName和className是可以获取多个元素的，其结果是一个集合；

1.3 通过标签名获取节点：getElementsByTagName；

collection=element.getElementsByTagName(tagname);

collection是动态的，即后续操作可以改变之前的值；

通过element调用具有某一标签名的集合，可以通过下标获取指定位置的元素，例如：users.getElementsByTagName("li")[2]: 意为获取id为users的div中li标签中的第三个元素，通过类名获取节点也可以这样操作；

users.getElementsByTagName("*"):获取所有后代元素

1.4 通过选择器获取节点：querySelector/All；

list=element.querySelector/All(selector):通过css选择器获取相应节点；

list不是动态的，后续操作不会改变状态；