js基础----dom节点使用console.log打印始终是最新的现象(待验证)

今天在复习dom节点的创建的时候发现打印日志的时候,不管log的位置在哪里,打印出的节点始终是最新的

这就让我很困惑了,js不是由上到下执行的吗,然后问了同事,他分享了打印对象时候的类似的现象

 

先展示下打印dom节点的demo

<script>
/* 创建标签节点 */
var p_tag = document.createElement(‘p‘);
console.log(‘p_tag: ‘, p_tag);
 
/* 创建文本节点 */
var text_node = document.createTextNode(‘我是文本节点‘);
console.log(‘text_node: ‘, text_node);

/* 创建标签节点 */
var style_attribute = document.createAttribute(‘style‘);
style_attribute.value = "color: red;"
console.log(‘style_attribute: ‘, style_attribute);

/* 组合标签节点,文本节点,标签节点 */
p_tag.appendChild(text_node);
p_tag.setAttributeNode(style_attribute);
console.log(‘p_tag complex: ‘, p_tag);
console.log(‘p_tag complex text: ‘, p_tag.innerHTML);
 
// /* 给标签设置内容 */
p_tag.innerHTML = "我是p的文案"
console.log(‘p_tag txt: ‘, p_tag);
console.log(‘p_tag txt innerHtml: ‘, p_tag.innerHTML);

</script>

控制台打印出的内容如下:

js基础----dom节点使用console.log打印始终是最新的现象(待验证)

 

圈出来的三个地方打印出来的都是最新的p标签, 但是innerHTML的属性值是不一样的

 

同事分享的场景demo如下

    var people = {name: "Summer", look: "beautiful"}
    console.log(‘people: ‘, people);
    people.name= "hanMeiMei";
    people.look = "handsome";

 

控制台打印如下, 打印出的对象内容和展开里面显示的不一致

js基础----dom节点使用console.log打印始终是最新的现象(待验证)

 

 第一种场景造成的原因我是这么理解的,dom节点是一个对象,在内存中是分堆/栈存储的,打印的时候p_tag实际是dom节点存储的地址,根据地址找到的就是更新后的dom节点

 

第二个场景: chrome控制台打印对象,默认没有展开(此时是原始people),显示的是更改前的对象;展开后才是内存中地址对应栈中存储的对象----修改后的对象(newPeople)

我还是不明白默认没有展开的时候为什么还是原始的people, 我使用safari浏览器打印出来是下面这样的

js基础----dom节点使用console.log打印始终是最新的现象(待验证)

 

 所以大胆猜测chrome浏览器打印对象必须以展开后的为准

 

js基础----dom节点使用console.log打印始终是最新的现象(待验证)

上一篇:UDEV SCSI Rules Configuration for ASM in Oracle Linux 5 and 6


下一篇:20175301李锦然《网络对抗技术》Exp9 Web安全基础