DOM节点高阶操作（初识深浅拷贝）

最新推荐文章于 2024-06-01 18:37:55 发布

Try Tomato

最新推荐文章于 2024-06-01 18:37:55 发布

阅读量814

点赞数 2

分类专栏： # + 浏览器 DOM 文章标签： javascript DOM document文档获取元素前端

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124189987

版权

+ 浏览器 DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.创建节点

document.createElement('tagName')

tagName是我们想要创建的HTML元素，这些元素原本不存在，是动态生成的

所以也叫做动态创建元素节点，效果就像我们CSS中的伪元素（::after）创建的元素一样，可以却有本质的不同，相同点只是都能够创建一个新的元素，DOM操作更加的灵活可控

当然，我们创建了这个元素节点仅仅是创建了一个元素节点，我们想要动态的呈现在网页中是需要添加节点到指定位置的

二.添加节点

//将一个节点添加到指定父节点的子节点列表末尾
node.appendChild(child)

//将一个节点添加到父节点的指定子节点列表的前面
node.insertBefore(child,指定元素)

假如我们现在想要创建一个ol标签到ul子元素列表末尾：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
<script>
  const ul = document.querySelector('ul')
   //创建节点
   const ol = document.createElement('ol')
   //添加节点
   ul.appendChild(ol)

   //检查是否添加成功
   console.log(ul.lastChild);
</script>

如果我们想要添加到ul子元素列表最前面：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
<script>
  const ul = document.querySelector('ul')
   //创建节点
   const ol = document.createElement('ol')
   //添加节点
   ul.insertBefore(ol,ul.children[0])

   //检查是否添加成功
   console.log(ul.firstElementChild);
</script>

三.删除节点

删除节点较为简单：

node.removeChild(child)
//返回值是被删除掉的节点

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>
<script>
  const ul = document.querySelector('ul')
   //创建节点
   const ol = document.createElement('ol')
   //添加节点
   ul.appendChild(ol)

    //删除节点
    ul.removeChild(ul.children[ul.children.length - 1])

   //检查是否删除成功
   console.log(ul.lastElementChild);
</script>

四.克隆节点

node.cloneNode(true/false)
//返回值是该方法的节点的一个副本

如果括号里是true，那么为深拷贝（标签、内容等都复制）

如果括号里是false，那么为浅拷贝（只复制标签，不复制里面的内容）

很好理解，还是上面的例子，我们想要深拷贝一个ul里面的li：

<body>
    <ul>
        <li>深拷贝可以拷走我的内容吗？</li>
    </ul>
</body>
<script>
  const ul = document.querySelector('ul')
  const cloneli = ul.children[0].cloneNode(true)
  ul.appendChild(cloneli)
</script>

如果是浅拷贝：

<body>
    <ul>
        <li>浅拷贝可以拷走我的内容吗？</li>
    </ul>
</body>
<script>
  const ul = document.querySelector('ul')
  const cloneli = ul.children[0].cloneNode(false)
  ul.appendChild(cloneli)
</script>

五.这样也可以动态创建节点元素？

其实还有一种动态创建元素的方法，只不过不如createElement好用(createElement结构更加清晰)，所以不常用，我们作为了解就好：

document.write()

它会将内容写入页面内容流，但是当文档执行完毕，会导致页面全部重绘

六.DOM小结

创建节点：document.write | innerHtml | createElement

添加节点：appendChild | insertBefore

删除节点：removeChild

修改节点属性：

修改表单属性：src | href | title

修改普通元素内容：innerHTML | innerText

修改表单元素：value | type | disabled

修改元素样式：style | className

查询节点：

DOM提供的API查询：getElementById | getElementByTagName

H5提供的新方法：querySelector | querySelectorAll

利用节点查询：父节点（parentNode）、子节点（children）、兄弟节点（previousElementsSibling | nextElementSibling）

自定义属性操作：

setAttribute：设置DOM属性值

getAttribute：获取属性值

removeAttribute：移除属性

鼠标事件：

onclick：点击鼠标左键触发

onmouseover：鼠标经过触发

onmouseout：鼠标离开触发

onfcus：获得焦点触发

onblur：失去焦点触发

onmousemove：鼠标移动触发

onmouseup：鼠标弹起触发

onmousedown：鼠标按下触发

Try Tomato

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DOM节点高阶操作（初识深浅拷贝）

目录一.创建节点二.添加节点三.删除节点四.克隆节点五.这样也可以动态创建节点元素？六.DOM小结鼠标事件：一.创建节点document.createElement('tagName')tagName是我们想要创建的HTML元素，这些元素原本不存在，是动态生成的所以也叫做动态创建元素节点，效果就像我们CSS中的伪元素（::after）创建的元素一样，可以却有本质的不同，相同点只是都能够创建一个新的元素，DOM操作更加的灵活可控当然，我们创建了这个...
复制链接

扫一扫