js基础（十）{元素操作 节点属性}

HTML属性

可以分为标准属性与非标准属性(自定义属性)

• 标准属性 指的是由W3C制定的属性
  • 通用属性 所有标签都有的属性 比如 id class style title等
  • 特有属性 只有一个或者几个标签有的属性 比如 name type checked 等
• 非标准属性 指的是由程序员自己定义的属性

元素的基本操作

标准属性可以直接通过元素打点获取 打点修改 (或者使用方括号语法也可以) 注意避讳关键字

    // 避讳JS中的class关键字
    元素.className = "abc";
    // 读取name属性值
    var str = 表单元素.name;

非标准属性要通过

• setAttribute(propName, propValue); 设置、修改属性值
  • propName 表示属性名
  • propValue 表示属性值
• getAttribute(propName); 获取属性值
  • propName 表示属性名
• removeAttribute(propName); 移除属性(从HTML标签身上移除)
  • propName 表示属性名

节点

整个页面是由节点组成的。每一个节点有不同的性质，DOM将它们根据性质分类。

节点的属性

• nodeType 节点类型 属性值为数字
  • 1 表示元素节点
  • 2 表示属性节点
  • 3 表示文本节点
  • 8 表示注释节点
  • 9 表示文档节点(就一个 document)

获取属性节点 要通过 元素.attributes 来获取到集合 再通过下标获取想要的属性节点

• nodeName 节点名称 属性值为字符串
  • 元素节点的名称为大写的标签名
  • 属性节点的名称为属性名
  • 文本节点的名称为 #text
  • 注释节点的名称为 #comment
  • 文档节点的名称为 #document
• nodeValue 节点值
  • 元素节点没有节点值 null
  • 属性节点的节点值就是属性值
  • 文本节点的节点值是文本内容
  • 注释节点的节点值是注释内容
  • 文档节点没有节点值 null

节点的关系

节点关系就两种：父子关系 兄弟关系

• 父子关系
  • 父找子
    • childNodes 所有的节点
    • children 所有的元素节点
    • firstChild 第一个节点
    • firstElementChild 第一个元素节点
    • lastChild 最后一个节点
    • lastElementChild 最后一个元素节点
  • 子找父
    • parentNode 父节点
• 兄弟关系
  • nextSibling 下一个兄弟
  • nextElementSibling 下一个元素兄弟
  • previousSibling 前一个兄弟
  • previousElementSibling 前一个元素兄弟

节点的操作(重要)

• 创建节点

  • document.createElement(标签名字符串)
  • document.createTextNode(文本内容)

      // 创建一个div元素节点
      var div = document.createElement("div");
      // 创建文本节点
      var textNode = document.createTextNode("我是一个通过JS脚本创建出来的文本节点");
      // 这样的节点只在JS环境中存在,还没有到DOM树上去.所以叫做"孤儿节点"
  

• 追加节点

  • 父元素.appendChild(子元素)
    • 子元素会被追加到父元素的最后,作为lastChild节点

      // 创建一个节点
      var div = document.createElement("div");
      // 向父元素中追加一个节点
      var dom = document.getElementById("#box");
      dom.appendChild(div);
  

• 插入节点

  • 父元素.insertBefore(newChild, oldChild)
    • newChild是新元素
    • oldChild是父元素的已有元素
    • newChild会插入到oldChild的前一个位置

      // 创建一个节点
      var div = document.createElement("div");
      // 获取父元素
      var box1 = document.getElementById("box1");
      // 插入到box1之前
      document.body.insertBefore(div, box1);
  

• 替换节点

  • 父元素.replaceChild(newChild, oldChild)
    • newChild是替换上的元素
    • oldChild是被替换的元素

      // 创建一个节点
      var div = document.createElement("div");
      // 获取树上的元素
      var box1 = document.getElementById("box1");
      // 替换box1
      document.body.replaceChild(div, box1);  
  

• 克隆节点

  • 元素.cloneNode(boolean);

    • boolean是一个布尔值 决定是否克隆子元素 如果为真则克隆子元素 否则不克隆 默认是false

      // 选中一个节点
      var node = document.querySelector(".one");
      // 复制该节点得到新节点
      var cloneNode = node.cloneNode(true);
  

• 删除节点

  • 元素.remove() 让调用remove方法的元素 下树
  • 父元素.removeChild(子元素) 让父元素中的子元素下树

      // 获取元素
      var box2 = document.getElementById("box2");
      // 元素自己下树
      box2.remove();
  
      // 获取元素
      var box2 = document.getElementById("box2");
      // 让body把box2删掉
      document.body.removeChild(box2);