JS学习之DOM节点操作2

Posted 今天学习英语了吗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS学习之DOM节点操作2相关的知识,希望对你有一定的参考价值。

删除节点

node.removeChild(child);

node.removeChild(child) 方法从DOM中删除一个子节点,返回删除的节点

案例:删除留言案例

分析:

  • 把文本与里面的值赋值给li 时候,多添加一个删除链接

  • 需要把所有链接都获取过来,点击当前的链接时候,删除当前链接所在li

  • 阻止链接跳转需要添加javaScript(0); 或者 javaScript:;

给li添加a链接 直接 + 即可

复制节点(克隆节点)

node.cloneNode)()

node.cloneNode)()方法返回调用该方法节点的一个副本,也称为克隆节点/拷贝节点

注意:

  1. 如果括号参数为空或者为false 则是浅拷贝,即只克隆复制节点本身,不可隆里面的子节点

  2. 括号为true 或 false 是深拷贝 只复制标签并且复制里面的内容

口述:ul里面的第一个li 复制出来再呈现到页面中(添加变量)

 

案例:动态生成表格

 

分析:

  • 因为里面的学生数据都是动态的,需要js动态生成,模拟数据,自己定义好数据,数据采取对象形式存储

  • 所有的数据都是当道tbody里面的行里面(对应多少人)

  • 每个行里面又有很多单元格(对应里面的数据),还继续使用循环创建多个单元格,并把数据存入林(双重for循环)

  • 最后一列单元格是删除,需要单独创建单元格

 

三种动态创建元素区别

  • document.write()

  • element.innerhtml

  • document.createElement() 创建元素

区别:

  1. document.write 是直接将内容写入页面的内容流,但是文档流执行完毕,则会导致页面全部重绘 原来的页面都没有了

  2. innerHTML.是将内容写入某个dom 节点,不会导致页面全部重绘

  3. innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接)结构稍微复杂

  4. createElement() 创建多个元素效率稍微低一点点,但结构更清晰

总结:不同浏览器下,innerHTML效率要比createElement 高

 

DOM重点核心

文档对象模型(DocumentObiectModel,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

1.对于javascript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。 2.对于HTML,dom使得html形成一棵dom树包含文档、元素、节点

获取过来DOM元素是一个对象(object) 所有称为文档对象模型

关于 dom操作 注意针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作

创建

  1. document.wirte

  2. innerHTML

  3. createElement

  1. appendChild

  2. inserBefore

  1. removeChild

注意修改DOM的元素属性,dom元素的内容,属性,表单的值等

  1. 修改元素属性: src hrf title等

  2. 修改普通元素内容:innerHTML innerText

  3. 修改表单元素:value type dissbled等

  4. 修改元素样式:style className

主要查询dom的元素

  1. DOM提供的方法:getElement getElementsByTagName 古老用法不太推荐

  2. H5提供的新方法:querySelector querySelectorAll 提倡

  3. 利用节点操作获取元素: 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

属性操作

主要针对于自定义属性

  1. setAttribute:设置dom的属性值

  2. getAttribute:得到dom的属性值

  3. removeAttribute移除属性

事件操作

给元素注册事件,采取事件源 事件类型 = 事件处理程序

 

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系

以上是关于JS学习之DOM节点操作2的主要内容,如果未能解决你的问题,请参考以下文章

jQuery_DOM学习之------创建节点及节点属性

Vue源码学习之虚拟DOM——Vue中的DOM-Diff (上)

JavaScript入门学习之四——DOM介绍及常用方法

轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点

轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

Vue基础学习之DOM操作