JS学习之DOM节点操作2

Posted 2022-05-23 今天学习英语了吗

删除节点

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位大咖的思考法则、工作方式、逻辑体系