【脚本化文档】——DOM概览&选取文档元素

——DOM概览，一张图搞定

Document节点代表整个文档，Element节点代表的是html元素
document节点包含文字和空格，element节点只包含标签节点

——选取文档元素

1、通过用指定的ID获取文档

document.getElementById("id名称")

下面封装了一个函数，用于同时查找多个具有ID的元素

function getElements(/*ids...*/) {      //任意多个字符串ID参数
    var elements = {};                           
    for(var i = 0; i < arguments.length; i++) {  
    // 遍历每个参数
        var id = arguments[i];  // 参数就是元素的id
        var elt = document.getElementById(id);   // 通过id获取元素
        if (elt == null) // 如果元素为定义, 
            throw new Error("No element with id: " + id); // 抛出一个错误
        elements[id] = elt; // id和元素之间的映射
    }
    return elements;  // 返回元素映射id集
}

---

2、用指定的name属性获取元素

document.getElementsByName("name名称")//注意这里返回的是一个NodeList(节点集)

---

3、用指定的标签名获取元素

document.getElementsByTagName("标签名称")

3.1：HTML标签名称不区分大小写，SPAN和span是一样的
3.2：给document.getElementsByTagName(“”)传递通配符*的时候，将获得整个文档的节点

---

4、用指定的CSS类获取元素

document.getElementsByClassName("类名称")

4.1：返回的是一个实时的NodeList对象
4.2：多个类名时，类标识符之间用空格隔开

---

5、匹配指定的CSS选择器获取元素(新标准，IE8及之前不支持)

//返回所有符合CSS选择器的节点，组成一个NodeList
document.querySelectorAll("支持所有CSS选择器");
//返回第一个符合CSS选择器的节点
document.querySelector("支持所有CSS选择器")

---

6、document.all[ ] (基本废弃)

---

期待你阅读下一篇博文【脚本化文档】——文档结构和遍历

点击这里下载思维导图——思维导图文件下载