JS的DOM操作——操作文档树

M78_国产007

已于 2022-07-18 12:43:01 修改

阅读量323

点赞数

分类专栏： JS的DOM操作文章标签： javascript 前端

于 2022-07-15 22:16:43 首次发布

本文链接：https://blog.csdn.net/m0_59345890/article/details/125798995

版权

JS的DOM操作专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文档树中的节点们我们可以用js进行增删改查。

查（获取）：

<div id="box">

</div>

<script>
    var box=document.querySelector("#box")
</script>

增：分两步——>1、创建元素 2、将创建的元素添加到文档树中

1、创建元素：用createElement()，小括号内填写的是字符串格式的标签名，如：createElement("div")创建div标签、createElement("span")创建span标签、createElement("input")创建input标签。

创建的元素不存在文档对象模型document，不会渲染到页面上。

2、将创建的元素添加到文档树中：appendChild(),小括号内填写的是我们上一步所创建的元素。例如：x.appendChild(y),把y节点对象添加到x节点中。

改：用innerHTML修改内容

具体代码展示：

<div id="box">

</div>

<script>
    var box=document.querySelector("#box")
    //创建一个元素
    var cj=document.createElement("div")
    //添加到box中
    box.appendChild(cj)
    //我们再给我们新创建的新标签添加一点内容
    cj.innerHTML = "我新建的"
</script>

运行后：

除了上述方法添加元素外，我们还可以只使用innerHTML来实现，这里要用到ES6新出的模板字符串，模板字符串也能识别html标签。

<div id="box">

</div>

<script>
    var box=document.querySelector("#box")
   box.innerHTML=`<div>我是用模板字符串书写的</div>`
</script>

运行后：

我们在用innerHTML给元素添加内容时，会把以前的内容覆盖掉，那么我们怎么解决呢？

解决方案：创建一个元素设置它的innerHTML 然后把它添加到box2或者直接在它的innerHTML上加内容。

具体代码说明：

<div id="box">
	我是box
</div>

<script>
    var box=document.querySelector("#box")
   var newbox=document.createElement("div")
   newbox.innerHTML="666"
   box.appendChild(newbox)
    box.innerHTML+="666"
</script>

运行结果：

删：remove()移除自己、removeChild()移除自己的子节点

remove()：

        <div class="box">
			<div class="box1">666</div>
			<div></div>
			<div></div>
		</div>

		<script>
			var box1=document.querySelector(".box1")
			box1.remove()
			
		</script>

运行过后：

可以看到类名为box1的div标签已经被删掉了。

removeChild()：

		<div class="box">
			<div class="box1">666</div>
			<div></div>
			<div></div>
		</div>

		<script>
			var box=document.querySelector(".box")
			var box1=document.querySelector(".box1")
			box.removeChild(box1)			
		</script>

同样也删除了类名为box1的div标签

说到清除自己的节点，我们还可以通过innerHTML清除自己的子节点，可以innerHTML的功能非常强大，就靠它就能实现增删改查的功能。

清空所有的子节点：

		<div class="box">
			<div class="box1">666</div>
			<div></div>
			<div></div>
		</div>
        <div class="box3">333<div>
		<script>
			var box=document.querySelector(".box")
			box.innerHTML=""	
		</script>

可以看到类名为box的div标签的所有的子节点都被移除了。

克隆：cloneNode() 克隆的小括号有一个参数true，可根据自己的需求选择是否写true。

有true时：会克隆后代元素和所有的事件

无true时：不会克隆事件。

补充：插入节点insertBefore（参数1，参数2），参数1为要插入的节点，参数2为要插入位置的后面那个节点。

代码展示说明：

	  <div class="box1">
        <div class="box02"></div>
        <div class="box2">
            <div class="box3">666</div>
        </div>
    </div>
    <script>
        var box1=document.querySelector(".box1")
        var box2=document.querySelector(".box2")
        //创建我们要插入的节点
        var ins=document.createElement("div")
        //在box1里面的box2前面插入我们创建的节点
        box1.insertBefore(ins,box2)
    </script>

运行结果：