children和childrenNodes及nodeValue

在JavaScript中，尤其是当处理DOM元素时，children[0] 和 childNodes[0] 确实存在区别，尽管它们看起来都像是访问某个元素子节点的方式。以下是它们之间的主要区别：

children 属性

children 属性是一个只读的HTMLCollection，它包含了指定元素的所有子元素节点。这意味着它不会包含文本节点（除非文本节点被包裹在另一个元素中，如<span>或<div>）。children 属性只返回元素节点。

例如，如果你有以下HTML：

html复制代码

	<div id="parent">
	Some text
	<span>Another text</span>
	</div>

在JavaScript中，document.getElementById('parent').children[0] 将是undefined，因为parent元素的第一个子节点是一个文本节点，而不是一个元素节点。而document.getElementById('parent').children[1]将是<span>Another text</span>元素。

childNodes 属性

childNodes 属性是一个NodeList，它包含了指定元素的所有子节点，无论是元素节点还是文本节点。这意味着它将返回所有类型的子节点。

使用上面的HTML示例，document.getElementById('parent').childNodes[0] 将是包含文本“Some text”的文本节点，而document.getElementById('parent').childNodes[1]（如果存在的话）将是<span>Another text</span>元素节点（但实际上，由于空白字符（如换行和空格）也被视为文本节点，因此实际的索引可能会有所不同）。

总结

• children 只返回元素节点的集合。
• childNodes 返回所有类型的子节点（元素节点、文本节点等）的集合。

当你只关心元素节点时，使用children会更方便。但如果你需要处理文本节点或注释节点等，那么你应该使用childNodes。

childrenNodes[0].nodeValue是什么意思

在JavaScript中，childNodes[0].nodeValue 是用来获取或设置childNodes集合中第一个子节点的nodeValue属性的值。但是，这里有一个常见的误解，因为childNodes集合包含了所有类型的子节点，包括元素节点、文本节点和注释节点等。

对于不同类型的节点，nodeValue的意义是不同的：

1. 文本节点：nodeValue 包含文本节点的文本内容。
2. 元素节点：对于元素节点，nodeValue 是null，因为元素节点的内容通常由其子节点（包括文本节点和其他元素节点）来表示。
3. 注释节点：nodeValue 包含注释的内容。

因此，当你使用childNodes[0].nodeValue时，你实际上是在尝试获取或设置childNodes集合中第一个子节点的文本内容（如果该子节点是文本节点或注释节点的话）。如果该子节点是元素节点，那么nodeValue将是null。

下面是一个简单的例子：

html复制代码

	<div id="example">
	Hello, <span>world!</span>
	</div>
	<script>
	var div = document.getElementById('example');
	console.log(div.childNodes[0].nodeValue); // 输出 "Hello, "（如果前面没有空格，可能是undefined或其他空白字符）
	console.log(div.childNodes[1].nodeValue); // 输出 null，因为childNodes[1]是一个元素节点（<span>）
	console.log(div.childNodes[2].nodeValue); // 输出 "world!"（如果存在的话，这取决于浏览器如何处理空格和换行）
	</script>

注意：由于浏览器可能会将HTML中的空格和换行解析为文本节点，因此childNodes集合中的节点数量可能会比你预期的多。在实际开发中，通常建议使用children属性（只包含元素节点）或更具体的DOM操作方法（如textContent或innerText）来获取或设置元素的内容。