【JS-task2】 常见DOM操作有哪些

分享人：陈占乐

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

DOM是“ Document Object Model ”的缩写，简称“ 文档对象模型 ”

在浏览器中当前载入的文档用文档对象模型来表示。这是一个由浏览器生成的“树结构”，使编程语言可以很容易的访问HTML结构 — 例如浏览器自己在呈现页面时，使用它将样式和其他信息应用于正确的元素，而页面呈现完成以后，可以用JavaScript操作DOM，重构整个 HTML 文档，添加、移除、改变或重排页面上的内容。

全局变量document对象就是整个DOM树的根节点。文档中每个元素和文本在树中都有它们自己的入口 — 称之为节点Node。

2.知识剖析

DOM 操作CRUD - 增删改查

Create：动态增加DOM 节点

Delete：删除DOM 节点

Update：更新DOM 节点的内容

Read：获取DOM 节点

获取

1 Document.getElementById()

2 Document.getElementsByTagName()

3 Document.getElementsByClassName()

4 Document.querySelector()

5 Document.querySelectorAll()

6 父节点Node.parentNode

7 子节点Node.children || Node.childNodes

获取

节点类型nodeType 节点名称nodeName 节点值nodeValue
元素节点 HTML标签的名称（大写） 1
属性节点 属性的名称 2
文本节点 元素节点或属性节点中的文本内容；值永远是#text 3
注释节点 文档注释，形式为<!-- comment text --> 8
文档节点 DOM 树的根节点；值永远是#document 9

更新

1 修改节点的文本

innerHTML属性
不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树

innerText或textContent属性

2 修改节点的css

Node.style.cssProperty
获取的是DOM节点上 style 属性定义的样式即行内样式，‘—’在JavaScript中无效，所以需要在JavaScript中改写为驼峰式命名

Node.setAttribute()
像上面一样直接设置行内样式；预定义样式，设置相应的类名，实现css、js 的分离，不生成行内样式。

增加

1 创建节点

方法 说明
createElement() 元素节点
createTextNode() 文本节点
createComment() 文本节点
createDocumentFragment() 文档碎片节点

增加

2 添加节点

innerHTML
空DOM节点插入新的DOM节点,非空DOM节点会直接替换掉原来的所有子节点

appendChild() Node.appendChild()
把一个子节点添加到父节点的最后一个子节点;如果节点已经存在于当前文档树，这个节点会从原先的位置删除，再插入到新的位置。

insertBefore() parentNode.insertBefore(newNode , thisNode)
在指定节点的前面插入新节点,重点是要获取参考节点

cloneNode() Node.cloneNode(deep)
appendChild()方法存在副作用，cloneNode()复制节点副本，不会删除原节点。参数deep是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身

删除

Node.removeChild()
需要删除的节点和其父节点的引用；

Node.parentNode.removeChild(this)
删除一个仅基于自身引用的节点;

3.常见问题

在指定节点后面插入节点；在指定节点的前面插入子节点

4.解决方案

在指定节点的前面插入子节点

                    
                        function appendChildPre(parent , newNode){
                            if(parent.length>=1){
                                // 如果存在子节点，则在第一个子节点的前面添加
                                parent.insertBefore(newNode , parent.firstNode);
                            }else{
                                // 如果不存在，则在最后添加
                                parent.appendChild(newNode);
                            }
                        }

在指定节点的后面插入节点

                    
                        function insertAfter(newNode, thisNode){
                            var parent = thisNode.parentNode;
                            if (parent.lastChild == thisNode) {
                                // 如果父节点的最后一个节点是指定节点，则直接添加
                                parent.appendChild(newNode);
                            }else {
                                parent.insertBefore(newNode , thisNode.nextSibling);
                                //如果不是，则在指定节点的下一个节点前面插入
                            }
                        }

5.编码实战

demo

6.扩展思考

7.参考文献

参考一 MDN文档操作

参考二 廖雪峰 JavaScript 教程

参考三 JavaScript 教程

8.更多讨论

鸣谢

感谢大家观看

BY : 陈占乐