JS中修改/创建/移动/删除 HTML DOM元素

ES6学习, HTML学习, JavaScript学习 本文总阅读量次

JS往HTML中添加节点的流程总结

HTML元素 通常是由 元素节点 和 文本节点 组成。

  1. 使用createElement()创建 元素节点
  2. 使用createTextNode() 创建 文本节点
  3. 使用appendChild() 将节点添加到另一个节点列表的末尾

例子

创建一个标题 (H1), 你必须创建 “H1” 元素 和 文本节点 :

1
2
3
4
5
6
7
8
// 创建元素名称为H1的元素节点h
var h=document.createElement("H1")
// 创建内容为Hello World的文本节点t
var t=document.createTextNode("Hello World");
// 将文本节点t添加到元素节点h的末尾
h.appendChild(t);
// 将元素节点h添加到document对象的body列表末尾
document.body.appendChild(h);

完整例子以及效果

HTML DOM Document 对象

  • 每个载入浏览器的 HTML 文档都会成为 Document 对象。
  • Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

Node.appendChild() 添加/移动 子节点

  • 语法：node1.appendChild(node2)
  • appendChild() 方法可向节点（node1）的子节点列表的末尾添加新的子节点（node2）。
    • 注意：
    1. node2是添加到node1内部的！
    2. 如果node2已存在于js文件中，则appendChild()会将node2 移动 到node1之中移动节点对象
    • 参数node2：（节点对象）必须，你要添加的节点对象。
  • 返回值：（节点对象）添加的节点。
  • 例子

document.createElement()创建元素节点

  • createElement() 方法通过指定名称创建一个元素。
  • 语法:document.createElement(nodename)
  • 参数nodename：（String）必须，创建元素的名称。（注意不是自定义的！！）
    • "BUTTON"/"button"：创建按钮元素
    • "H1"/"h1":创建H1标题
    • "div"等，以此类推。
  • 返回值：（元素对象）创建的元素节点。

注意：createElement()要与appendChild()结合起来使用才能使创建的元素显示在页面上。
例子：HTML元素经常包含文本。创建指定文本的按钮你需要在按钮元素后添加文本节点

document.createTextNode() 创建 文本节点

HTML元素 通常是由 元素节点 和 文本节点 组成。

  • createTextNode() 可创建文本节点。
  • 语法:document.createTextNode(text)
  • 参数text：（String）必须。文本节点的文本。
  • 返回值：（文本节点对象）创建的文本节点。
  • 例子

Node.removeChild() 删除子节点

  • removeChild() 方法删除子节点。
  • 语法：let oldChild = node.removeChild(child);或element.removeChild(child);
    • child:是要移除的那个子节点.
    • node:是child的父节点.
    • oldChild保存对删除的子节点的引用. oldChild === child.
  • 返回值：成功该函数返回被删除的节点，如果失败则返回 NULL。
  • 被移除的这个子节点仍然存在于内存中,只是没有添加到当前文档的DOM树中,因此,你还可以把这个节点重新添加回文档中,当然,实现要用另外一个变量比如上例中的oldChild来保存这个节点的引用. 如果使用上述语法中的第二种方法, 即没有使用 oldChild 来保存对这个节点的引用,则认为被移除的节点已经是无用的,在短时间内将会被内存管理回收.
  • 如果上例中的child节点不是node节点的子节点,则该方法会抛出异常.
  • MDN参考
  • 例子

使用let实现面试常见小例子

代码解析：

  1. 先在HTML文档中创建一个按钮节点btn
  2. 再改变节点文字
  3. 然后给节点btn设置一个点击事件
  4. 最后将节点btn添加到body中

使用var生成十个按钮每个按点击的时候弹出1-10
原因：
执行事件时，alert（）首先需要i，但是当前作用域找不到，它就会到上一级找，上一级通过自调用时有传进来的i，这个i是随着函数的调用而产生，随着函数调用结束而释放的，不是作用在一开始的var i身上的，所以每一个函数都对应不同的数字。

变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。所以每一次循环中btn的innerText所指向的i其实都是同一个，循环到最后时前面的i全部被最后的结果覆盖了。而局部变量的话就是每循环一次产生一个新的i，所以不会被覆盖。

做这个修改则点击每个按钮弹出的都是11
原因：
执行事件时，alert（）首先需要i，但是当前作用域找不到，它就会到上一级找，上一级直接就是var i了，所有的代码都作用在它身上，所以他会是11。

使用let生成十个按钮每个按点击的时候弹出1-10
可以发现，使用let以后就不需要额外放一个自调用函数把他们框起来了。
变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量。

ES6学习, HTML学习, JavaScript学习