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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值