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(属性名,属性值) 设置的属性，在标签上可以看到