JavaScript中NODE操作学习总结

Posted 2020-07-10

Node：
 1.在 html DOM （文档对象模型）中，每个部分都是节点：
    文档本身是文档节点
    所有 HTML 元素是元素节点
    所有 HTML 属性是属性节点
    HTML 元素内的文本是文本节点
    注释是注释节点
 2.节点属性：
    element.childNodes 返回元素子节点的 NodeList
    element.className 设置或返回元素的 class 属性
    element.firstChild 返回元素的首个子节点
    element.lastChild 返回元素的最后一个子元素
    element.nextSibling 返回下一个兄弟节点
    element.previousSibling 返回前一个兄弟节点
    element.nodeName 返回元素的名称
    element.nodeType 返回元素的节点类型
    element.nodeValue 设置或返回元素值
    element.parentNode 返回元素的父节点
    nodelist.item() 返回 NodeList 中位于指定下标的节点
    nodelist.length 返回 NodeList 中的节点数
    element.firstElementChild 第一个元素节点
    element.firstChild.textContent 第一个子节点中的文本
  3.属性：
    节点中文    类型（nodeType）    nodeName节点名        节点值（nodeValue）
    元素            1            tagName                null
    属性            2            attr                属性值
    文本            3            #text                文本值
    注释            8            #comment            注释文字
    文档            9            #docment            null
  4.新增节点：
    （在父节点最后面新增）
    1.新建元素；var a=document.createElement("标签名")；
    2.新建文本：var b=documnet.createTextNode（"内容文本");
    3.新增元素文本：a.appendChild（b）；
    4.获取父节点：var c=document.getElementById（“id父”）；
    5.新增标签：c.appendChild（a）；

    第二个方法insertBefore()（在指定已有子节点前添加新节点）：
    5.获取添加位置的子节点：var d=document.getElementById（“id子”）；
    6.c.insetBefore（a，d）；

  5.删除节点：
    1.获取删除节点：var a=document.getElementById（“id删”）；
    2.获取父级节点：var b=document.getElementById（“id父”）；
    3.删除：b.removeChild（a）；
    第二种：
    a.parentNode.removeChild（a）；
  6.替换节点：
    parent.replaceChild(新的子节点,要替换的子节点);
  7.克隆节点：
    cloneNode("ture/flase") 方法克隆所有属性以及它们的值
    cloneNode("ture")克隆节点及其属性，以及后代
    cloneNode("flase")克隆节点及其后代
    1.获取要克隆的节点：var a=document.getElementById("id");
    2.克隆：var b=a.cloneNode(true);
    3.添加：c.appendChild（b）；

  8.对样式表的操作：
    1.对内嵌：<div style="color:#f00">内嵌样式</div>
          <script type="text/javascript">
            document.getElementById(‘test‘).style.color = ‘#000‘;
          </script>
    2.对外部样式表只能读取不能修改