模拟dom结构
<!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结构的更多相关文章
- React虚拟DOM具体实现——利用节点json描述还原dom结构
前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...
- DOM2级提供的对DOM结构执行深度优先遍历 笔记
NodeIterator和TreeWalker这2个类型可以基于给定的起点对DOM结构执行深度优先遍历.(我测试用的浏览器是Chrome,介绍说IE不支持DOM遍历,但是不知道最新的IE支持不支持) ...
- js实现DOM结构
/* 编写一段js脚本生成下面的DOM结构.要求使用标准的DOM方法或属性 <div id='example'> <p class='slogan'>淘,你喜欢</p&g ...
- LabVIEW设计模式系列——case结构模拟事件结构
标准:1.所有按钮的机械动作必须都用释放时触发或者单击时触发,这是为了保证仅仅触发一次动作. 标准:1.使用简单的case结构模拟事件结构.
- 提高测试脚本复用性降低DOM结构引起路径变化的影响
问题描述 在定位元素时直接复制的xpath. 但是因为下面这些原因导致之前引用的路径失效, 不得不频繁修改脚本重新定位元素, 大降低了脚本的复用性, 也增加了维护的成本: 1. UI修改 (比如增加了 ...
- DOM结构及优化
1.DOM树中三种常见的DOM节点: 1>元素节点:上图中<a>,<h1>等都是元素节点,即标签 2>文本节点:向用户展示的内容,如...中的"文档标题& ...
- datagrid 完整dom结构
<!-- datagrid的最外层容器,可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象, ...
- jQuery EasyUI Datagrid组件的完整的基础DOM结构
标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而“完整” ...
- 怎样确保页面中的js代码一定是在DOM结构生成之后再调用
有这样一类问题, 如下所示, 就是在dom结构没有生成时就在js代码中调用了, 此时就会报错: <head> <script> console.log(document.bod ...
随机推荐
- Java面向对象笔记 • 【第1章 面向对象】
全部章节 >>>> 本章目录 1.1 类和对象 1.1.1 类和对象的概念 1.1.2 类的语法结构 1.1.3 对象的创建和使用 1.1.4 对象和引用 1.1.5 实践 ...
- Java高级程序设计笔记 • 【第4章 网络编程】
全部章节 >>>> 本章目录 4.1 网络基础知识 4.1.1 IP地址 4.1.2 端口号 4.1.3 使用InetAddress 4.1.4 InetAddress 类 ...
- 部署Kubernetes Cluster
中文学习网站:https://www.kubernetes.org.cn/doc-16 部署docker服务 所有节点部署docker服务 curl -sSL https://get.daocloud ...
- docker启动emqx官方镜像，顺便启动exporter
注意,我是把把官方镜像放到了自己的仓库 1.emqx官方镜像启动 docker run -d --name emqx31 -p 1883:1883 -p 8083:8083 -p 8883:8883 ...
- Ranger-Usersync安装
Ranger-Usersync安装, 配置数据源Unix,Usersync从Unix拉取Users/Groups的数据源, 对应的Ranger版本0.6.0. IP/机器名 安装软件 运行进程 zdh ...
- Hbase单点安装Version1.1.5
Hbase单点安装,基于版本1.1.5, 使用hbase-1.1.5.tar.gz安装包. 1.安装说明 使用Hbase自带zookeeper和本地文件目录存储数据 2.安装规划 角色规划 IP/机器 ...
- ActiveMQ基础教程（一）：认识ActiveMQ
ActiveMQ是Apache软件基金会所研发开源的消息中间件,为应用程序提供高效的.可扩展的.稳定的和安全的企业级消息通信. 现在的消息队列有不少,RabbitMQ.Kafka.RocketMQ,Z ...
- centos6.5-搭建Apache
准备工作 1.关闭防火墙 service iptables stop 2．关闭selinux安全机制 setenforce 0 3.卸载rpm格式的httpd 这说明已经安装了rpm格式的软件包.所以 ...
- nuxt 项目安装及环境配置
babel篇 在package.json中添加--exec babel-node 如果需要编译es6,我们需要设置presets包含es2015,也就是预先加载es6编译的模块. 如果需要编译es7, ...
- testng.xml 执行多个测试用例
1.在工程名字上点击右键,点击[New]-->[File] 2.在弹出的[New File]对话框中的[File name]输入[testng.xml],点击[Finish]即创建了一个test ...