DOM操作以前的学习笔记

本文介绍了DOM模型的基本构成,包括元素节点、文本节点和属性节点,并详细讲解了如何使用getElementsByTagName()和getElementById()方法访问节点,如何利用getAttribute()和setAttribute()设置节点属性,以及创建、删除和替换节点的具体步骤。

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

这两天整理一下以前的学习笔记,上一篇简单整理了一点javascript的,这次简单整理下DOM操作的。
一、DOM模型分三种节点 元素节点(html) 文本节点 属性节点
二、访问节点的两种方式
a: getElementsByTagName() 例如:var a = document.getElementsByTagName("img"); 得到a 是所有页面中img的数组 a.length 有多少个img a[0].tagName a第一个原色的tagname,a[0].childNodes[0].nodeValue;
b: getElementById("id"); var a = document.getElementById("id") a.tagName a.childNodes[0].nodeValue
三、设置节点属性 getAttribute() setAttribute();
该方法不能通过document对象调用,只能通过一个元素节点对象来调用
<img src="01.jpg" title="abc"/>
var a = document.getElementsByTagName("img")[0];
alert(a.getAttribute("title"));
a.setAttribute("src","02.jpg");
四、创建节点 创建元素节点用 createElement() 创建文本节点 createTextNode()
三步
1、var op = document.createElement("p");
2、var oText = document.createTextNode("create text");
3、op.appendChild(oText);
document.body.appendChild(op);
五、删除节点 删除节点是通过父节点的removeChild()方法完成的。
var op = document.getElementsByTagName("p")[0];
op.parentNode.removeChild(op);
六、替换节点 替换节点通过replaceChild()完成也是需要针对节点的父节点来操作
var oldOp= document.getElementsByTagName("p")[0];
var newOp = document.createElement("p");
var newText = document.createTextNode("create Text");
newOp.appendChild(newText);
oldOp.parentNode.replaceChild(newOp,oldOp);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值