1. DOM获取节点
1)通过childNodes获取子节点
属性:childNodes nodeType 如果子节点中有文本节点,会同时返回文本节点。这时需要搭配nodeType,才能滤掉文本节点,只返回元素节点。2)通过children获取子节点
属性:children 只会返回所有的元素节点,不会返回文本节点。 何谓文本节点? 文本节点: 没有任何标签包含的字符串或空串。3)获取父节点
属性:parentNode 4)获取相对定位的父节点 属性:offsetParent5)获取首尾子节点
获取首个子节点:firstChild、firstElementChild 获取末尾子节点:lastChild 、lastElementChild 注:firstChild和lastChild有兼容性问题,建议使用firstElementChild 和 lastElementChild。6)获取兄弟节点
获取后一个兄弟节点:nextSibling、nextElementSibling 获取前一个兄弟节点:previousSibling、previousElementSibling 注:nextSibling和previousSibling有兼容性问题,建议使用nextElementSibling 和 previousElementSibling。 2. 操纵DOM元素属性第一种:oDiv.style.display="block";
第二种:oDiv.style["display"]="block"; 第三种:Dom方式 获取:getAttribute(名称) 设置:setAttribute(名称, 值) 删除:removeAttribute(名称)3. DOM元素的创建、插入、删除
1)创建DOM元素 createElement(标签名) 创建一个节点2)插入DOM元素
appendChild(节点) 追加一个节点 insertBefore(节点, 原有节点) 在已有元素前插入 3)删除DOM元素 removeChild(节点) 删除一个节点 4. 文档碎片(很少使用)1)创建文档碎片
document.createDocumentFragment() 2)说明 如果需要添加多个节点,可以先创建一个文档碎片,先将要添加的节点保存到文档碎片中, 再将文档碎片添加到指定位置。 智能社老师的比喻:文档碎片好比是胶囊的外壳,吃到肚子里这层外壳会自动融化。 文档碎片被添加到父元素下之后,也会自动消失,只留下那些本来就要添加的节点。