0%

javascript dom 节点

子节点与父节点

子节点常用属性

节点类型 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(新子节点,参照子节点);
  • 追加子节点
    • appendChild(追加的子节点);
  • 替换子节点
    • replaceChild(新子节点,原子节点);
  • 删除子节点
    • removeChild(删除的子节点);
    • 子节点.remove; 只有 PC 端可用,IE 和移动端不支持