页面效果中，id显示为[obeject HTMLDivElement]

源自：9-9 访问子节点的第一和最后项

页面效果中，id显示为[obeject HTMLDivElement]

我让获取得到的id值给了x，然后我想在页面里呈现id值（也就是con）。我原码直接写x，但是效果显示出来是[obeject HTMLDivElement]。。这是为何呢？

提问者：木木two 2016-10-11 20:15

个回答

qq_浮世_4

2016-11-21 15:29:09

浏览器性能不同，firstChild包括了空白文本，现在普遍用的是firstElementChild和lastElementChild,这样是除了空白文本以外的内容，你可以试一试

0
慕粉3951534

2016-10-12 17:10:39

首先说一下，你的代码写的很认真，也规整，调整前、调整后都分别注释，向你学习。
然后我把你的代码拷出来运行了一下，效果如下：
两个问题，先说第二个，就是那个 undefined，这是你粗心了：
```
document.write(x+"的最后一个子节点是："+x.lastChild.nodeNam+"<br />"); // .nodeNam
```
.nodeNam 少了一个 e，小问题。
然后第一个，也就是你问的问题，先解释一下，
```
var x=document.getElementById("con"); // x 为 id 为 con 的元素对象
```
这里 x 是一个元素对象，id 值为 con，所以你直接引用 x ，打印出来的结果就是 [obeject HTMLDivElement]，说明 x 是一个 html 的 div 元素，这没有错，如果你想显示为 id 的值 con，有两个办法：
```
// 第一种， x.getAttribute("id")，获取属性 id 的值
document.write(x.getAttribute("id") +"的第一个子节点是："+x.firstChild.nodeName+"<br />");
// 第二种，x.id，直接调用属性 id 的值
document.write(x.id+"的最后一个子节点是："+x.lastChild.nodeNam+"<br />");
```
以上两种方法都可以。

2