JS加强学习-DOM学习总结

1. DOM复习

 DOM：document object model  文档对象模型或文档树模型。

1.1 节点分类

DOM中一共有5个节点类型，而现在我们常用的有三种：标签（元素）节点，属性节点，文本节点。

我们可以通过nodeType获取节点的类型（一个数字），通过nodeName获得节点名，通过nodeValue获得节点的值。

1.2 获得页面元素的三种方式

document.getElementById：通过标签的id值获得元素。

document.getElementsByTagName：通过标签名获得元素。

document.getElementsByClassName：通过标签的类名获得元素，但是由于这个方式存在很大的兼容性问题，所以不建议使用。

1.3 事件

事件：就是用户在文档或是浏览中交互的某个瞬间。

常用的事件有：

鼠标事件： onclick鼠标单击事件，ondblclick鼠标双击事件，onmouseover鼠标移入事件，onmouseout鼠标移出事件，onmousemove鼠标移动事件，onfocus获得焦点事件，onblur失去焦点事件。

键盘事件： onkeydown键盘某个按键被按下时，onkeyup键盘某个按键被按下并放开时。

注册事件方式：on+事件名。

注册事件的位置： 行内式、内嵌式。

1.4 事件三要素

事件源：事件作用的对象。

事件名称：具体的交互瞬间。

事件处理程序：事件触发时要执行的代码。

在事件处理程序中，常会使用this来始终指代当前触发事件的那个对象。

1.5   节点层次

获取父级节点parentNode

获取子级节点childNodes    children(只会获取标签节点)

获取同级节点： nextSibling下一个同级节点，nextElementSibling下一个同级元素节点，previousSibling上一个同级节点，previousElementSibling上一个同级元素节点。

父元素的第一个子节点和最后一个子节点：firstChild，firstElementChild，lastChild，lastElementChild。

节点操作：

克隆节点：  cloneNode(true/false)；

追加节点： appendChild；

移除节点： removeChild ；

插入节点：  insertBefore。

1.6 自定义属性

setAttribute设置自定义属性，getAttribute获得已设置的自定义属性，removeAttribute移除自定义属性。

1.7 动态创建元素：

document.write()：由于当document.write会将原有的文档流移除后再次进行渲染，所以不建议使用。

innerHTML：通过赋值的形式将字符串渲染成HTML中的标签。

document.createElement()：创建一堆标签。