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>