JS中常见的Dom对象操作有什么,怎么实现
Admin 2022-06-20 群英技术资讯 300 次浏览
浏览器网页就是一个Dom树形结构
要操作一个Dom
节点,就必须要先获得这个Dom
节点
<body> <div id="div1"> <h1 id="h"></h1> <p class="p1"></p> </div> </body>
//通过标签 document.getElementsByTagName('h1'); //通过id document.getElementById('div1'); //通过class document.getElementsByClassName('p1'); //获取父节点 h.parentElement //获取父节点下所有子节点 div1.children[index]; //获取当前节点下,第一个节点 div1.firstElementChild; //获取当前节点下,最后一个节点 div1.lastElementChild; //获取下一个节点 h.nextElementSibling;
//更新文本的值 div1.innerText='修改文本的值'; //更新超文本,可以解析html文本标签 div1.innerHTML='<strong>添加超文本</storng>'; //更新css div1.style.color='red'; div1.style.fontSize='20px';//驼峰命名 div1.style.padding='2em';
获取id
没改之前
操作input
删除节点步骤:先获取父节点,再通过父节点删除自己
let self=document.getElementById('p1');//获取删除节点 let father=self.parentElement//获取父节点 father.removeChild(self);//通过父节点删除节点
注意:删除节点的时候,子节点数组是在不断地变化,所以不能通过数组静态连续删除,只能多次通过动态删除
我们获得某个Dom节点,假设这个 Dom节点是空的,我们通过innerHtML
就可以添加一个元素,但是这个Dom
节点已经存在元素了,就会产生覆盖
<body> <p id="p1">Java</p> <div id="div1"> <p>JavaScript</p> <p>css</p> <p>C</p> </div> </body>
let a=document.getElementById('div1'); let b=document.getElementById('p1'); a.appendChild(b);//追加
效果
let a=document.createElement('p');//创建节点 p标签 a.id='p2'; a.innerText='hello,小沈'; let list=document.getElementById('div1');//获取div1 id list.appendChild(a);//追加子节点 //创建标签节点 let a=document.createElement('script'); a.setAttribute('type','text/javascript');
效果:
//创建style标签节点 let st=document.createElement('style'); st.setAttribute('type','text/css'); st.innerHTML='body{ background-color:pink;}'; let hd=document.getElementsByTagName('head')[0];//注意点,head在第0个元素。 hd.appendChild(st);
效果:
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="p1">Java</p> <div id="div1"> <p id="px">JavaScript</p> <p id='p2'>css</p> <p id="p3">C</p> </div> <script type="text/javascript"> //拥有子节点的父节点 let list=document.getElementById('div1'); let self=document.getElementById('p2'); let befoe=document.getElementById('p1'); list.insertBefore(befoe,self); </script> </body> </html>
效果:
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本篇文章带大家了解一下Angular中的5种类(class)装饰器,希望对大家有所帮助!
JS中的includes和indexOf的区别是啥,有哪些?因为includes()和indexOf()都能用来检查数组是否包含某些元素,所以有一些朋友不是很理解JS中的includes()和indexOf()方法的区别,对此这篇就给大家来详细的讲讲,感兴趣的朋友就继续往下看吧。
用JavaScript写一个九宫格的抽奖盘,供大家参考,具体内容如下点击中间的块,选中奖品的亮块会在边缘的8个块循环;选中后,弹出选中的内容;代码参考:HTML文件:bodydiv class=box ul id=jiangPin lia href=javascript:viod(0); span奖
本篇文章给大家带来了关于javascript的相关知识,其中主要整理了Number对象的相关问题,Number 对象是原始数值的包装对象,Number 创建方式 new Number(),下面一起来看一下,希望对大家有帮助。
vue项目在本地构建后,每次热更新都会卡在 75 advanced module optimization 的地方不动了。很影响开发效率有木有,网上一搜给的方案(babel-plugin-dynamic-import-node)试了下各种报错,要么说版本问题,要么说引入文件的方式不对,要么说webpack的配置不对,然
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008