getElementById 和 querySelector 对比

背景:

        DOM最初设计是为了解析XML而设计的,之后沿用到HTML上。

        DOM分为 core 和 html,NodeList接口在core中体现,HTMLCollection 在html 部分体现,一般返回的这两类对象均为动态的(每当文档发生变化时,他们都会更新。他们将始终保持这最新、最准确的消息)。

        HTMLCollection:元素的集合(例如 document.images/links/forms、doucment.getElementByClassName 等等)

                                     属性:.length;   方法:nameItem(idName or name)

        NodeList: 节点的集合(例如:Node.childNodes和document.querySelectAll)

                          12种节点,属性:nodeType/nodeValue;  方法: item(index)


主题:

getELementById 返回动态Nodelist;  是 doucment的方法; 性能好; 一般情况下优先采用

querySelector 返回 静态 Nodelist; 是 element的方法;  是 css Selector的API; 需要复杂css选择器的时候使用;


额外小知识:Attribute 和 Property

参考资料  存储方式不同、脚踩两条船、attribute只能赋值字符串,property随便赋值

只要是DOM标签中出现的属性(html代码),都是Attribute。

然后有些常用特性(id、class、title等),会被转化为Property

你可能感兴趣的:(getElementById 和 querySelector 对比)