js : DOM-增删改查

节点关系

  • children
  • childNodes
  • parentNode
  • firstChild
  • lastChild
  • proviousSibling
  • proviusElementSibling
  • nxetSibling
  • nextElementSibling

DOM的增删改查

  • 增加,也就是动态创建
    • document.crentElement("标签名")
    • cloneNode(Boolean)
      • Boolean = true, 深度克隆,也就是把子子孙孙都克隆下来
      • Boolean = false,默认就是false,只是克隆表面
  • 动态插入
    • parent.appendChild(newEle) 把新元素插入到父容器末尾
    • parent.insertBefore(newEle,oldEle) 把新元素插入到指定元素的前面
  • 动态替换
    • parent.replaceChild(newEle,oldEle) 那newEle替换oldELe
  • 删除元素
    • parent.removeChild(ele) 移出

dom的属性操作

  • 属性操作用“.” 和 [];凡是点能操作的,[]都能操作
    • []能操作数字,变量,但是不能用"."来操作
  • 属性操作,attribute
    • getAttribute(属性名) 获取属性
    • setAttribut(属性名,属性值) 设置属性
    • removeAttribute(属性名) 移除属性
  • "." 和 attribute的区别:
    • 在‘获取’的时候:元素标签上的自定义属性,通过"."拿到的是undefined;但是通过getAttribute(属性名) 可以拿到真正的属性值
    • 在“设置”的时候:通过"."设置的自定义属性,标签上是看不到的,但是通过setAttribute(属性名,属性值) 设置的属性,在标签上可以看到
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容