JavaScriptDOM文档对象模型

本文介绍了DOM文档对象模型的基础知识,包括为何要学习DOM及其操作方法。主要内容覆盖了如何获取节点、通过节点获取父节点、通过父节点获取子节点、创建及添加子节点等核心技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先,想必大家都知道JavaScript由三部分组成:
1、ECMAScript标准
2、BOM浏览器模型
3、DOM文档对象模型

接着,我们就来复习一下DOM文档对象模型,可能大家和我有这么一种感受,学了这些东西之后,有时候用的时候,一时记不起,那可能就是我们没有复习的结果。

一、为什么要学习DOM?
原因就是DOM提供了一组按树状形式结构组织HTML文档,树状中的每一个对象被称为一个节点(即标签),每一个对象都有一个或多个属性与方法,我们可以通过DOM获得树状中的某个节点,也就是标签对象,然后对其操作,实现我们想要的功能。
二、如何操作?
1、如何获取节点?(DOM提供了3种方法)
a、通过id获取节点对象:document.getElementById(“id名”);
b、通过相同标签名获取节点对象数组:document.getElementsByTagName(“标签名”);
c、通过相同name名获取节点对象数组:document.getElementsByName(“name名”);
2、如何通过某个节点获得父节点?
假设通过上面的三个方法中的某个方法获得了节点对象obj;
则通过obj.parentNode获得了父节点;
3、如何通过父节点获得子类节点?
假设通过上面的三个方法中的某个方法获得了父节点对象obj;
a、获得第一个子节点:obj.firstChild;
b、获得最后一个子节点:obj.lastChild;
c、获得子类节点数组:obj.ChildNodes[下标],但是在这里提倡使用obj.children[],因为其兼容性比较好;
4、如何创建一个子节点,并且加到父节点上面?
var obj = document.createElement(“标签名”);//获得创建出的子节点;
obj.setAttribute(“属性名”,”属性值”);//给创建的子节点设置属性;
obj.parent.appendChild(obj);//这种方法称为追加子节点
old的父节点.insertBefore(new,old) //这种方法称为在old这个节点的前面加上new节点
5、在浏览器写内容:document.write(“内容”);

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值