美文网首页前端面试小结
2018-03-17 面试编程--打印DOM节点及其层数

2018-03-17 面试编程--打印DOM节点及其层数

作者: 猫熊猫熊 | 来源:发表于2018-03-18 09:47 被阅读0次

给定任意结构的DOM树,要求打印出从指定父级开始(不包括父级)的层级。

有几点需要注意的!!!

(1)children获取的是所有的元素子节点,childNodes获取的是所有的子节点,元素、文本注释、空格;因此使用childNodes时要判断节点类型!

文本节点nodeType==3,元素节点nodeType==1;

(2)js获取节点类型nodeType,节点名称nodeName,节点值nodeValue;验证是否有子节点hasChildNodes();

(3)文档树是一个树结构,要打印所有节点,需要实现深度遍历,用递归的方法实现!对每一个子节点再调用该方法。

(4)需要对没有字节点的情况进行判断,并返回return;

以下贴代码:

补充对节点的操作:document.createElement()  appendChild()  inserBefore()  replaceChild()  removeChild()

原生js改变css的方法:(1)元素.style.样式属性=“内容” (2)元素.setAttribute("style","height:300px")

相关文章

  • 2018-03-17 面试编程--打印DOM节点及其层数

    给定任意结构的DOM树,要求打印出从指定父级开始(不包括父级)的层级。 有几点需要注意的!!! (1)childr...

  • DOM节点

    DOM节点 js获取元素及其属性 1.访问或获取节点 getElementById(); getElementsB...

  • 遍历整个 DOM 树并打印名称

    1. 遍历 DOM 树并打印节点类型及名称 2. 遍历 DOM 树并打印所有元素的 tagName 在这段代码中,...

  • 面试题:DOM树遍历

    问题:遍历DOM树并打印出DOM节点的tagName和className 思路: 首先我们不确定当前dom下有多少...

  • 「DOM 编程」文档树

    文档树HTML 转换 DOM 树节点遍历节点类型元素遍历 DOM 编程就是使用 W3C 定义的 API (Appl...

  • 「DOM 编程」节点操作

    节点操作获取节点接口获取节点getElementByIdgetElementsByTagNamegetElemen...

  • 【DOM】DOM的操作(增删改查)

    操作DOM的核心就是增删改查 参考: JavaScript DOM编程——API详解 目录 一、节点创建型API ...

  • 元素对象和选择器

    html dom树 通过获取dom节点的方法获取到 元素对象 还能通过console.dir(元素对象) 打印出元...

  • 渲染函数&JSX

    1.基础 render函数提供javascript完全编程能力 2.节点,树以及虚拟DOM 虚拟DOM:vue通过...

  • JavaScript DOM 收录

    《一 》共享onload事件 《二》 insertAfter()函数:dom编程中将一个新节点插入指定节点的后面。

网友评论

    本文标题:2018-03-17 面试编程--打印DOM节点及其层数

    本文链接:https://www.haomeiwen.com/subject/olajqftx.html