[TOC]

13.7 元素操作

就是操作元素的方式

创建
1. 创建元素
1. document.createElement(labelName)
1. labelName 标签名字符串
2. 创建文本
1. document.createTextNode(str);
1. str 文本字符串
3. 注释
1. document.createComment(str);
1. str 文本字符串
4. 文档碎片
1. document.createDocumentFragment();

var element = document.createElement('li');
console.log(element);
// 创建文本节点
var text = document.createTextNode('今天是个好日子');
console.log(text);
// 创建注释节点
var comment = document.createComment('今天是个好日子')
console.log(comment)
// 创建文档碎片
var documentFragment = document.createDocumentFragment();
console.log(documentFragment)

上树
父节点.appendChild(子节点)

下树
父节点.removeChild(子节点)

插入
父节点.insertBefore(子节点1， 子节点2)
把子节点1插入到子节点2之前

替换
父节点.replaceChild(子节点1，子节点2)
用子节点1来替换掉子节点2

克隆
节点.cloneNode(bool)
如果bool为真 连带子节点一起克隆 如果为假 只克隆自己

  • 创建节点

    • 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);
      ```javascript var nodes = document.body.childNodes;

    // 获取元素节点 var div = nodes[1];

    // 获取属性节点 var id = div.attributes[0];

    // 获取文本节点 var textNode = nodes[2] // 获取注释节点 var commentNode = nodes[3];

    // 获取文档节点

    // 节点类型 // console.log(div.nodeType) 1 // console.log(id.nodeType) 2 // console.log(textNode.nodeType) 3 // console.log(commentNode.nodeType) 8 // console.log(document.nodeType) 9

    // 节点名称 // console.log(div.nodeName) // 元素大写的名字 // console.log(id.nodeName) // 属性名 // console.log(textNode.nodeName) // #text // console.log(commentNode.nodeName) // #comment // console.log(document.nodeName) // #document

    // 节点值 // console.log(div.nodeValue) // null // console.log(id.nodeValue) // 属性值 // console.log(textNode.nodeValue) // 文本内容 // console.log(commentNode.nodeValue) // 注释内容 // console.log(document.nodeValue) // null ```

    元素关系

    ```html hello

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    ```