1. 三个元素不用找,可直接获得:
<html> document.documentElement
<head> document.head
<body> document.body
(不常用)
何时: 只要已经获得了一个节点,找周围节点时
节点树: 包含所有节点(元素,文本)的完整的树结构
1. 父子关系: elem.parentNode 返回一个父节点对象
elem.childNodes 返回子节点对象的集合
elem.firstChild 返回第一个子节点对象
elem.lastChild 返回最后一个子节点对象
2. 兄弟关系:
elem.previousSibling : 返回当前节点的前一个兄弟节点
elem.nextSibling : 返回当前节点的下一个兄弟节点:
问题: 不但包含有用的元素节点,还包含看不见的换行/空格干扰
解决: 今后只要仅关心元素节点时,就可用元素树
元素树: 仅包含元素节点的树结构
1. 父子关系: elem.parentElement 返回一个父元素对象
elem.children 返回子元素对象的集合
elem.firstElementChild 返回第一个子元素对象
elem.lastElementChild 返回最后一个子元素对象
2. 兄弟关系:
返回当前节点的前一个兄弟元素
elem.previousElementSibling :
返回当前节点的下一个兄弟元素:
elem.nextElementSibling :
***elem.childNodes和elem.children返回的都是动态集合:
动态集合(live collection): 不实际存储元素和属性值
每次访问集合都重新查找DOM树
遍历动态结合:
错误: for(var i=0;i<children.length;i++)
后果,循环了几次,就重复查找了几次DOM树
解决: for(var i=0,len=children.length; i<len; i++)
仅在循环开始时查找一次DOM树,将值另存为在len中
(不常用)
如何: 2步:
1. 先遍历所有直接子节点
2. 在遍历直接子节点时,对每个子节点调用和父节点完全相同的方法。
算法: 深度优先遍历: 每次都优先遍历子节点
所有子节点遍历完,才返回遍历兄弟节点
递归的效率: 极低。
解决: 绝大多数递归都可用循环代替
遍历API: 每次仅遍历下一个节点,可用循环反复执行(了解)
1. 节点迭代器:
如何: 2步:
1. 创建迭代器对象:
var iterator=document.createNodeIterator(
parent,NodeFilter.SHOW_ALL, null, false
.SHOW_ELEMENT
);
2. var 原先的节点对象=
iterator.nextNode(); 跳到下一个节点
如果返回null,说明到头了
内置的就是深度优先遍历算法。
4. 按HTML查找: 在整个页面或指定父元素下,查找属性或标签符合要求得元素对象。(常用)
何时: 只要按基本的条件有选择的查找元素时
4种:
1. 按id查找:
var elem=document.getElementById("id");
强调: 只能用document调用!
仅返回一个元素!
2. 按标签名查找:
var elems=parent.getElementsByTagName("标签名");
强调: 任何父元素都能调用!
返回父元素下所有同名标签的元素的集合!
即使仅返回一个元素,也会放在集合中
如果想取出唯一的一个元素,必须加[0]
不仅查找直接子节点,而且查找所有子代节点
3. 按name属性查找: (了解)
var elems=document.getElementsByName("name");
4. 按class属性查找: (了解) (兼容性问题)
var elems=parent.getElementsByClassName("class");
5. 按选择器查找:
① 如果只找一个:
var elem=parent.querySelector("selector");
② 如果找多个:
var elems=parent.querySelectorAll("selector");
返回非动态集合(non-live collection):
实际存储完整数据,反复访问,也不用重新查找DOM树
优: 不会造成反复查找
鄙视题: getElementsXXXX vs querySelector
1. 返回值:
getElements返回动态集合:
优: 首次查找效率高
缺: 可能造成反复查找DOM树
querySelector返回非动态集合:
优: 包含完整属性,无需反复查找DOM树
缺: 首次查找效率低
2. 易用性:
querySelector更灵活, 且更简单
getElements每次只能查找一种结果,无法设置查找条件
更繁琐
总结: jQuery中:
如果一次查找就能找到元素时,首选getElements
如果查找条件复杂时,就用querySelector