DOM_Element对象和DOM_Node对象
2022/8/4 1:23:03
本文主要是介绍DOM_Element对象和DOM_Node对象,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
DOM_Element对象
removeAttribute():删除指定的属性
setAttribute():添加新属性
<!--Element对象--> <a>点我试一下</a> <input type="button" value="给a标签设置属性" id="btn_set"> <input type="button" value="给a标签删除属性" id="btn_remove"> <script> //获取btn var btn_set = document.getElementById("btn_set"); btn_set.onclick = function () { //1.获取a标签 var element_a = document.getElementsByTagName("a")[0]; //setAttribute():添加新属性 element_a.setAttribute("href","https://www.baidu.com") } //获取btn var btn_remove = document.getElementById("btn_remove"); btn_remove.onclick = function () { //1.获取a标签 var element_a = document.getElementsByTagName("a")[0]; //removeAttribute():删除指定的属性 element_a.removeAttribute("href"); }
DOM_Node对象
Node:节点对象,其他5个的父对象
特点:所有dom对象都可以被认为是一个节点
方法:
CRUD dom树:
appendChild():向节点的子节点列表的结尾添加新的子节点
removeChild():删除(并返回)当前节点的指定子节点
replaceChild():用新节点替换一个子节点
属性:
parentNode:返回节点的父节点
<html lang="en"> <head> <meta charset="UTF-8"> <title>Node_7对象</title> <style> div{ border: 1px solid red; } #div1{ width: 200px; height: 200px; } #div2{ width: 100px; height: 100px; } #div3{ width: 100px; height: 100px; } </style> </head> <body> <div id="div1"> <div id="div2">div2</div> div1 </div> <!-- 超连接功能 1.可以被点击:样式 2.点击后跳转到href指定的url 需求:保留1功能,去掉2功能 实现:href=“javascript:void(0);” --> <a href="javascript:void(0);" id="del">删除子节点</a> <a href="javascript:void(0);" id="add">添加子节点</a> <!--<input type="button" id="del" value="删除子节点">--> <script> //获取超链接 var element_a = document.getElementById("del"); //绑定单击事件 element_a.onclick = function () { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); div1.removeChild(div2); } //获取超链接 var element_add = document.getElementById("add"); //绑定单击事件 element_add.onclick = function () { var div1 = document.getElementById("div1"); //给div1添加子节点 var div3 = document.createElement("div"); div3.setAttribute("id","div3"); div1.appendChild(div3); } //获取div2的父节点 var div2 = document.getElementById("div2"); var div1 = div2.parentNode; alert(div1); </script> </body> </html>
属性:
搜索
复制
这篇关于DOM_Element对象和DOM_Node对象的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行
- 2024-05-08阿里云域名注册流程,分享给第一次购买域名的新手站长!