二、document对象、获取元素、节点、遍历树
二、document对象、获取元素、节点、遍历树
一、document对象
控制台打印document——>整个html结构
console.log(document);
其实document是一个对象,内部有方法和属性。
console.dir(document);
…
二、获取元素
2.1 document.getElementById()
功能:通过标签id属性获取 一个 元素。
兼容性:
-
IE8以下获取标签id属性不区分大小写。 IE8以下若标签没有id属性,匹配name属性。
开发规范:id一般不作为样式去定义,常用于对接后端。即不会用id选择器去书写css。
2.2 document.getElementsByTagName()
功能:通过标签名获取 一组 元素。
兼容性:好,不必考虑。
2.3 document.getElementsByClassName()
功能:通过标签的class属性获取 一组 元素。
兼容性:IE8及以下没有这个方法。
2.4 document.getElementsByName()
功能:通过标签的name属性获取 一组 元素。无论标签是否有name属性。
兼容性:IE9及以下只能用于有name属性的标签元素。例如<a>,name 属性用于指定锚(anchor)的名称。
2.5 document.querySelector()
功能:通过css选择器获取 一个 元素,如果有重复选择第一个。
兼容性:IE8以下不支持。
缺点:性能问题,不能实时更新。
注:选择div标签直系子元素p:
var p = document.querySelector(div > p);
2.5 document.querySelectorAll()
功能:通过css选择器获取 一组 元素。
兼容性:IE8以下不支持。
缺点:性能问题,不能实时更新。
三、节点 ※:parentNode 、childNode
节点包含元素,元素节点又叫做DOM元素。
document对象中的属性:
-
parentNode 父节点,节点的顶级父节点为document,再往上为null。 childNode 子节点。 firstChild / lastChild 第一个孩子节点/最后一个孩子节点。 previousSibling / nextSibling 上一个兄弟节点/下一个兄弟节点。
打印一下节点:
<ul> <li> <!-- 这里是一个注释 --> <a href="">点击</a> <p>我是段落标签</p> <h1>我是标题标签</h1> </li> </ul> <script> var li = document.getElementsByTagName(li)[0]; console.log(li.childNodes); console.log(li.childNodes.length); </script>
节点:
注:IE5都支持(兼容性好!)。
四、遍历树
4.1 遍历节点树
parentNode,父节点。顶层父节点为document,再往上为null。
4.2 遍历元素节点数
IE9以下不支持:
-
parentElement,父元素节点。遍历到顶层是HTML元素,再往上为null。 childElementCount = children.lenth,子元素的个数。 firstElementChild / lastElementChild,第一个孩子元素节点/最后一个孩子元素节点。 previousElementSibling / nextElementSibling,上一个兄弟元素节点/下一个兄弟元素节点。
IE7及以下不支持:
children,子元素节点。