首页 > 其他 > 详细

模拟dom结构

时间:2019-08-24 20:02:46      阅读:135      评论:0      收藏:0      [点我收藏+]
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="box">hello</div>
  <p id="p">world</p>
  <!-- 这是注释 -->
  <script>
    var box = document.getElementById(box);
    console.dir(box);
    // 创建一些列具有相同属性的对象,构造函数

    // 获取对象没有的属性,属性的值是undefined
    function Node(options) {
      // 设置属性的默认值
      this.className = options.className || ‘‘;
      this.id = options.id || ‘‘;
      // 跟节点相关的属性
      // 节点的名称,如果是元素的节点的话,是标签的名称
      this.nodeName = options.nodeName || ‘‘;
      // 节点的类型  如果是元素节点 1 属性节点 2  文本节点 3  数值类型
      this.nodeType = options.nodeType || 1;
      // 记录节点的值,如果是元素节点,始终是null
      this.nodeValue = options.nodeValue || null;
      // 记录子节点
      this.children = options.children || [];
    }
    

    // 创建html节点
    var html = new Node({
      nodeName: html
    });

    // 创建head节点
    var head = new Node({
      nodeName: head
    });
    // 设置html中的子节点 head
    html.children.push(head);
    // console.dir(html)

    // body 
    var body = new Node({
      nodeName: body
    })
    // 设置html中的子节点 body
    html.children.push(body);

    // div
    var div = new Node({
      nodeName: div
    })
    // p
    var p = new Node({
      nodeName: p
    })

    // 设置body的子节点
    body.children.push(div);
    body.children.push(p);

    console.dir(html);


    // 在运行的时候,浏览器内部维护了一颗DOM树
    // 1 深刻理解DOM
    // 2 了解节点相关的属性  nodeName  nodeType  nodeValue
    // 3 了解节点的层次结构
  </script>
</body>
</html>

 

模拟dom结构

原文:https://www.cnblogs.com/jiumen/p/11405763.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!