js中的节点类型

只读属性 Node.nodeType 表示的是该节点的类型,比如 元素, 文本 和 注释。

常量 描述
Node.ELEMENT_NODE 1 一个 元素 节点,例如

Node.TEXT_NODE 3 Element 或者 Attr 中实际的 文字。
Node.CDATA_SECTION_NODE 4 一个 CDATASection,例如 。
Node.PROCESSING_INSTRUCTION_NODE 7 一个用于XML文档的 ProcessingInstruction (en-US) ,例如 声明。
Node.COMMENT_NODE 8 一个 Comment 节点。
Node.DOCUMENT_NODE 9 一个 Document 节点。
Node.DOCUMENT_TYPE_NODE 10 描述文档类型的 DocumentType 节点。例如 就是用于 HTML5 的。
Node.DOCUMENT_FRAGMENT_NODE 11 一个 DocumentFragment 节点。

用法

	const node = document.documentElement.firstChild
	if (node.nodeType !== Node.COMMENT_NODE) {
		console.log('第一行没有注释!')
	}
	const div = document.createElement('div')
	div.textContent = '我是文本内容'
	console.log(div.nodeType === Node.ELEMENT_NODE)   			// true
	console.log(div.firstChild.nodeType === Node.TEXT_NODE)   	// true
	// 递归方式:取出某个元素下所有文本节点
    function getTextNodeList(dom) {
        let textNodes = []
        const handle = dom => {
            const nodeList = dom.childNodes
            nodeList.forEach(c => {
                if (c.nodeType === Node.TEXT_NODE) {
                    textNodes.push(c)
                } else {
                    handle(c)
                }
            })
        }
        handle(dom)
        return textNodes
    }

	// 循环方式:取出某个元素下所有文本节点
   function getTextNodeList(dom) {
        let nodeList = [...dom.childNodes]
        let textNodes = []
        while (nodeList.length) {
            const node = nodeList.shift()
            if (node.nodeType === Node.TEXT_NODE) {
                textNodes.push(node)
            } else {
                nodeList.unshift(...node.childNodes)
            }
        }
        return textNodes
    }

你可能感兴趣的:(js基础,javascript)