DOM学习

DOM

DOM ：文档对象模型

1.每一个标签都成为DOM节点。html成为DOM的根节点，每一个元素成为元素节点，元素吗内容称为文本节点，属性称为属性节点。

2.节点关系：
父节点：ParentNode 子.ParentNode= 父； 节点关系： 父节点：ParentNode 子.ParentNode= 父； 节点关系： 父节点：ParentNode 子.ParentNode= 父； 子节点： ChildNodes/Children (后出现，好用） 兄弟节点： 前一个兄弟节点：previousElementSibling 后一个兄弟节点：nextElementSibling

3.节点属性的动态操作（创建、添加、删除）
创建：
元素：document.creatElement(“元素”);
// 文本：document.creatTextNode(“文本”)；
添加创建的元素 ：父.appendchild（子节点元素）；
动态添加的元素添加事件时，把事件放在创建函数里面；也可以通过委托实现（后面更新）；
删除：
①removeChild() 用法：父节点.removeChild(要删除的元素);
②remove() 用法：要删除元素.remove();

添加
insertBefore() 用法：父节点.insertBefore(要添加的元素，参照节点)；将要添加的子元素添加到参照节点的前面，参照节点不能省略，如果没有参照节点可用null代替，会实现和appendchild()一样的效果。

4.节点的克隆操作
cloneNode( );
参数如果是true表示：克隆节点本省并且也克隆内容 （深度克隆）。
无参数：只克隆节点本身。

获取查到的元素的标签名：TageName 或者NodeName

5.自定义属性的设置和获取
属性操作：对象.src = “2.jpg” ; 对象的特有属性的值，可以用对象.属性 操作。
如果获取自定义属性值：使用getattribute（“属性名”）；
设置自定义属性值：使用setattribute（“属性”，“值”）；