Dom节点的获取 ||| 遍历一个分支上的所有不含空的节点

在javascript中 我们通常会对dom元素进行一些操作
那么我们怎么去获取到需要操作的节点呢?

Dom api

   // 不带Element 的都是dom核心语法Node节点 在node.js中也可以用
        console.log("打印获取html内容")
        console.dir(document.documentElement)
        console.dir("打印body内容")
        console.dir(document.body)
        console.log("打印head内容")
        console.dir(document.head)
        console.log("打印html的nodeName(当前节点名字)")
        console.dir(document.documentElement.nodeName)
        console.log("打印html的nodeValue")
        console.dir(document.documentElement.nodeValue)
        console.log("打印html的nodeType")
        console.dir(document.documentElement.nodeType)
        console.log("判断html是否有子节点hasChildNodes")
        console.dir(document.documentElement.hasChildNodes())
        console.log("打印html的属性attributes")
        console.dir(document.documentElement.attributes)
        console.log("打印html的父级parentNode")
        console.dir(document.documentElement.parentNode)
        console.log("打印html的父级parentElement")
        console.dir(document.documentElement.parentElement)
        console.log("打印html的子节点包含空格节点childNodes")
        console.dir(document.documentElement.childNodes)
        console.log("打印html的子节点children")
        console.dir(document.documentElement.children)
        console.log("打印html的第一个子节点包含空格节点firstChild")
        console.dir(document.documentElement.firstChild)
        console.log("打印html的第一个子节点firstElementChild")
        console.dir(document.documentElement.firstElementChild)
        console.log("打印html的最后一个子节点包含空格节点firstChild")
        console.dir(document.documentElement.lastChild)
        console.log("打印html的最后一个子节点lastElementChild")
        console.dir(document.documentElement.lastElementChild)
        console.log("打印html(当前节点)的前一个兄弟节点包含空格节点previousSibling")
        console.dir(document.documentElement.previousSibling)
        console.log("打印html(当前节点)的前一个兄弟节点previousElementSibling")
        console.dir(document.documentElement.previousElementSibling)
        console.log("打印html(当前节点)的后一个兄弟节点包含空格节点nextSibling")
        console.dir(document.documentElement.nextSibling)
        console.log("打印html(当前节点)的后一个兄弟节点nextElementSibling")
        console.dir(document.documentElement.nextElementSibling)

常用的找查元素的方法

		//根据id来找查元素
        document.getElementById('id名')
            // 根据css样式名来找查元素
        document.getElementsByClassName('样式名')
            // 根据元素name值来找查元素 返回的是类数组
        document.getElementsByName('元素name值')
            // 根据标签名（<a><a/> 写a）来找查元素  返回的是类数组
        document.getElementsByTagName('标签名 a')
            //根据css选择器来找查第一个满足的元素
        document.querySelector('css选择器')
            //根据css选择器来找查满足的所有元素
        document.querySelectorAll('css选择器')

遍历一个分支上的所有不含空的节点

function aa(yuansu) {
            console.log(
            // 当它节点类型是3的时候代表它是文本节点 输出他的值
                yuansu.nodeType != 3 ? yuansu.nodeName : yuansu.nodeValue
            )
            var child = yuansu.childNodes;
            for (var i = 0; i < child.length; i++) {
                aa(child[i]);
            }
        }