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