JavaScript基础学习（七）操作DOM对象_js添加dom对象到body-优快云博客

本文详细介绍了如何使用JavaScript操作DOM，包括获取、更新、删除和插入DOM节点的方法。通过具体实例展示了如何选择DOM元素，并进行各种DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM
文档对象模型
核心
浏览器网页是一个Dom树形结构
更新DOM节点
遍历DOM节点
删除DOM节点
添加DOM节点
要操作Dom节点，先获得此节点
在这里插入图片描述
这些都是Dom节点

7.1 获得Dom节点

<body>

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


<script>
    var h1=document.getElementsByTagName('h1');
    var p1=document.getElementById('p1');
    var p2=document.getElementsByClassName('p2');
    var father=document.getElementById('father');

    //获取父节点下的所有子节点
    var children=father.children;
    //father.firstChildren
</script>

</body>

在这里插入图片描述

7.2 更新Dom节点

<div id="id1">

</div>

<script>
    var id1=document.getElementById("id1");
</script>

在这里插入图片描述

6.3删除父节点

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var p1=document.getElementById('p1');
    var father=p1.parentElement
    father.removeChild(p1);
    //注意：删除多个节点的时候，children是时刻变化的
father.removeChild(father.children[0])
father.removeChild(father.children[1])
</script>

6.4 插入Dom节点

获得dom节点后，可用innerHTML增加新元素。如果已经有元素，不能这样，会覆盖

将js加入到div中

<p id="js">javascript</p>

<div id="list">
    <p id="ee">JavaEE</p>
    <p id="se">JavaSE</p>
    <p id="me">JavaME</p>
</div>


<script>
    var
        js=document.getElementById("js"),
        list=document.getElementById("list")

    list.appendChild(js);
</script>

在这里插入图片描述
创建一个新标签实现插入

    var newP=document.createElement('p');//创建一个p标签
    newP.id='newP';
    newP.innerText='hello June'
    list.appendChild(newP)

在这里插入图片描述
insertBefore
document.getElementById(“myList”).insertBefore(newItem,existingItem);

insertAfter
$(content).insertAfter(selector)