位置: 编程技术 - 正文

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入门书)

  • 资金账簿印花税怎么算
  • 未交增值税是什么科目
  • 国际重复征税的前提条件是
  • 减资 股东
  • 网上申领发票收到后需要怎么操作
  • 更改增值税申报表有退税会很麻烦吗
  • 小规模税控设备维护费怎么填申报表格
  • 发票章坏了能自己刻吗
  • 车船税不交怎么办
  • 营改增以前土地交易应交税费
  • 企业未开票收入怎么发现
  • 自查补缴的企业怎么处理
  • 增值税普通电子发票
  • 奖金发当月还是上月
  • 去年的暂估成本今年如何冲掉
  • 车船税的减免税
  • 非股东打入投资款无法返还
  • 建安企业增值税税率是多少
  • 专票私人能开吗?
  • 销售商品包装材料怎么做
  • 缴纳上月增值税记账凭证怎么填写
  • 车辆购置税可以代缴吗
  • 怎么检查电脑硬件是否正常
  • 王者荣耀中刘邦技能解析以及如何连招
  • 法人借给公司钱怎么备注
  • Win11怎么打开网络适配器
  • 餐饮发票可以计入研发费用吗
  • 支付人工费会计科目
  • 外贸企业代理出口销售的出口退税手续
  • 顿号用键盘怎么输入
  • edi文件怎么打开
  • php设计模式六大原则
  • 营改增后企业要交哪些税
  • 温特孚灯具质量怎么样
  • wordpress开发app
  • python进行傅立叶变换
  • php uasort
  • 半球形的谢尔亨里克森天文台,挪威斯瓦尔巴群岛 (© Vincent Fournier/Gallery Stock)
  • 没有关系怎么表达
  • nodejs hook
  • ufw 设置
  • 残疾人保障金计入哪个会计科目
  • 小型企业利润表
  • c语言中局部变量和全局变量同名
  • mysql备份工具
  • 增量留底退税怎么比增值税高
  • 年末未分配利润减去年初未分配利润等于什么
  • sqlserver避免死锁
  • 劳务报酬收入是否含税
  • 个人所得税劳务所得
  • 企业管理费用科目期末一般是
  • 一次性扣除固定资产出售处理
  • 季度亏损需要计提企业所得税吗
  • 农副产品收购分录
  • 股东权益和债权人
  • 注销时其他应付款怎么冲平
  • 建筑行业未取得收入如何结转成本
  • 优惠券会计分录怎么做
  • 预付账款转入其他应付款会计分录
  • 公司应该怎么记账
  • 管理费用记错了跨年了怎么调整
  • 差旅费用包含哪些
  • 公司在筹备阶段怎么办
  • 固定资产标准提高是政策变更吗
  • sqlserver获取年月日
  • ubuntu16.04怎么改成中文
  • Linux系统开源VPN Openvpn进程异常退出解决方法
  • js 正则验证
  • Android 近百个项目的源代码
  • android 图片
  • 深入python3
  • 手游开发流程具体
  • unity鼠标控制物体移动
  • 用jquery实现全选全不选反选
  • bootstrap日期控件背景为白
  • 登陆界面android
  • javascript中如何获取元素?
  • 滴滴发票怎么查行程
  • 志愿者补贴如何领取
  • 广东省电子税务局登录方式
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设