javascript学习笔记3：DOM操作之选取文档元素

Element类型代表该文档中的一个元素；Document类型代表一个HTML或XML文档。Document和Element是两个重要的DOM类。

文档节点部分层次结构：

推荐个在线UML作图工具Process on，不要太好用，上图就是用它做的

http://processon.com/

查询文档的一个或者多个元素：

• 用指定的id属性；
• 用指定的name属性；
• 用指定的标签名字；
• 用指定的css类；
• 匹配指定的css选择器；

---

1. 通过id选取元素

   任何HTML元素可以有一个id属性，在文档中该值必须唯一，可以用Document对象的getElementById()方法选取一个基于唯一ID的元素。

var selector1 = document.getElementById("section1");

1. 通过名字选取元素

   类似id，name是给元素分配名字，但是区别于id，name属性的值不是必须唯一：多个元素可能有同样的名字。可以用Document对象的getElementsByName()方法。

var radiobuttons = document.getElementByName("favorite_color");
//返回一个NodeList对象

1. 通过标签名选择元素
   Document对象的getElementsByTagName()方法可用来获取指定标签名的所有HTML或XML元素。

//返回一个NodeList对象
var spans = document.getElementsByTagName("span");

//选取文档中的第一个<p>元素
var para1 = document.getElementsByTagName("p")[0];

//选取文档中第一个<p>元素中的所有<span>元素
var paraSpan1 = para1.getElementByTagName("span");

1. 通过CSS类选取元素
   zaiHTML文档上调用getElementsClassName()方法，他的返回值是NodeList对象。

//查找其class属性值包括warning的所有元素
var warnings = document.getElementsClassName("warning");

1. 通过CSS选择器选取元素
   元素可以用id、标签名或类来描述：

#nav    //id = "nav"的元素
div     //所有<div>元素
.warning //所有在class属性中包含了"warning"的元素 

更一般的，元素可以基于属性值来选取：

p[lang = "fr"]  //<p lang="fr">
*[name = "x"]   //所有包含name = "x"的元素