DOM查找元素

1. 查找元素5种：

1. 按id查找1个元素对象：
var elem=document.getElementById("id值");
何时使用：1. 元素必须有id
2. 精确查找某一个元素
2. 按标签名(TagName)查找多个元素：
var elems=element.getElementsByTagName("标签名");
返回值：HTMLCollection类型的对象——动态集合
如何获得一个元素对象：
elems[i]
elems["name值"]——元素必须有name属性
何时使用：查找父元素下统一标签名的一批子元素
优：屏蔽空字符节点的干扰
总结：向上爬：parentNode;
向下爬：getElementsByTagName
缺：不但找到直接子元素，还包括所有子代元素

购物车：
补：事件处理函数中的this，指代当前正在触发的对象

3. 按name属性查找：
var elem=document.getElementsByName("name值");
直观获得表单中元素的API：
document.forms-->当前网页中所有表单对象
var form=document.forms["id值"]
var chks=form["name值"]
如果只找到一个，返回一个对象
如果找到多个，返回HTMLCollection集合

4. 按class属性查找：HTML5 新
var elems=node.getElementsByClassName("class名");
返回动态集合

5. 按选择器查找：Selector API——JQuery核心
优点：1. 没有兼容性问题：
2. 原生API，执行效率高！
3. 返回值：包含全功能，全属性的元素对象集合
缺：极个别CSS3选择器，可能不支持
比如：:not([])-->否定伪类

2个：
1. 仅返回1个匹配的元素：
var elem=element.querySelector("选择器");
何时使用：仅查找一个元素时
如果找不到，返回null
2. 返回所有选择器匹配的元素对象
var elems=element.querySelectorAll("选择器");
何时使用：查找多个元素时

佳悦（深圳）科技有限公司

美源自这里

微信：JaJoyYOJOY

微博：http://weibo.com/JaJoy

官网：http://www.galajoy.com/

联系&投稿：service@galajoy.com