zoukankan      html  css  js  c++  java
  • DOM——节点操作

    节点操作

     var body = document.body;
     var div = document.createElement('div');
     body.appendChild(div);
     
     var firstEle = body.children[0];
     body.insertBefore(div, firstEle);
     
     body.removeChild(firstEle);
     
     var text = document.createElement('p');
     body.replaceChild(text, div);

    案例:

    选择水果

    节点属性

    • nodeType 节点的类型

      • 1 元素节点

      • 2 属性节点

      • 3 文本节点

    • nodeName 节点的名称(标签名称)

    • nodeValue 节点值

      • 元素节点的nodeValue始终是null

    模拟文档树结构

    function Node(option) {
      this.id = option.id || '';
      this.nodeName = option.nodeName || '';
      this.nodeValue = option.nodeValue || '';
      this.nodeType = 1;
      this.children = option.children || [];
    }
    
    var doc = new Node({
      nodeName: 'html'
    });
    var head = new Node({
      nodeName: 'head'
    });
    var body = new Node({
      nodeName: 'body'
    })
    doc.children.push(head);
    doc.children.push(body);
    
    var div = new Node({
      nodeName: 'div',
      nodeValue: 'haha',
    });
    
    var p = new Node({
      nodeName: 'p',
      nodeValue: '段落'
    })
    body.children.push(div);
    body.children.push(p);
    
    function getChildren(ele) {
      for(var i = 0; i < ele.children.length; i++) {
        var child = ele.children[i];
        console.log(child.nodeName);
        getChildren(child);
      }
    }
    getChildren(doc);

    节点层级

    var box = document.getElementById('box');
    console.log(box.parentNode);
    console.log(box.childNodes);
    console.log(box.children);
    console.log(box.nextSibling);
    console.log(box.previousSibling);
    console.log(box.firstChild);
    console.log(box.lastChild);
    • 注意

      childNodes和children的区别,childNodes获取的是子节点,children获取的是子元素

      nextSibling和previousSibling获取的是节点,获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素

      nextElementSibling和previousElementSibling有兼容性问题,IE9以后才支持

    • 总结

    节点操作,方法
    	appendChild()
    	insertBefore()
    	removeChild()
    	replaceChild()
    节点层次,属性
    	parentNode
    	childNodes
    	children
    	nextSibling/previousSibling
    	firstChild/lastChild
    

      

  • 相关阅读:
    2020.5.28.第十三周java上机练习
    2020.5.22第十二周java作业
    2020.5.21.第十二周java上机练习
    2020.5.15.java第十一周作业
    2020.5.14.第十一周上机练习
    leetcode02大数相加
    leetcode算法题01
    近期wxss总结
    近期Freecodecamp问题总结
    freecodecamp数字转化成罗马数字
  • 原文地址:https://www.cnblogs.com/superjishere/p/11748530.html
Copyright © 2011-2022 走看看