HTML5 DOM树形结构可视化

DOM Tree Visualisation

html5, dom, tree

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3392
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var App = function() {

function getLevelNodes(node) {
        return Array.from(node.parentNode.children);
    }

function getChildIndex(node) {
        return getLevelNodes(node).indexOf(node);
    }

function tagNodeName(node) {
        node.innerHTML = node.nodeName + node.innerHTML;
    }

function clearInside(node) {
        Array.from(node.childNodes).forEach(function(child) {
            if (child.nodeName === '#text') {
                child.remove();
            }
        });
    }

function handleImage(node) {
        if (node.nodeName === 'IMG') {
            node.src = '';
            node.alt = 'IMG';
        }
    }

return {
        init: init
    };
}();

document.addEventListener('DOMContentLoaded', App.init.bind(App));

编译

CSS

html,
body {
    width: 100%;
    height: 100%;
}
body {
    font: normal 100 100%/1.5 helvetica, arial, sans-serif;
    -webkit-perspective: 500px;
    perspective: 500px;
}
.tree {
    position: relative;
}
.tree * {
    box-sizing: border-box;
    position: absolute;
    display: block;
    height: 4.5vw;
    bottom: -9vw;
    -webkit-transform: translateX(5%);
    transform: translateX(5%);
    font-size: .95em;
    text-align: center;
    line-height: 4.5vw;
    border: 1px solid transparent;
    border-radius: 3px;
    background: #999;
    color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.tree *:hover {
    background: #27f;
    border-color: black;
}
.tree *:hover::before {
    background: black;
}
.tree *::before {
    content: "";
    position: absolute;
    top: -4.5vw;
    left: 50%;
    -webkit-transform: translate(-5%);
    transform: translate(-5%);
    width: 2px;
    height: calc(4.5vw - 1px);
    background: inherit;
}
@media (max-width: 500px) {
    .tree {
        width: 175%;
    }
    .tree * {
        height: 30px;
        bottom: -60px;
        line-height: 30px;
    }
    .tree *::before {
        top: -30px;
        height: 29px;
    }
}
@media (max-width: 300px) {
    .tree {
        width: 250%;
    }
}

HTML

DOM Tree Visualisation

html5, dom, tree

编辑器支持Emmet

快捷键

DOM Tree Visualisation

html5, dom, tree

HTML5 D3.js 树形结构动画示范（可绘制脑图）

HTML5 Canvas带节点的树形结构图

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：