06 JS-DOM之--节点操作(4种)
来源:互联网 发布:淘宝如何营销推广 编辑:程序博客网 时间:2024/06/06 11:43
节点的操作一共四种:
创建节点(3种)
添加节点(2种)
删除节点(1种)
复制节点
1、创建节点(3种)
第一种。document.write(“”);
缺点:在事件触发后,书写内容,容易覆盖掉原有内容。
如果是在页面加载的时候,直接书写,不会发生覆盖。
第二种。innerHTML属性。这个属性会识别标签。
注意点:时时刻刻都会覆盖掉原有内容,所以赋值之前,先获取内容,并到一起重新赋值。
缺点:原有的子元素事件会被取消
优点:操作简单。属性绑定简单。标签嵌套简单。
第三种:document.createElement(“li”);
优点:老元素的事件不会被覆盖。创建方便,想绑定什么属性,都可以。
缺点:每次都要绑定属性,而且还需要添加。比较繁琐。
2、添加节点(2种)
第一种:父节点.appendChild(新节点);
把一个新节点,放入一个父节点的最末尾。
第二种:父节点.insertBefore(新节点,参考节点);
把一个新节点,放入一个参考节点之前。
如果参考节点是undefined或者null,那么方法等同于appendChild
3、删除节点(1种)
- 父节点.removeChild(子节点);
- 不知道父级的情况下,可以这么写:
子节点.parentNode.removeChild(子节点);//自杀
4、复制节点
节点.cloneNode();
参数为布尔类型值,true为深层复制(复制节点及其所有子节点),默认为false浅层复制(复制节点本身,不复制子节点)。
console.log(box.cloneNode());//不加参数浅层赋值。console.log(box.cloneNode(true));//加参数true深层赋值。
0 0
- 06 JS-DOM之--节点操作(4种)
- js之DOM操作(访问父节点parentNode)
- js之DOM操作(访问兄弟节点)
- js之DOM操作(插入节点appendChild())
- js之DOM操作(插入节点insertBefore())
- js之DOM操作(删除节点removeChild())
- js之DOM操作(替换元素节点replaceChild())
- js之DOM操作(创建元素节点createElement)
- js之DOM操作(创建文本节点createTextNode)
- js操作dom节点
- js操作DOM节点
- js操作dom节点
- JS操作DOM节点
- js操作dom节点
- js的DOM(节点操作)
- JS-DOM(二)_操作节点
- js之DOM操作(访问子节点和最后一个节点)
- 原生 js 操作dom的方法(创建节点和操作节点的几种方法)
- Java集合体系结构图
- 再不用ES6就Out了--函数的新特性
- ffmpeg-添加新模块分析
- SequenceNet论文翻译
- WeTest--Android 内存泄露实践分析
- 06 JS-DOM之--节点操作(4种)
- MARRY PLAN
- Octopress 搭建静态博客站点 — 让中文的分类列表(Categories)的超链接正常使用
- 第十四章 使用ADD.NET访问数据库
- javascript字面量
- 使用HTML5实现本地数据存储(一)
- HDU 2844 Coins 多重背包判断可行性
- 第12周项目4-利用遍历思想求解图问题(1-5)
- ListView控件