JavaScript学习之DOM

1、什么是DOM

文档对象模型（Document Object Model），可以动态的访问程序和脚本,更新其内容、结构等。浏览器网页就是一个DOM结构，因此我们学习操作DOM对象可以帮助我们对网页的元素进行更改删除和添加等操作。

2、操作DOM对象

1.选中节点 

 1     doncument.getElementById();
 2     document.getElementsByTagName();//后三者都会返回一个数组对象
 3     document.getElementsByClassName();
 4     document.getElementsByName();
 5     //通过字面意义理解查找方式
 6 
 7     var v1=document.getElementById('');//获得节点后，采用访问父子关系的方式找到其他节点
 8     v1.lastChild;
 9     v1.children;
10     v1.firstChild;

2.更新节点

1     var v1=document.getElementById('');//获得节点
2     v1.innerText;//更改文本内容
3     v1.innerHTML;//更改标签
4     v1.style.color;//.style来更新样式
5     v1.style.font;

3.删除节点

删除节点时一般通过父节点删除本节点

1     var v1=document.getElementById('');//获得节点
2     var father=v1.parentElement;
3     father.removeChild(v1);

但是注意，如果使用father.children来删除元素时，被删除的元素后面的元素会自动填充上来，占据这个位置，就像你在排队时被你妈叫回去吃饭了一样。

因此，如果一个元素father下面有三个子节点，那么我们通过依次删除father.children[0]，father.children[1]，father.children[2]，这三个节点的方式是不对的，会在第三次删除的时候出现溢出，找不到该节点的问题，因为之前删除两次后，剩余的一个节点已经自动填充到[0]的位置上了，因此我们需要三次删除father.children[0]来完成该操作。

4.插入节点

如果我们选中的DOM节点非空时，我们如果直接创建则会覆盖已经存在的节点内容。我们一般采用的方法是先创建一个全新的节点，然后将其追加到选中的节点后面的方式来完成。

  <script>
    'use strict'
    var newP = document.createElement('p');
    newP.innerText = '新节点';
    var oldP = document.getElementById('ddd');
    oldP.appendChild(newP);
  </script>
</head>
<body>
<h1 id="h1">标题</h1>
<div id="ddd">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <p id="p3">p3</p>
</div>
</body>

执行会发现成功插入新节点。

posted on 2021-08-12 16:12  我真不会编程啊  阅读(57)  评论(0)    收藏  举报