子节点与父节点
子节点常用属性
| 节点类型 |
nodeName |
nodeType |
nodeValue |
| 文本节点 |
#text |
3 |
文本内容 |
| 元素节点 |
大写元素标签 |
1 |
null |
| 注释节点 |
#comment |
8 |
注释内容 |
子节点
childNodes 获取某个元素的子节点
- 高版本浏览器 ：元素子节点，文本子节点（包括空格和换行），注释子节点
- 低版本浏览器：元素子节点，文本子节点（不包括空格和换行），注释子节点
children 获取某个元素的子元素节点
- 高版本浏览器：元素子节点
- 低版本浏览器：元素子节点，注释子节点
firstChild 第一个子节点 lastChild 最后一个子节点，高低版本浏览器都适用firstElementChild 第一个子元素节点 lastElementChild 最后一个子元素节点，低版本浏览器不识别previousSibling 上一个兄弟节点 nextSibling 下一个兄弟节点，高低版本浏览器都适用previousElementSibling 上一个兄弟元素节点 nextElementSibling 下一个兄弟元素节点，低版本浏览器不识别
父节点
parentNode 获取父节点，高低版本浏览器都适用parentElement 获取父元素，与 parentNode 相同，高低版本浏览器都适用
节点操作
创建节点
document.write(); 页面加载完成后使用会覆盖网页中其他 DOM 对象innerHtml 通过 += 赋值包含标签的字符串document.createElement('tag') 创建元素后父元素使用 appendChild(追加的子节点);
获取文本
textContent 属性提供对元素中的 text 的访问权限：只提供文本，去掉所有的标签
textContent 可以获取隐藏元素的文本，包含换行和空白，IE8 及以下浏览器无法识别
innerText 属性允许将元素中的 HTML 作为字符串来获取
innerText 不能获取隐藏元素的文本，获取到的文本不包含换行和空白
outerHTML 属性用于获取元素的完整 HTML，包含文本，标签，换行和空白
outerHTML 可以获取隐藏元素完整标签及内容
子节点增加，替换，删除
- 插入子节点
insertBefore(新子节点,参照子节点);
- 追加子节点
- 替换子节点
- 删除子节点
removeChild(删除的子节点);子节点.remove; 只有 PC 端可用，IE 和移动端不支持