<!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结构的更多相关文章

  1. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

  2. DOM2级提供的对DOM结构执行深度优先遍历 笔记

    NodeIterator和TreeWalker这2个类型可以基于给定的起点对DOM结构执行深度优先遍历.(我测试用的浏览器是Chrome,介绍说IE不支持DOM遍历,但是不知道最新的IE支持不支持) ...

  3. js实现DOM结构

    /* 编写一段js脚本生成下面的DOM结构.要求使用标准的DOM方法或属性 <div id='example'> <p class='slogan'>淘,你喜欢</p&g ...

  4. LabVIEW设计模式系列——case结构模拟事件结构

    标准:1.所有按钮的机械动作必须都用释放时触发或者单击时触发,这是为了保证仅仅触发一次动作. 标准:1.使用简单的case结构模拟事件结构.

  5. 提高测试脚本复用性降低DOM结构引起路径变化的影响

    问题描述 在定位元素时直接复制的xpath. 但是因为下面这些原因导致之前引用的路径失效, 不得不频繁修改脚本重新定位元素, 大降低了脚本的复用性, 也增加了维护的成本: 1. UI修改 (比如增加了 ...

  6. DOM结构及优化

    1.DOM树中三种常见的DOM节点: 1>元素节点:上图中<a>,<h1>等都是元素节点,即标签 2>文本节点:向用户展示的内容,如...中的"文档标题& ...

  7. datagrid 完整dom结构

    <!-- datagrid的最外层容器,可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象, ...

  8. jQuery EasyUI Datagrid组件的完整的基础DOM结构

    标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而“完整” ...

  9. 怎样确保页面中的js代码一定是在DOM结构生成之后再调用

    有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错: <head> <script> console.log(document.bod ...

随机推荐

  1. [opencv]拟合vector<Mat>集合区域接近的元素

    vector<Rect> PublicCardFrameDetection::fitrect(vector<Rect> rects){ int size = rects.siz ...

  2. Java+HTML5 试题 云南农业职业技术学院 - 互联网技术学院

    摸底测试 100题_共100.00分_及格60.00分  第1题 [单选题][1.00分][概念理解] 执行完下面程序片段后, ( )的结论是正确的. int a, b, c; a = 1; b = ...

  3. 编写Java程序，以继承和多态思想模拟饲养员喂养不同动物的不同行为

    返回本章节 返回作业目录 需求说明: 以继承和多态思想模拟饲养员喂养不同动物的不同行为 动物园有饲养员和动物,其中动物有老虎.马.猴子.羊.狼等. 饲养员对不同的动物有不同的喂养行为. 实现思路: 以 ...

  4. IIS部署.net core项目

    1.安装AspNetCoreModule模块 与ASP.NET时代不同,ASP.NET Core不再是由IIS工作进程(w3wp.exe)托管,而是使用自托管Web服务器(Kestrel)运行,中间最 ...

  5. Identity Server 4到今年年底就停止支持了，试一下使用Orchard Core 作为认证服务

    Identity Server 4到今年年底就停止支持了,新的版本需要收费(好像目前是按企业规模,不过将来说不准).我们需要为这种情况做一些技术准备,至少需要为用户多准备一些可选方案.从目前成熟的开源 ...

  6. SYCOJ27猴子选大王

    题目-猴子选大王 (shiyancang.cn) 一.出队顺序Description有M个人,其编号分别为1-M.这M个人按顺序排成一个圈.现在给定一个数N,从第一个人开始依次报数,数到N的人出列,然 ...

  7. kafka学习笔记（五）kafka的请求处理模块

    概述 现在介绍学习一下kafka的请求处理模块,请求处理模块就是网络请求处理和api处理,这是kafka无论是对客户端还是集群内部都是非常重要的模块.现在我们对他进行源码深入探讨.当我们说到 Kafk ...

  8. php反序列化之pop链构造

    本题是某信有一次内部比赛的题目,涉及到pop链的构造问题,所以在这里与大家分享一下 题目 查看源码 逻辑是当参数fn存在且不包含string.zlib.flag这三个字符串时,进行文件包含这里的过滤是 ...

  9. boot项目启动成功 接口全部404

    今天开发的时候遇到一个404的错误,路径启动类位置都对,就是404很气人.记录下解决的过程,以供遇到同等困惑的小伙伴参考 404原因排查步骤 首先按照下面步骤检查一遍 首先检查路径是否正确,把路径重新 ...

  10. promise初体验，小白也能看懂

    promise出现的目的一为处理JavaScript里的异步,再就是避免回调地狱. promise有三种状态:pending/reslove/reject . pending就是未决,resolve可 ...