JavaScript知识点个人总结

（2）如果没有存在指定的标签，该接口返回的不是null，而是一个空的HTMLCollection （3）“*”表示所有标签

document.getElementsByName

getElementsByName主要是通过指定的name属性来获取元素，它返回一个即时的NodeList对象。

使用这个接口主要要注意几点：

（1）返回对象是一个即时的NodeList，它是随时变化的

（2）在HTML元素中，并不是所有元素都有name属性，比如div是没有name属性的，但是如果强制设置div的name属性，它也是可以被查找到的

（3）在IE中，如果id设置成某个值，然后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name

document.getElementsByClassName

这个API是根据元素的class返回一个即时的HTMLCollection，用法如下 var elements = document.getElementsByClassName(names); 这个接口有下面几点要注意：

（1）返回结果是一个即时的HTMLCollection，会随时根据文档结构变化 （2）IE9以下浏览器不支持

（3）如果要获取2个以上classname，可传入多个classname，每个用空格相隔，例如 document.querySelector和document.querySelectorAll

这两个api很相似，通过css选择器来查找元素，注意选择器要符合CSS选择器的规则。 首先来介绍一下document.querySelector。

document.querySelector返回第一个匹配的元素，如果没有匹配的元素，则返回null。 注意，由于返回的是第一个匹配的元素，这个api使用的深度优先搜索来获取元素。 document.querySelectorAll的不同之处在于它返回的是所有匹配的元素，而且可以匹配

（1）querySelectorAll也是通过深度优先搜索，搜索的元素顺序和选择器的顺序无关 （2）返回的是一个非即时的NodeList，也就是说结果不会随着文档树的变化而变化

节点关系型api

在html文档中的每个节点之间的关系都可以看成是家谱关系，包含父子关系，兄弟关系等等，下面我们依次来看看每一种关系。 父关系型api

? parentNode：每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment。

? parentElement：返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null 兄弟关系型api

? previousSibling：节点的前一个节点，如果该节点是第一个节点，则为null。注意有可能拿到的节点是文本节点或注释节点，与预期的不符，要进行处理一下。

? previousElementSibling：返回前一个元素节点，前一个节点必须是Element，注意IE9以下浏览器不支持。

? nextSibling：节点的后一个节点，如果该节点是最后一个节点，则为null。注意有可能拿到的节点是文本节点，与预期的不符，要进行处理一下。

? nextElementSibling：返回后一个元素节点，后一个节点必须是Element，注意IE9以下浏览器

不支持。 子关系型api

? childNodes：返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等。

? children：一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。 ? firstNode：第一个子节点 ? lastNode：最后一个子节点

? hasChildNodes方法：可以用来判断是否包含子节点。

setAttribute

setAttribute：根据名称和值修改元素的特性，用法如下。 element.setAttribute(name, value);

其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。 如果元素本身包含指定的特性名为属性，则可以世界访问属性进行赋值，比如下面两条代码是等价的： getAttribute

getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null或空字符串。用法如下： var value = element.getAttribute(“id”);

window.getComputedStyle

window.getComputedStyle是用来获取应用到元素后的样式，假设某个元素并未设置高度而是通过其内容将其高度撑开，这时候要获取它的高度就要用到getComputedStyle，用法如下： var style = window.getComputedStyle(element[, pseudoElt]);

element是要获取的元素，pseudoElt指定一个伪元素进行匹配。 返回的style是一个CSSStyleDeclaration对象。 通过style可以访问到元素计算后的样式

currentStyle

万恶的IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了 getBoundingClientRect

getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置，用法如下： var clientRect = element.getBoundingClientRect();

clientRect是一个DOMRect对象，包含left，top，right，bottom，它是相对于可视窗口的距离，滚动位置发生改变时，它们的值是会发生变化的。除了IE9以下浏览器，还包含元素的height和width等数据，具体可查看链接

语法及其他关键字

typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。

在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。 Null

在 JavaScript 中 null 表示 “什么都没有”。

null是一个只有一个值的特殊类型。表示一个空对象引用。 你可以设置为 undefined 来清空对象: