JavaScript---DOM对象

最新推荐文章于 2024-07-16 19:32:16 发布

Sayers-denb

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量317

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_70990872/article/details/126264531

版权

本文详细介绍了JavaScript中操作DOM对象的技巧，包括获取、更新、删除和插入DOM节点，以及创建新标签并实现insertBefore操作。同时，还讲解了如何操作表单，包括表单的介绍、获取表单数据和提交表单的方法。

摘要由CSDN通过智能技术生成

文章目录

JavaScript---DOM对象

JavaScript—DOM对象

一、操作DOM对象

1.1、DOM对象的核心

浏览器的网页本身就是一个DOM的树形结构。其包含有：
1.更新：更新DOM节点；
2.遍历DOM节点：得到DOM节点；
3.删除：删除一个DOM节点；
4.添加：添加一个新的DOM节点。
在进行操作一个DOM节点的时候，就必须要先获得这个DOM节点。

1.2、获得DOM节点

获得DOM节点的原生代码：

// 对应的CSS选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementsById('p1');
var p2 = document.getElementsByClassName('p2');
var father = document.getElementsById('father');

var childrens = father.children;
//获取父节点下的所有的节点
//father.firstChild
//father.lastChild

尽量使用jQuery()；

1.3、更新DOM节点

更新DOM节点的代码：

<div id="id1">

</idv>

<script>
   var id1 = document.getElementsById('id1');
</script>

注：
用来操作文本的为：
1.id1.innerText='123' //修改文本的值
2.id1.innerHtml='<strong>123</strong>' //可以解析HTML文本标签

用来操作JavaScript的为：
1.id1.style.color = 'yellow'; //属性的使用字符串包裹
2.id1.style.fonsize = '20px';
3.id1.style.padding = '2em';

1.4、删除DOM节点

删除DOM节点的主要步骤为：先要获取父节点，通过父节点删除自己。
其代码为：

<div id="father">
      <h1>标题</h1>
      <p id="p1">p1</p>
      <p class="p2">p2</p>
</div>
<script>
      var self = document.getElementsById('p1');
      var father = p1.parentElement;
      father.removeChild(self)
       
       //删除的是一个动态的过程
       father.removeChild(father.children[0])
       father.removeChild(father.chi