js常见问题总结-DOM节点增删改查

最新推荐文章于 2023-07-14 21:35:34 发布

原创最新推荐文章于 2023-07-14 21:35:34 发布 · 234 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #js

javascript常见问题专栏收录该内容

8 篇文章

订阅专栏

本文总结了JavaScript中DOM节点的增删改查操作，包括查找节点、创建节点、替换节点、删除节点及常见问题。详细介绍了createElement()、appendChild()、replaceChild()、removeChild()等方法，并提供了创建和插入特定属性节点的实例。

DOM节点的增删改查

文章目录

1.查找节点

getElementById()

getElementsByClassName()

getElementsByTagName()

querySelector()

querySelectorAll()

firstChild

Children

lastChild

childNodes

someNode.previousSibling

someNode.nextSibling

someNode.parentNode

getAttribute

2.增加节点

2.1 创建节点

createElement()：创建一个dom节点

document.createElement('div');

2.2 父节点插入子节点

appendChild()：子节点末尾追加

const element = document.createElement('div');
element.textContent="新加的按钮";
document.body.appendChild(element);

2.3 同级插入节点

节点.insertBefore(插入的标签，参照标签)

const newNode = document.createElement('div');
document.body.insertBefore(newNode);

3.修改节点

3.1 替换节点

replaceChild()：替换子节点。接受两个参数，第一个为要插入的节点，第二个为要替换的节点

const newNode=document.createElement('span');
const oldNode=document.querySelector('#root');
document.body.replaceChild(newNode,oldNode);

3.2 clone节点

var box =document.getElementById("box");
//复制box节点(浅拷贝）
var new_box1 =box.cloneNode(false);
console.log(new_box1);
//复制box节点（深拷贝）
var new_box2 =box.cloneNode(true);
console.log(new_box2);

4.删除节点

4.1删除节点

removeChild()：删除子节点

const element=document.querySeletor('#root');
document.body.removeChild(element);

5.常见操作实现问题

创建一个textContent=‘年薪一百万’，className=‘selected’，data_val='1000000’的div标签

创建10（i从1到10）个textContent=‘100000i’，className=‘selected’，data_val='100000i’的li标签，并将此标签插入到上面div标签之前

综合案例

<!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="utf-8" />
         <title>DOM CRUD</title>
         <style></style>
     </head>
     <body>
         <div id='root'>
         </div>
         <script>
            /**
             * 查找节点
             * @param {*} name
             * name: id,class,tagname
             * 调用示例 findNode('#root')或者findNode('div')
             */
             const findNode = function(name){
                return document.querySelector(name)
             }
            /**
             * 创建一个节点
             * @param {*} tagName, attrObj
             * name: 标签名
             * attrObj: 属性名
             * 调用示例: createNode('div'), createNode('div',{id:'first',innerHTML:'helloworld'})
             */
             const createNode = function(tagName,attrObj){
                let node = document.createElement(tagName);
                for(let key in attrObj){
                    node[key]=attrObj[key];
                }
                return node;
             }
            /**
             * 插入一个节点
             * @param {*} parentNode,newNode
             * parentNode: 要插入的父节点
             * newNode: 要插入的节点
             * 调用示例: insertNode(root,node2)
             */
             const insertNode = function(parentNode,newNode){
                // appendChild
                // insertBefore
                parentNode.appendChild(newNode);
             }
            /**
             * 替换一个节点
             * @param {*} parentNode,newNode,oldNode
             * parentNode: 要替换节点的父节点
             * newNode: 替换后的节点
             * oldNode: 替换前的节点
             * 调用示例: replaceNode(root,node1,node2);
             * 注意：第二个参数和第三个参数不可调换位置
             */
             const replaceNode = function(parentNode,newNode,oldNode){
                parentNode.replaceChild(newNode,oldNode)
             }
            /**
             * 移除一个节点
             * @param {*} sourceNode,targetNode
             * sourceNode: 要移除节点的父节点
             * targetNode: 需要被移除的节点
             * 调用示例: removeNode(root,node1);
             */
             const removeNode = function(sourceNode,targetNode){
                sourceNode.removeChild(targetNode)
             }
            /**
             * 渲染一段dom
             * @param {*} node htmlStr
             * node: 需要插入的父节点
             * htmlStr: dom字符串
             * 调用示例: renderDom(findNode('#root'),'<div id="myDiv">myDiv</div>');
             */
             const renderDom = function(node, htmlStr){
               node.innerHTML=htmlStr;
             }

             //测试
             const root=findNode('#root');
             const node1 = createNode('div',{id:'n1',innerHTML:'节点1'});
             const node2 = createNode('div',{id:'n2',innerHTML:'节点2'});
             const node3 = createNode('div',{id:'n3',innerHTML:'节点3'});
             const node4 = createNode('div',{id:'n4',innerHTML:'节点4'});

             const htmlStr = `<div id="myDiv">mydiv</div>`


            //  insertNode(root,node1);
            //  insertNode(root,node2);
            //  insertNode(root,node3);

            // replaceNode(root,node4,node1);

            // removeNode(root,node1)

            renderDom(findNode('#root'),htmlStr);

         </script>
     </body>
 </html>