2019-03-10// 深度优先
function deepLogTagNames(parentNode){
console.log(parentNode.tagName)
const childNodes = parentNode.childNodes
// 过滤没有 tagName 的节点，遍历输出
Array.prototype.filter.call(childNodes, item=>item.tagName)
.forEach(itemNode=>{
deepLogTagNames(itemNode)
})
}
deepLogTagNames(document.body)
// 广度优先
function breadLogTagNames(root){
const queue = [root]
while(queue.length) {
const currentNode = queue.shift()
const {childNodes, tagName} = currentNode
tagName && console.log(currentNode.tagName)
// 过滤没有 tagName 的节点
Array.prototype.filter.call(childNodes, item=>item.tagName)
.forEach(itemNode=>{
queue.push(itemNode)
})
}
}
breadLogTagNames(document.body)展开 24
2019-03-09第一段代码中的 DocumentFragment 应该改为 DocumentType...
/**
* @param {Element} el
* @param {(Element) => void} action
function walk (el, action) {
if (el) {
action(el)
walk(el.firstElementChild, action)
walk(el.nextElementSibling, action)
}
}
walk(document.documentElement, el => console.log(el.nodeName))
// 如果想要去重...
const set = new Set()
walk(document.documentElement, el => {
set.add(el.nodeName)
})
for (let n of set)
console.log(n)展开 13
2019-05-06这样可以把tagName全打印出来...
document.getElementsByTagName('*'); 2 7
2019-03-12insertBefore(newNode,null)和appendChild的区别是啥 3
2019-03-10var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false)
var node
while(node = walker.nextNode())
console.log(node.tagName)
---------- or recursive ------------
const result = []
function getAllTagName(parent) {
const childs = Array.from(parent.children)
result.push(...childs.map(el => el.tagName))
for (var i = 0; i < childs.length; i++) {
if (childs[i].children.length) getAllTagName(childs[i])
}
if (i == 0) return
}
getAllTagName(document)
console.log(result)展开 3
2019-06-17document.querySelectorAll('*')，这样有点过分了 1
2019-05-08const root = document.getElementsByTagName('html')[0];
// 深度优先遍历
function deepLogTagName(root) {
console.log(root.tagName);
if (root.childNodes.length > 0) {
for (let i = 0; i < root.childNodes.length; i++) {
if (root.childNodes[i].nodeType === 1) {
deepLogTagName(root.childNodes[i]);
}
}
}
}
deepLogTagName(root);
console.log("111111111111111111111")
// 广度优先遍历
console.log(root.tagName);
function breadLogTagName(root) {
if (root.childNodes.length > 0) {
for (let i = 0; i < root.childNodes.length; i++) {
if (root.childNodes[i].nodeType === 1) {
console.log(root.childNodes[i].tagName);
}
}
for (let i = 0; i < root.childNodes.length; i++) {
if (root.childNodes[i].nodeType === 1) {
breadLogTagName(root.childNodes[i]);
}
}
}
}
breadLogTagName(root)展开 1
2019-03-26function loop(node){
if(!node){
return
}
if(node.nodeType === document.ELEMENT_NODE)
console.log(node.nodeName);
if(node.childNodes){
node.childNodes.forEach(child => {
loop(child)
})
}
}
loop(document)展开 1
2019-03-11第一段代码中的 DocumentFragment 应该改为 DocumentType 1
2019-10-18引用：如果你追求极致的性能，还可以把 Attribute 当作节点：getAttributeNode，setAttributeNode。
2019-10-11let set = new Set();
Array.from(document.getElementsByTagName('*')).map(node => set.add(node.tagName.toLowerCase()));
let list = Array.from(set).sort();
console.log(list);- 2019-06-05老师,请问一下,"对 DOM 而言，Attribute 和 Property 是完全不同的含义，只有特性场景下，两者才会互相关联（这里在后面我会详细讲解，今天的文章里我就不展开了）"后面有讲解这块吗？
作者回复: 有啊
2019-05-06膜拜前排各位大佬，学习了！
2019-04-25void function loop(parent){
const children = parent.childNodes;
children.forEach(item => {
if(item.nodeType === 1){
console.log(item.nodeName)
if(item.childNodes.length > 0){
loop(item)
}
}
})
}(document);展开
2019-04-19const $body = document.body
function deep (parentNode) {
const children = parentNode.childNodes
children.forEach(item => {
if(item.nodeType === 1 ) {
console.log(item.nodeName)
if (item.childNodes.length > 0) {
deep(item)
}
}
})
}
deep($body)展开- 2019-04-17void function queryAndPrintSon(params) {
var child = params.children
for (let index = 0; index < child.length; index++) {
const element = child[index];
console.log(element.tagName)
queryAndPrintSon(element)
}
}(document.getRootNode())展开 
2019-03-27let tagNameArr = [];
function travaldom(root){
if(root.tagName && root.tagName !=='text') tagNameArr.push(root.tagName)
root.childNodes.forEach(node=>{
travaldom(node);
});
}
travaldom(document);
console.log(tagNameArr)展开
2019-03-27老师请问这些html的结构化内容有在哪本书进行介绍吗
2019-03-22<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>遍历输出tagName</title>
</head>
<body>
<section>
<header>This is a header</header>
<div>
<h4>This is a content title</h4>
<p>This is the <em>first</em> paragraph.</p>
<p>This is the <strong>second</strong> paragraph.</p>
</div>
<footer>This is a footer of this page.</footer>
</section>
<script>
const secElement = document.getElementById('sec');
function getChildTagNames() {
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null, false)
let node;
while(node = walker.nextNode()) {
if(node.tagName)
console.log(node.tagName);
}
}
getChildTagNames(secElement);
</script>
</body>
</html>展开
2019-03-11老师：
比如 document.body.attribute.class = “a” 等效于 document.setAttribute(“class”, “a”)。
应该是 document.body.attributes吧？
疑惑：
var divDom = document.createElement('div')
divDom.attributes.id = 'app'
divDom.setAttribute('class', 'app')
为什么在divDom上看不到id属性？append到页面中后，同样用getElementById也选择不到这个DOM，用class就可以。展开