文档元素选取和遍历中的一些容易忘记的概念
选取文档元素
- getElementById
根据元素的id属性值,来选取元素,在低于IE8的浏览器中,id不区分大小写,并且对于某些元素也匹配它的name属性值。
- getElementsByName:
根据元素的name属性查找元素。在IE9以前的版本中,对于表单(form),表单元素(input area等),img,iframe等元素也会匹配对应的id值,为了兼容性,不应将同样的值同时分配给不同元素的id和name属性(id和name设置同样的值是没有问题的)。
并且和window对象一样,其中设置了id属性的元素,并且以这个属性值作为变量名的变量还未被使用,会自动成为window或document对象的属性。在window对象中这些元素有以下几种:<a>,<area>,<applet>,<embed>,<form>,<frame>,<frameset>,<iframe>,<img>,<object>。在document对象中只有以下几种<form><img><iframe><applet><embed><object>
- getElementsByTagName
- getElementsByClassName
- querySelectorAll
选取的元素是非实时的。
- querySelector
文档元素的遍历
两种类型的API用于DOM遍历
1.将DOM看成一个节点树(Node Tree)
- parentNode
- childNodes
- firstChild, lastChild
- nextSibling, previoursSibling
- nodeType, nodeValue, nodeName
2.将DOM看成一个元素树(Element Tree)
- children
- firstElementChild, lastElementChild
- nextElementSibling, previoursElementSibling
- childElementCount