当前位置：首页 > article >正文

Javascript第十二个知识点：Dom

article 2024/11/19 14:35:25

Dom --> document object model 文档对象模型
我们编写的HTML代码中，有许多标签，body、h1、p、div……都可以成为节点。
我们操控dom节点就是使用javascript去操控html里的每一个标签

那么我们该怎么操作dom节点呢？

获取dom节点

首先我们应该获取dom节点

var h1 = document.getElementsByTagName("h1");//通过标签名获得节点
var x = document.getElementById("x");//通过id获得节点
var y = document.getElementsByClassName("y");//通过class获得节点

var father = document.getElementById('father');//获得父亲姐弟啊
var childern = father.children;//通过父亲节点获得所有子节点

改变dom节点内容：

father.innerText = '你好，我是div';
father.style.background = 'orange';

删除dom节点：

<div id="father">
      <h1>你好，java</h1>
      <h2 id="x">用id得到节点</h2>
      <h3 class="y">用class得到节点</h3>
</div>
<script>
      //删除节点
      var father = document.getElementById('father');
      var son = document.getElementById('x');
      father.removeChild(son);
</script>

创建节点：

   <div id="father">
            <h1>你好，java</h1>
            <h2 id="x">用id得到节点</h2>
            <h3 class="y">用class得到节点</h3>
            <h4 id="h4">第四个节点</h4>
        </div>
         <script>
            //创建一个新节点
            var hello = document.createElement('p');
            hello.id = 'hello';
            hello.innerText = 'hello world';
            var father = document.getElementById('father');
            var h1 = father.children[0];
            father.insertBefore(hello,h1);
         </script>
//此外创建如script、body这样的节点，我们需要给他说明类型：
        <script>
            var sc = document.createElement('script');
            sc.setAttribute('type','text/javascript');
        </script>

整体步骤就是：

使用createElement创建新节点
给新节点赋予属性(id、type···)

插入节点：

<p id="z">我是新来的节点</p>
        <div id="father">
            <h1>你好，java</h1>
            <h2 id="x">用id得到节点</h2>
            <h3 class="y">用class得到节点</h3>
            <h4 id="h4">第四个节点</h4>
        </div>
         <script>
            //在某个节点之前插入一个节点
            var new_node = document.getElementById('z');//新节点
            var x = document.getElementById('x');
            var father = document.getElementById('father');
            father.insertBefore(new_node,y);
         </script>

整体步骤就是：