打印节点元素名称class与id

作者: 二三筆 | 来源:发表于2020-07-09 11:31 被阅读0次

打印节点元素名称class与id
前端开发规范—css规范
JavaScript DOM文档对象
task7
CSS选择器
CSS基础（二）
jquery选择器汇总
SetAttribute()、appendChild（）、ins
遍历整个 DOM 树并打印名称
2.CSS选择器-CSS基础

function getNodeMsg(node) {
  if (!node) return null;
  // 获取元素类型
  const nodeName = node.nodeName;
  // 元素id
  const idName = toStr(node.getAttribute("id"), "#");
  // 元素class
  const className = toStr(node.getAttribute("class"), ".");

  return nodeName + idName + className;
  // 将"class class"=>".class.class"或者是div使用#
  function toStr(str, div) {
    if (!str) return "";
    str = str.split(" ");
    str = str.map(x => div + x);
    return str.join("")
  }
}

（未测试特殊情况）

打印节点元素名称class与id
（未测试特殊情况）
前端开发规范—css规范
id和class的命名 ID和class的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦...
JavaScript DOM文档对象
一、节点文本节点，IE8以下空格节点获取不到。元素节点 div。属性节点 class、id、value。注...
task7
class 和 id 的使用场景?class 用于具有相同样式特征的一组元素上。id 是元素的独一无二的名称。 C...
CSS选择器
id与class的使用场景 id选择器，匹配特定id的元素类选择器，匹配class包含(不是等于)特定类的元素id...
CSS基础（二）
class和id的使用场景 id：适用与指定元素class：适用与多个有共同样式的元素 CSS常见选择器基础选择...
jquery选择器汇总
d选择器 #id --> 匹配指定id名称元素选择器 --> 匹配指定标签名类型选择器 .class -->...
SetAttribute()、appendChild（）、ins
js无非就是获取元素的属性和节点,比如获取元素的属性如src、class、value、id等，最多使用的就是Set...
遍历整个 DOM 树并打印名称
1. 遍历 DOM 树并打印节点类型及名称 2. 遍历 DOM 树并打印所有元素的 tagName 在这段代码中，...
2.CSS选择器-CSS基础
一、元素的id和class id 和 class 是元素最基本的两个属性，一般情况下，id 和 class都是用来...