原生dom节点遍历

获取body:

var body = document.body

获取当前节点下的所有子节点

body.childNodes //包括text

获取标签的第一个和最后一个节点

body.firstChild
body.lastChild

获取根节点

body.ownerDocument

父节点

body.parentNode
body.parentElement

前/后一个同级节点

body.previousSibling
body.nextSibling

创建新标签

let img = document.createElement(img);

把标签拼接进文档流

let div= document.getElementById('id');

div.appendChild(img)

给img标签设置src属性

img.setAttribute('src', 'imgUrl');

创建一个p标签,设置文字,并把该标签拼接在img之前

创建一个p标签
let p = document.createElement('p');

设置内容
p.innerHTML = '这是p标签';

拼接进文档img前
div.insertBefore(p, document.getElementById('img'));

替换节点

div.replaceChild(p, document.getElementById('img'));

移除节点

删除div中的p标签
div.removeChild(document.getElementById('p'));


document.getElementById('p').remove()
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,991评论 19 139
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • //拿到body,操作其中的内容 // var body=document.body; // 获取当前节点下的所有...
    他在发呆阅读 397评论 0 0
  • 本章内容 理解包含不同层次节点的 DOM 使用不同的节点类型 克服浏览器兼容性问题及各种陷阱 DOM 是针对 HT...
    闷油瓶小张阅读 668评论 0 1
  • 互联网放大了个人的价值,优秀的人更容易抓住互联网的红利,成为这个时代的宠儿。 这是个令人焦虑不安的时代,80后已经...
    f3f795d3cb88阅读 661评论 0 3