位置: 编程技术 - 正文

Javascript入门学习第九篇 Javascript DOM 总结第1/2页(javascript零基础入门书籍)

编辑:rootadmin
1, 创建节点。 createElement(): var a = document.createElement(“p”); 它创建的是一个元素节点,所以 nodeType 等于 1 。 a.nodeName 将返回 p ; 注意;createElement()方法创建出来的新元素节点不会被自动添加到文档里,既然没添加到文档里,说明它还是一个游离的状态。所以它也没有nodeParent属性。 如果想把它添加到文档里,可以使用 appendChild()或者insertBefore()方法或者replaceChild()方法。当然我们在前面的例子中,自己写了一个insertAfter()方法; 比如: var a = document.createElement(“p”); document.body.appendChild(a); 注意: appendChild()默认是添加到文档的最后。也就是lastChild子节点。 如果想添加到某个地方,可以使用insertBefore()。 如果想在元素插入之前给元素添加属性。可以这么做: var a = document.createElement(“p”); a.setAttribute(“title”,”my demo”); document.body.appendChild(a); createTextNode(): var b = document.createTextNode(“my demo”); 它创建的是一个文本节点,所以nodeType等于 3 。 b.nodeName 将返回 #text ; 跟createElement()一样,用createTextNode()创建的节点也不会自动添加到文档里。需要使用appendChild()或者insertBefore()方法或者replaceChild()方法。 他经常与createElement()配合使用,知道为什么吗?(一个元素节点,一个文本节点。) var mes = document.createTextNode(“hello world”); var container = document.createElement(“p”); container.appendChild(mes); document.body.appendChild(container); 2, 复制节点。 cloneNode(boolean) : 它有一个参数。 var mes = document.createTextNode("hello world"); var container = document.createElement("p"); container.appendChild(mes); document.body.appendChild(container); var newpara = container.cloneNode(true);//true和false的区别 document.body.appendChild(newpara ); 注意: true的话:是<p>aaaa</p> 克隆。 false: 只克隆 <p></p> ,里面的文本不克隆。 可以自己写个例子,然后用 firebug 看看。 克隆后的新节点,和createTextNode()一样 不会被自动插入到文档 。需要appendChild(); 另外还有一个注意: 如果克隆后,id一样,不要忘记用 setAttribute(“id” , “ another_id “); 改变新的节点的ID。 3, 插入节点。 appendChild() : 给元素追加一个子节点, 新的节点 插入到 最后。 var container = document.createElement("p"); var t = document.createTextNode("cssrain"); container.appendChild(t); document.body.appendChild(container); 他经常跟createElement()和createTextNode(),cloneNode()配合使用。 另外 appendChild()不仅可以用来追加新的元素,也可以你 挪动 文档中现有的元素。 看下面的例子: <p id="msg">msg</p> <p id="content">content</p> <p id="aaa">aaaaaaaa</p> <script> var mes = document.getElementById("msg"); var container = document.getElementById("content"); container.appendChild(mes); </script> //发现msg放到 content 后面去了 。 Js内部处理方式: 先把ID为msg的从文档中删除,然后再插入到content 后,作为content的最后一个节点。 结果为: <p id="content"> content <p id="msg">msg</p> </p> <p id="aaa">aaaaaaaa</p> insertBefore() : 顾名思义,就是把一个新的节点插入到目标节点的前面。 Element.insertBefore( newNode , targerNode ); 第二个参数是可选,如果第二个参数不写,将默认添加到文档的最后,相当于appendChild(); 我们看看insertBefore()怎么使用: <div id="cssrian"> <p id="content"></p> <div id="msg">msg<div>test</div></div> <p id="content"></p> <p id="aaa">aaaaaaaa</p> </div> <script> var msg = document.getElementById("msg"); var aaa = document.getElementById("aaa"); var test = document.getElementById("cssrian"); test.insertBefore( msg , aaa ); </script> // 我们发现ID为msg的 插入到了 aaa的前面。 Js内部处理方式跟 appendChild()相似。 4, 删除节点。 removeChild() : <body> <div id="cssrain"> <div id="a">a </div> <div id="b">b </div> <div id="c">c </div> </div> </body> <script> var msg = document.getElementById("cssrain"); var b = document.getElementById("b"); msg.removeChild(b); </script> 如果不知道要删除的节点的父节点是什么?可以使用parentNode属性。 比如: <body> <div id="cssrain"> <div id="a">a </div> <div id="b">b </div> <div id="c">c </div> </div> </body> <script> var b = document.getElementById("b"); var c = b.parentNode; c.removeChild(b); </script> 注意: 你如果想把某个节点从一处移动到另一个地方,不必使用removeChild()。 可以使用前面的 appendChild()和insertBefore(),他们都会自动先删除节点,然后移动到你指定的地方。、 5, 替换节点。 Element.repalceChild( newNode , oldNode ); OldNode必须是Element的一个子节点。 <body> <div id="cssrain"> <div id="a">a </div> <div id="b">b </div> <div id="c">c </div> </div> </body> <script> var cssrain = document.getElementById("cssrain"); var msg = document.getElementById("b"); var para = document.createElement("p"); cssrain.replaceChild( para , msg ); </script>

推荐整理分享Javascript入门学习第九篇 Javascript DOM 总结第1/2页(javascript零基础入门书籍),希望有所帮助,仅作参考,欢迎阅读内容。

Javascript入门学习第九篇 Javascript DOM 总结第1/2页(javascript零基础入门书籍)

文章相关热门搜索词:javascript入门教程,javascript入门教程,javascript基础入门视频教程,javascript基础入门视频教程,javascript入门教程,javascript基础入门视频教程,js入门基础教程,javascript零基础入门书籍,内容如对您有帮助,希望把文章链接给更多的朋友!

Javascript入门学习资料收集整理篇 Javascript入门学习第一篇js基础Javascript入门学习第二篇js类型Javascript入门学习第三篇js运算Javascript入门学习第四篇js对象和数组Javascript入门学习第五篇js

JavaScript基本入门语法集合第1/3页 创建脚本块scriptlanguage=JavaScriptJavaScriptcodegoeshere/script隐藏脚本代码scriptlanguage=JavaScript!--document.write(Hello);//--/script浏览器不支持的时候显示noscriptHellotothen

JavaScript的学习入门整理篇第1/3页 htmlheadmetahttp-equiv="Content-Type"content="text/html;charset=gb"titleDocument.writeln()方法/titlescriptlanguage="javascript"functioncreatesummary(){win2=open("","window2")//win2.document.open

标签: javascript零基础入门书籍

本文链接地址:https://www.jiuchutong.com/biancheng/383909.html 转载请保留说明!

上一篇:Javascript入门学习第八篇 js dom节点属性说明第1/2页(javascript零基础入门)

下一篇:Javascript入门学习资料收集整理篇(javascript入门书)

  • 计提增值税会计科目是什么
  • 防伪税控税务端官网
  • 金税四期记账报税流程
  • 食用油交不交消费税
  • 一次性用品可以做什么
  • 金税盘维护费抵税账务处理
  • 发票该如何打印
  • 灭火器属于什么经营范围
  • 实收资本的印花税怎么交
  • 费用的增加会减值吗
  • 取得成本发票
  • 购税控盘账务处理
  • 采购商品未入库的会计分录
  • 营改增退税政策
  • 过路费去年的票还可以用吗
  • 企业哪些可以抵扣增值税
  • 开发票时含税和不含税是什么意思?
  • 自产产品用于集体福利按什么价格入账
  • 股权收益需要缴增值税吗
  • 税票认证节假日可以顺延吗?
  • 公司处置车辆税金怎么算
  • 提供有形动产租赁服务的增值税税率是
  • win7绝地求生帧数不稳定
  • 无形资产摊销的会计科目怎么录
  • 发票已认证还能作废吗2020
  • 出差回来报销会务费
  • 新准则规定
  • php根据日期判断星座
  • fs是什么文件
  • php 链式调用
  • 分批次付款
  • 利润表本月数可以不填吗
  • 升级nodejs到最新版本
  • 创建ftp软件
  • php分页函数封装
  • 存货采购成本有余额吗
  • 固定资产暂停使用期间需要计提折旧吗
  • 对公账户原路退回
  • 计提 增值税
  • mysql线程数配置
  • mysql 扩展
  • mysql错误代码大全
  • mongodb常用命令
  • 个税申报更正申报如何操作
  • 通过SQL Server 2008数据库复制实现数据库同步备份
  • 固定资产累计折旧计算公式
  • 材料暂估入库的附件需要哪些资料
  • 研发人员工资是实发还是应发
  • 作废的金额包含在总额里面吗
  • 债务类科目和债权类科目
  • 进项税额大于销项税月末结转
  • 税局代开的法律顾问费能否抵扣?
  • 小规模现金流量表年报不填可以吗
  • sql数据库检查命令
  • windos桌面
  • xp系统好怪哦
  • 使用组策略可控制什么
  • 不同的linux系统命令一样吗
  • ksysslim.exe
  • wrsvn.exe是什么
  • 全自怎么安装方法
  • windows8怎么调整亮度
  • win7系统运行速度提升
  • Win7系统桌面图标变小
  • mmc.exe是什么
  • win10如何彻底关掉自动锁屏
  • a10 config backup for aXAPI
  • js实现计时器在线时间
  • fragment的context
  • centos ohmyzsh
  • python动态参数应用
  • jquery get(0)
  • android 启动器 设置
  • unity fixed update
  • unity mesh编程
  • python连接Oracle数据库
  • PreferenceActivity与PreferenceFragment应用
  • js合并两个数组并排序
  • 税盘上怎么查每个月一共开了多少金额
  • 小程序河南税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设