2024年前端最新前端入门篇(四十一)JS基础8动态修改网页内容(DOM操作)(1),看完跪了

最后

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3.注意js时间线

查找标签节点


1.通过id查找

var div1 = document.getElementById(‘div1’);//返回节点

2.通过标签名查找

var ps = document.getElementsByTagName(‘p’);//返回数组

3.通过class查找

var txt = document.getElementsByClassName(‘txt’);//返回数组

区别:

1.访问方式:

通过id查找时,只能通过document对象查找;

在js中,id唯一,如果html出现两个相同的id,后者会被忽略;

通过标签名或class查找时,可以在任意标签节点上使用;

2.返回数据的类型:

通过id查找时,直接返回节点

通过标签名或class查找时,即使结果只有一个,也是保存在数组中;

可以通过方括号来访问数组内容(txt[0]标签节点),也能使用length属性;

另注:

即使一个标签有多个class,

也能通过document.getElementsByClassName()找到;

4.先按id找到div1,再用class找到.txt:

html文件:

DOM操作

div1

p1

p2

div1

js文件:

var div1 = document.getElementById(‘div1’);

var p_txt = div1.getElementsByClassName(‘txt’);

由找到的已知节点或document节点向下层寻找,目的是找到某节点,如果已经用id找到了p2,就不能再从p2找txt,因为不是下层

查找结果只有一个:p#p1.txt.txt1

创建节点,添加到DOM树


html文件:

js文件:

//添加节点

var div1 = document.getElementById(‘div1’);//获取节点

var p = document.createElement(‘p’);//创建p标签

var ptxt = document.createTextNode(‘p1’);//创建文本节点

p.appendChild(ptxt);//文本节点关联到标签节点

div1.appendChild§;//添加标签节点至DOM树

结果:

在这里插入图片描述

删除节点


先在html文件中添加一个div2:

DOM操作
div2

js文件:

//删除节点

var div2 = document.getElementById(‘div2’);//获取div2

//方法一:通过父节点div1删除子节点div2

div1.removeChild(div2);

//方法二:通过树的关系,找到div2的父节点,再删除自己,不用直接查找父节点

div2.parentNode.removeChild(div2);

操作节点的属性、内容


1.对于html定义好的属性:

前端面试题汇总

JavaScript

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

性能

linux

前端资料汇总

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值