DOM通过技术操作HTML

1.DOM：查找 HTML 元素

1.通过 id 找到 HTML 元素
2.通过标签名找到 HTML 元素
3.通过类名找到 HTML 元素

通过 id 查找 HTML 元素

 <div id="box" class="do`在这里插入代码片`">
    <p></p>
    <p></p>
 </div>
 
    <script>
        //通过id查找html元素
        var o=document.getElementById("box");
    </script>

注意：
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

通过标签名查找 HTML 元素
本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有

元素：

var o=document.getElementById("main");
var y=o.getElementsByTagName("p");

通过类名找到 HTML 元素
本例通过 getElementsByClassName 函数来查找 class=“do” 的元素：

var o=document.getElementsByClassName("do");

2.创建新的 HTML 元素 (节点) -(1).createElement（）

 <script>
        var oDiv=document.createElement("div");//添加一个div
        oDiv.innerHTML="你好"; //在divzhong添加内容；
    </script>

//创建一个<p>元素
var para = document.createElement("p");

//为 <p> 元素创建一个新的文本节点:
var node = document.createTextNode("这是一个新的段落。");

//将文本节点添加到 <p> 元素中：
para.appendChild(node);

在一个已存在的元素中添加 p 元素。
查找已存在的元素：

var o = document.getElementById("div1");
//添加到已存在的元素中:
o.appendChild(para);

(2).insertBefore()

以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。

如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

<div id="div">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var o= document.getElementById("div");
var child = document.getElementById("p1");
o.insertBefore(para, child);
</script>

3.删除已存在的元素

要移除一个元素，你需要知道该元素的父元素。

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

4.替换 HTML 元素 - replaceChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
 
<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);
 
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTML DOM 复制节点方法-cloneNode()

定义和用法：
cloneNode() 方法创建节点的拷贝，并返回该副本。

cloneNode() 方法克隆所有属性以及它们的值。

如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。

语法
node.cloneNode(deep)；

 <div id="box">
        <p>你好</p>
        <p>hello</p>
        <p>hi</p>
        <p>哈喽</p>
    </div>
    <script>
        var node=document.getElementById("box").children[0];
        var lis=node.cloneNode(true);//复制节点
        node.appendChild(lis);
    </script>