JS基本功系列-DOM记录03

admin 2022年5月1日14:48:23安全开发评论5 views1667字阅读5分33秒阅读模式

DOM节点操作

创建:

//创建
var div = document.createElement('div');
div.innerHTML = 123;
document.body.appendChild(div);

var text = document.createTextNode('Hello world')
document.body.appendChild(text)

增加子节点:

<a href="">我是超链接</a>

 var a = document.getElementsByTagName('a')[0];
var div = document.createElement('div');
div.innerHTML = '<p>我是段落标志</p>'
document.body.appendChild(div);//增加子节点--->总是在父级元素的最下边增加节点
JS基本功系列-DOM记录03
增加子节点

减少节点:

 var a = document.getElementsByTagName('a')[0];
var div = document.createElement('div');
div.innerHTML = '<p>我是段落标志</p>'
document.body.appendChild(div);
div.appendChild(a);//除了增加,还有剪切节点的功能,这里就是体现
//a标签从上面移到了下面
JS基本功系列-DOM记录03
减少节点

插入节点

插入前:

<div>
  <p>我是段落标签</p>
</div>

插入操作:

//插入: 在父级c节点下的子节点b之前插入a节点
  var div = document.getElementsByTagName('div')[0];
  var p = document.getElementsByTagName('p')[0];
  var a = document.createElement('a');
  a.href = 'www.baidu.com';
  //插入: 在父级div节点下的子节点p之前插入a节点
  div.insertBefore(a,p)

插入后:

<div>
  <a href="www.baidu.com"></a>
  <p>我是段落标签</p>
</div>

删除

<div>
  <h1>我是标题</h1>
  <p>我是段落标签</p>
</div>
 // //removeChild(子节点)--->删除子节点
  // var div = document.createElement('div');
  // document.body.appendChild(div);
  // body.removeChild(div)//这一步其实只是将上一步的div从文档中抽离了(就是说你在视图中看不了了)
  // //但是其实还是在内存里面的!!!

  //节点:
  //元素  文本  注释  属性  document  documentFragment

  //  <p>我是段落标签</p>  //--->这是一个元素
  //元素--->元素节点具有下面的若干属性:
  //nodeName nodeValue nodeType attributes  hasChildNOdes
  //元素  -> 构造函数实例化             -->    div节点
  //div       new HTMLDivElement()            removeChild(div)
  //          div对象存到了内存当中             只是删除了节点


  //那么真正能够销毁的操作又是什么
  var div = document.getElementsByTagName('div')[0];
  var p = document.getElementsByTagName('p')[0];
  p.remove()



原文始发于微信公众号(迪哥讲事):JS基本功系列-DOM记录03

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年5月1日14:48:23
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  JS基本功系列-DOM记录03 http://cn-sec.com/archives/965937.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: