本篇博客将讨论一个常见的JavaScript错误：Uncaught TypeError: Cannot read property 'setAttribute' of null（无法读取null对象的属性...示例代码假设我们有一个网页上的表单，其中有一个输入框和一个按钮。当用户点击按钮时，我们想要获取输入框的值，并动态地将其添加到网页的内容中。...在按钮的点击事件处理程序中，我们获取输入框的值，并将其创建为一个新的元素，然后将其添加到内容区域中。最后，我们清空输入框的值。...setAttribute'方法简介在Web开发中，setAttribute方法是用于为HTML元素设置属性的JavaScript方法。它允许我们以动态的方式修改元素的属性值。...setAttribute方法是一个强大且常用的JavaScript方法，用于为HTML元素动态设置属性。它允许我们以编程方式修改和添加属性，增强了对HTML元素的控制能力。
; 注意:如果我们复制保存着某个对象的变量时,那么两个变量就会指向同一个对象,当我们为对象添加属性时,操作的就是实际的对象; 1.1 动态的属性 引用类型 var person = new Object...() // 创建一个对象 person.name = '张三' // 设置对象属性 console.log(person.name) // 输出对象属性 这个属性会一直伴随着对象,除非对象销毁,否则该属性会一直存在...IE7 发布后，JavaScript 引擎的垃圾回收程序被调优为动态改变分配变量、字面量或数组槽位等会触发垃圾回收的阈值。IE7 的起始阈值都与 IE6 的相同。...接触引用 将内存占用量保持在一个较小的值可以让页面性能更好。优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如果数据不再必要，那么把它设置为 null ，从而释放其引用。...但 globalPerson 是一个全局变量，应该在不再需要时手动解除其引用，最后一行就是这么做的。不过要注意，解除对一个值的引用并不会自动导致相关内存被回收。
内部属性名由双方括号[[]]包围，在创建对象时可用。 内部属性不能动态地添加到现有对象。 内部属性可以在某些内置 JavaScript 对象中使用，它们存储ECMAScript规范指定的内部状态。...默认值为true，说明能通过for-in循环返回属性 将属性键添加到返回的数组之前，Object.keys方法还检查enumerable 描述符。...但是，Reflect.ownKeys方法不会检查此属性描述符，而是返回所有自己的属性键。 Prototype描述符有其他方法，get和set分别用于获取和设置值。...，否则将抛出一个错误，因为我们将 writable 设置为 false, 表示该属性不可写。...JavaScript对象属性还具有属性描述符，该属性描述符使我们可以控制其值以及可以设置它们的值，还是可以更改其属性描述符等。
示例：将blog作为content的第一个子元素，将company作为content的最后一个子元素 <!...而且，document对象是window对象的一个属性。...技巧：由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。...可以将两个页面的document.domain值都设置为xxx.com，就可以互相访问了。...（3）分割文本节点：将一个文本节点分成两个文本节点，按指定的位置分割nodeValue值。
1、动态的属性 创建一个变量并为该变量赋值，当这个值保存到变量中以后，对于引用类型的值，我们可以为其添加属性和方法，也可以改变和删除其属性和方法。...（1）延长作用域链 try-catch的catch：会创建一个新的变量对象； with：会将指定的对象添加到作用域链中。 （2）没有块级作用域 JavaScript没有块级作用域。...1、标记清除 JavaScript最常用的垃圾收集方式是标记清除。 销毁带标记的值。 2、引用计数 跟踪记录每个值被引用的次数。 建议：手动将变量设置为null。...3、性能问题 确认垃圾收集的时间间隔是一个非常重要的问题。 触发垃圾收集的变量字面量和数组元素的临界值应该要动态修正。 4、管理内存 解除引用（也就是将变量设置为null）。...Javascript引擎目前都不再使用这种算法；但在IE中访问非原生 Javascript对象(如DOM元素)时，这种算法仍然可能会导致问题。
这个建议最适合全局变量和全局对象的属性（显示设置为null）。局部变量在超出作用域后会被自动解除引用。 不过要注意，解除对一个值的引用并不会自动导致相关内存被回收。...当然解决方案就是避免JavaScript的“先创建再补充”式的动态属性赋值，并在构造器中一次性声明所有属性。这样就可以保证两个实例的一致性，从而带来潜在的性能提升。...动态删除属性或添加属性都会导致一样的结果。...最佳实践是把不想要的属性设置为null，这样可以保持隐藏类不变和继续共享，同时也能达到删除引用值供垃圾回收器回收的效果，比如 a1.author = null; 4.4 内存泄漏 JavaScript中的内存泄漏大多是由不合理的引用导致的...一种有效的策略就是使用对象池，在初始化的某一时刻可以创建一个对象池，用来管理一组可回收的对象。应用程序可以向这个对象池请求一个对象、设置其属性、使用它，然后在操作完成后再把他归还给对象池。
因为 JavaScript 可以使用 DOM API，所以通过向 DOM 中动态添加 script 元素同样可以加载指定的脚本。只要创建一个 script 元素并将其添加到DOM 即可。...将内存占用量保持在一个较小的值可以让页面性能更好。优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如果数据不再必要，那么把它设置为 null，从而释放其引用。这也可以叫 作解除引用。...动态删除属性与动态添加属性导致的后果一样。最佳实践是把不想要的属性设置为 null。这样可以保持隐藏类不变 和继续共享，同时也能达到删除引用值供垃圾回收程序回收的效果。...数组的大小是动态可变的，引擎会删除大小为 100 的数组，再创建一个新的大小为200 的数组。...删除性能 使用 delete 删除 Object 属性的性能一直以来饱受诟病，目前在很多浏览器中仍然如此。为此，出现了一些伪删除对象属性的操作，包括把属性值设置为 undefined 或 null。
大多数 JavaScript 解释器使用类似字典的结构（基于哈希函数）来存储对象属性值在内存中的位置，这种结构使得在 JavaScript 中检索属性的值比在 Java 或 C＃ 等非动态编程语言中的计算成本更高...在 Java 中，所有对象属性都是在编译之前由固定对象布局确定的，并且无法在运行时动态添加或删除（当然，C＃具有动态类型，这是另一个主题）。...如果两个对象共享一个隐藏类并且同一属性被添加到它们中，则转换将确保两个对象都接收相同的新隐藏类以及随其附带的所有优化代码。...一个名为“C2”的新隐藏类会被创建，如果将一个属性 “y” 添加到一个 Point 对象（已经包含属性“x”），一个类转换会添加到“C1”，则隐藏类应该更改为“C2”，point 对象的隐藏类更新为“C2...动态属性： 因为在实例化之后向对象添加属性将强制执行隐藏的类更改，并降低之前隐藏类所优化的所有方法的执行速度，所以在其构造函数中分配所有对象的属性。
如果两个对象共享一个隐藏类，并且同一属性被添加到它们之中，那么转换将确保两个对象都能够接收到相同的新隐藏类和随之附带的所有优化代码。...如果两个对象共享一个隐藏类，并且同一属性被添加到它们之中，那么转换将确保两个对象都能够接收到相同的新隐藏类和随之附带的所有优化代码。...创建一个名为C2的新隐藏类，将类转换添加到C1，声明如果将属性y添加到Point对象（已包含属性x），则隐藏类应更改为C2，点对象的隐藏类更新为C2。 ? 隐藏类的转换取决于属性添加到对象的顺序。...每当在特定对象上调用方法时，V8 引擎必须找到该对象的隐藏类，才能确定访问特定属性的偏移量。当同一方法两次成功调用到同一个隐藏类之后，V8会省略对隐藏类的查找，直接将属性的偏移量添加到对象指针本身。...动态属性：在实例化后向对象添加属性将会强制更改隐藏类, 并且会减慢之前隐藏类优化的所有方法。应该在其构造函数中分配所有对象的属性。
('属性') 主要获得自定义的属性（标准）我们自定义的属性 设置属性值 element.属性 = '值' 设置内置属性 element.setAttribute('属性','值'); /...node.appenChild(child) 将一个节点添加到指定夫节点的子节点列表末尾。类似于css里面的after伪元素。...node.insertBefore(child,指定元素) 将一个节点添加到父节点的指定子节点前面，类似于css里面的before伪元素。...案例：简单留言发布 案例分析核心思路：点击按钮之后，就动态创建一个li，添加到ul里面创建li的同时，把文本域里面的值通过li.inn......如果括号参数为true，则是深拷贝，会复制节点本身以及里面所有的子节点。
示例：将blog作为content的第一个子元素，将company作为content的最后一个子元素 李刚 http://blog.csdn.net/ligang2585116 ptmind...而且，document对象是window对象的一个属性。...技巧：由于跨域安全限制，来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值，这些页面就可以互相访问对方包含的JavaScript对象了。...可以将两个页面的document.domain值都设置为xxx.com，就可以互相访问了。... （3）分割文本节点：将一个文本节点分成两个文本节点，按指定的位置分割nodeValue值。
一、使用 JS 完成注册表单数据校验 1.需求分析 用户在进行注册的时候会输入一些内容，但是有些用户会输入一些不合法的内容，这样 会导致服务器的压力过大，此时我们需要对用户输入的内容进行一个校验(前端校验和后台...(使用 display 属性的 none 值) 第二步：确定事件(onload)并为其绑定一个函数 第三步：书写这个函数(设置一个显示图片的定时操作) 第四步： 书写定时器中的函数(获取广告图片的位置并设置属性...element.lastChild 返回元素的最后一个子元素。 element.setAttribute() 把指定属性设置或更改为指定值。...Attribute对象 我们所认知的html页面中所有标签里面的属性都是attribute 5.2 DOM练习 在页面中使用列表显示一些城市 text 我们希望点击一个按钮实现动态添加城市。...(籍贯)，当用户选择一个具体的省份，在后面的下拉列表中动态加载该省份下所有的城市。
下面针对 JavaScript 对象时使用 Rest 和 Spread 时的 7 个鲜为人知的技巧。 添加属性 克隆一个对象，同时向(浅)克隆对象添加附加属性。...} 对象合并 将两个对象合并到一个新对象中。 将 Part1 和 Part2 合并到 user1中。..., name: 'Naboo' } 若要将 password 移到最后一个属性，请从对象中解构 password。然后在使用 Rest 操作符后重新设置 password 属性。...} 默认属性 默认属性是仅当它们不包含在原始对象中时才设置的值。 在本例中，user2 不包含 quotes 属性。...setdefaults 函数确保所有对象都设置了 quotes 属性，否则它将被设置为[]。 当调用 setDefaults (user2)时，返回值将包含 quotes 属性: []。
使用console.log() 引言 所有现代的网页浏览器、NodeJ以及几乎所有其他JavaScript环境都支持使用一套日志记录方法将信息写入控制台中。...属性的新标签并把它添加到html body的最后。...笔记 alert方法从技术上讲是 window对象的一个属性，但是因为 window所有属性都自动的是一个全局变量，我们可以把 alert当成一个全局变量来使用，代替作为 window属性来使用——这意味着你可以直接使用...使用Chrome 46.0， window.alert()在一个 里被阻止了除非它的沙盒属性的值为allow-modal。...如果用户点击了OK按钮，将返回输入框的值，否则这个方法就返回 null。 prompt的返回值总是一个字符串，除非用户点击取消，那就返回的是 null了。
原型链概要 prototype属性是JavaScript为每个Function实例创建的一个对象。 具体的说："它将通过new关键字创建的链接回创建它们的" 。...由于在我们创建的myArray数组中没有找到join(),因此JavaScript会在原型链中查找join()方法； 其实这样做我们很容易就联想到了效率和重用，通过把该属性添加到原型中去，我们所有的数组都有充分利用了相同的...用新对象替换prototype属性会删除默认的构造函数属性 我们可以用一个新值来替换prototype属性的默认值，但是需要特别注意的是：这么做会删除在"预制"原型对象中找到的默认的constructor...所以当你想要替换JavaScript设置的默认的prototype属性(与一些js oop模式类似)，应该重新连接引用该构造函数的构造函数属性。...下面我们简单的改一下上面的代码，以便构造函数属性能够再次为适当的构造函数提供引用 ? 继承原型属性的实例总是能够获得最新值 其实prototype是动态的继承原型的属性的实例总是能够获得最新值， ?
而通过 DOM 对象的属性访问事件属性时返回的则是一个JavaScript函数对象 进行 DOM 编程时通常会放弃使用 getAttribute()而只使用对象属性 getAttribute()主要用于取得自定义属性的值...DOM将文档片段定义为“轻量级”文档，能够包含和操作节点，却没有完整文档那样额外的消耗。不能直接把文档片段添加到文档。相反，文档片段的作用是充当其他要被添加到文档的节点的仓库。...，则该节点会从文档树中移除，不会再被浏览器渲染 可以通过 appendChild()或 insertBefore()方法将文档片段的内容添加到文档 在把文档片段作为参数传给这些方法时，文档片段的所有子节点会被添加到文档中相应的位置...因为HTML解析器会解析设置给 innerHTML（或 outerHTML）的值。解析器在浏览器中是底层代码（通常是 C++代码），比JavaScript快得多。...在用于读取值时，innerText 会按照深度优先的顺序将子树中所有文本节点的值拼接起来。在用于写入值时，innerText会移除元素的所有后代并插入一个包含该值的文本节点。
元素，并为其设置了id属性为"container"，表示新元素将会被添加到这个容器中。...接着，通过JavaScript的createElement方法，我们创建了一个新的元素，并使用innerHTML属性来设置它的内容。...最后，我们通过appendChild方法将新元素添加到容器中。 这个过程可以动态地向文档中添加内容，非常适用于需要根据用户操作动态生成元素的情况，比如添加新的列表项或评论。...写入文本 Document对象还提供了一个方便的方法write，用于将文本写入文档。这对于动态生成内容或调试JavaScript非常有用。 <!...这可以在页面加载时或在JavaScript代码中使用，以将内容动态添加到文档中。 需要注意的是，document.write方法会替换整个文档内容，因此要慎用，以免破坏页面的结构。
此外，pop（）方法将最后一个元素从给定的数组中取出并返回。然后改变被调用的数组。...35、什么是JavaScript中的unshift方法？ Unshift方法就像在数组开头工作的push方法。该方法用于将一个或多个元素添加到数组的开头。 36、对象属性如何分配？...for-in循环的语法是： 在每次循环中，来自对象的一个属性与变量名相关联，循环继续，直到对象的所有属性都被耗尽。 42、描述JavaScript中的匿名函数？...唯一的区别是web-garden是在单个服务器中包含许多处理器的设置，而web-farm是使用多个服务器的较大设置。 48、如何分配对象属性？ 将属性分配给对象的方式与赋值给变量值相同。...51、JavaScript中如何使用事件处理程序？ 事件是由用户生成活动（例如单击链接或填写表单）导致的操作。需要一个事件处理程序来管理所有这些事件的正确执行。事件处理程序是对象的额外属性。
领取专属 10元无门槛券
手把手带您无忧上云
