DOM 文档对象模型总结

爱被打了一巴掌 2022-01-12 23:39 363阅读 0赞

## 1、DOM 文档对象模型 ##

![文档对象模型][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]  
dom结构的组成 ： 有各种节点组成  
**节点类型 nodeType** ： nodeType属性区分各种节点类型  
元素节点 1 元素节点 ： html标签  
文本节点 3 文本节点 ： 标签的内容 或这 空白 或者 注释 ``  
属性节点 2 属性节点 ： 标签的属性  
节点关系（查找页面元素的属性） ：  
**父节点 ：parentNode**  
孩子节点 ： children 只获取元素节点 childNodes 获取元素节点和文本节点  
第一个孩子节点 ： firstElementChild firstChild（低版本）  
最后一个孩子节点 ： lastElementChild lastChild  
前一个兄弟节点： previousElementSibling  
后一个兄弟节点 ： nextElementSibling

tagName nodeName 获取标签名称 （默认是**大写**的）  
![dom操作][dom]

## 2、节点的动态操作（创建 添加 删除） 重点 ##

创建元素 ：  
document.createElement(“标签名”)  
创建文本 ：  
document.createTextNode(“文本”)  
添加元素 ：  
appendChild()  
用法 ：父节点.appendChild(要添加的元素)  
insertBefore()  
用法 ： 父节点.insertBefore(要添加的子节点 , 参照节点 )把要添加的子节点 插入到参照节点的前面参照节点如果是null，实现向后添加 同appendChild功能

删除元素 ：  
removeChild()  
用法 ：父节点.removeChild( 要删除的子节点 )

remove()删除  
    用法 ： 要删除的节点.remove();

//点击按钮创建一个div  
var oBtn = document.querySelector("\#btn");  
oBtn.onclick = function()\{  
//创建一个小div标签  
var oDiv = document.createElement(“div”);  
//将div添加到指定的位置 比如 添加到body中  
//父节点。appendChild( 要添加的节点)  
document.body.appendChild( oDiv);  
//对该div的属性或样式或内容的操作同前面的操作  
//为div标签添加内容  
oDiv.innerHTML = “这是div标签的内容信息”；  
//对div进行样式描述  
oDiv.className = “box”;  
\}

//动态创建表格  
![动态创建表格][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]

## 3、节点克隆 ##

cloneNode() 没有参数表示只克隆元素本身 参数为true表示即克隆元素本身又克隆内容  
//克隆的运用  
![克隆的运用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]  
**4、扩展 ：**  
文档碎片 为了避免重复的DOM插入操作，我们可以创建一个 ：文档碎片  
文档碎片好处：提高效率 在频繁进行大量的dom操作的时候，尤其是添加到页面的动作  
创建一个文档碎片 ： document.createDocumentFragment();

//新闻列表  
![新闻列表的制作][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20220112/b0134a1355c4416c9170eedb328bc3fb.png
[dom]: /images/20220112/9fb3e38aabd14435b6849c08fd50697b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20220112/784ec6e67f534a8a8ecdebc254a599de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]: /images/20220112/00781b40b5e74e15a7a18b911aa00dee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 3]: /images/20220112/74c36a1688bb42e99a4321cd5b2c73b3.png