2021dom讨论班

一、什么是dom

dom是文档对象模型，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。 在这个文档对象里，所有的元素呈现出一种层次结构，就是说除了顶级元素html外，其他所有元素都被包含在另外的元素中。

文档对象模型就是基于这样的文档视图结构的一种模型所有的html页面都逃不开这个模型，也可以把它称为节点树更为准确。

二、获取元素

1.document.getElementById();参数为大小写敏感的字符串，返回的是一个元素对象。

2.document.getElementsByTagName();取过来是元素对象的集合，以伪数组的形式存储,顺序是它们在文档中的顺序。如果把特殊字符串 “*” 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。传递给 getElementsByTagName() 方法的字符串可以不区分大小写。

3.document.getElementsByName();一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

4.document.getElementsByClassName();返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

5.document.querySelector();返回的是第一个对象，要加选择器的符号

6.document.querySelectorAll();你可以使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后你可以遍历所有元素，从而获取你想要的信息。

三、事件

事件源（事件被触发的对象）
事件类型（通过什么触发的是鼠标单击，还是鼠标经过还是…）
常见的事件类型：
click：用户单击主鼠标按钮（一般是左键）或者按下在聚焦时按下回车键时触发
dblclick：用户双击主鼠标按键触发（频率取决于系统配置）
mousedown：用户按下鼠标任意按键时触发
mouseup：用户抬起鼠标任意按键时触发
mousemove：鼠标在元素上移动时触发
mouseover：鼠标进入元素时触发
mouseout：鼠标离开元素时触发
mouseenter：鼠标进入元素时触发，该事件不会冒泡
mouseleave：鼠标离开元素时触发，该事件不会冒泡

事件处理的方式（通常通过一个函数来完成）

四、操作元素

1.element.innerText = ();element.innerHTML = ();

element.innerHTML包含html标签，而element.innerText 只包含文本内容。

2.element.getAttribute(‘属性’)；

3.element.setAttribute(‘属性’, ‘值’);

4.element.removeAttribute(‘属性’);

获取自定义属性:

1.兼容性获取 element.getAttribute(‘data-index’)

2.H5新增element.dataset.index或者element.dataset[‘index’]，但存在兼容性问题，ie11才支持。

五、节点操作

我们常用的节点标签：

元素节点（标签）

文本节点

属性节点（标签里的属性）

1.父级节点element.parentNode;

2.子节点

1. 所有节点element.childNodes
2. 只获得元素节点element.children
3. 获取第一个或者最后一个节点
   parentnode.firstChild；
   parentnode.lastChild;
4. 获取第一个或者最后一个元素节点（IE9以上支持）
   parentnode.firstElementChild；
   parentnode.lastElementChild;

3.兄弟节点

1. 下一个兄弟节点 node.nextSibling;
   上一个兄弟节点node.previousSibling;
2. 下一个兄弟元素节点 node.nextElementSibling;
   上一个兄弟元素节点node.previousElementSibling;

4.创建节点document.createElement(‘li’);

5.添加节点

1. 父.appendChild(子);
2. node.insertBefore(孩子，指定元素);

6.删除节点父.removeChild(子);

7.拷贝节点内容.cloneNode(true)；